Aggiornamenti di FedCM: prova dell'origine dell'API Button Mode, CORS e SameSite

Eiji Kitamura

A partire da Chrome 125, per l'API Button Mode è iniziata una prova dell'origine su computer. Con l'API Button Mode, gli identity provider possono utilizzare l'API FedCM anche se i loro utenti non hanno sessioni IdP attive al momento della chiamata dell'API. Gli utenti possono quindi accedere a un sito web con il proprio account federato senza essere indirizzati al sito dell'IdP. L'interfaccia utente di FedCM in modalità pulsante è più in evidenza rispetto a quella del flusso del widget esistente perché è protetta da un gesto dell'utente e riflette meglio l'intenzione dell'utente di accedere.

API Button Mode

L'interfaccia utente di FedCM è disponibile come widget visualizzato nell'angolo in alto a destra su computer o come riquadro in basso su dispositivo mobile, non appena viene invocata l'API, ad esempio quando l'utente arriva alla terza parte attendibile (RP). Questa modalità è chiamata widget. Per visualizzare il widget, l'utente deve aver eseguito l'accesso all'IDP prima di accedere all'RP. FedCM da solo non aveva un modo affidabile per consentire all'utente di accedere all'IdP prima di consentirgli di accedere all'RP utilizzando l'account disponibile sull'IdP. FedCM sta per aggiungere un modo per farlo.

Con la modalità widget, in Chrome per computer viene visualizzata una finestra di dialogo nell'angolo in alto a destra senza attivazione da parte dell'utente.

La nuova API Button Mode aggiunge una nuova modalità UI chiamata modalità button. A differenza della modalità widget, la modalità pulsante non è pensata per essere invocata non appena l'utente arriva nella RP. Deve invece essere invocato quando l'utente avvia un flusso di accesso, ad esempio premendo un pulsante "Accedi con l'IDP".

Non appena viene premuto il pulsante, FedCM verifica se l'utente ha eseguito l'accesso all'IDP tramite un recupero all'endpoint account o tramite uno stato di accesso memorizzato nel browser. Se l'utente non ha ancora eseguito l'accesso, FedCM gli chiede di accedere all'IdP utilizzando il login_url fornito dall'IdP tramite una finestra popup. Se il browser sa che l'utente ha già eseguito l'accesso all'IdP o non appena l'utente accede all'IdP con la finestra popup, FedCM apre una finestra di dialogo modale che consente all'utente di scegliere un account IdP con cui accedere. Se seleziona un account, l'utente può procedere per accedere all'RP utilizzando l'account RP.

Nell'interfaccia utente della modalità pulsante, la finestra di dialogo di accesso visualizzata è più grande rispetto alla modalità widget, così come l'icona del brand per mantenere la coerenza visiva. Mentre la dimensione minima dell'icona per la modalità widget è 25 x 25 px, la dimensione minima dell'icona in modalità pulsante è 40 x 40 px. Il file ben noto dell'IdP consente di specificare più URL di icone come segue:

{
  // ... Other settings (like endpoints) here
  "branding": {
    "icons": [
      {
        "url": "https://size-25px-image",
        "size": 25,
      },
      {
        "url": "https://size-40px-image",
        "size": 40
      }
    ]
  }
}

Con la modalità pulsante, in Chrome per computer viene visualizzata una finestra di dialogo modale in alto al centro, con un'icona più grande.

Prova tu stesso utilizzando Chrome 125 all'indirizzo https://fedcm-rp-demo.glitch.me/button_flow.

Un utente sta accedendo al RP utilizzando l'API Button Mode.

Per utilizzare l'API Button Mode:

• Attiva la funzionalità sperimentale FedCmButtonMode in chrome://flags.
• Assicurati di invocare l'API alla base dell'attivazione temporanea dell'utente, ad esempio un clic su un pulsante.
• Richiama l'API con il parametro mode nel seguente modo:

  return await navigator.credentials.get({
    identity: {
      providers: [{
        configURL: "https://idp.example/config.json",
        clientId: "123",
        nonce:"456",
      }],
      mode: "button"
    }
  });

Nota: per il momento Chrome supporta "button" solo nella nuova proprietà mode. Altre proprietà come "widget" verranno aggiunte quando Chrome implementerà questa funzionalità.

Il browser invierà un nuovo parametro all'endpoint di affermazione dell'ID rappresentante il tipo di richiesta includendo mode=button:

POST /fedcm_assertion_endpoint HTTP/1.1
Host: idp.example
Origin: https://rp.example/
Content-Type: application/x-www-form-urlencoded
Cookie: 0x23223
Sec-Fetch-Dest: webidentity
account_id=123&client_id=client1234&nonce=Ct60bD&disclosure_text_shown=true&is_auto_selected=false&mode=button

Nota: se si verifica un problema, la chiamata all'API FedCM che utilizza la modalità pulsante risponde immediatamente, mentre con la modalità widget ritarda intenzionalmente la risposta. Questo perché lo stato di accesso dell'utente all'IdP è considerato informazione privata e l'invio di un indicatore di errore fornisce presto all'RP un indizio sullo stato di accesso dell'utente all'IdP. Con la modalità del pulsante, all'utente viene chiesto di accedere all'IDP, quindi non c'è alcun rischio di esporre lo stato di accesso all'IDP all'RP.

Nota: gli utenti possono disattivare la modalità del widget FedCM nelle impostazioni di Chrome. Ciò non influisce sull'API Button Mode perché la richiesta di accesso viene avviata da un gesto dell'utente e il browser deve aiutare gli utenti a completare la procedura di accesso.

Rilevamento di funzionalità

Per determinare se il browser è idoneo all'utilizzo della modalità di pulsante, puoi esaminarlo con il seguente codice:

let supportsFedCmMode = false;
try {
  navigator.credentials.get({
    identity: Object.defineProperty(
      {}, 'mode', {
        get: function () { supportsFedCmMode = true; }
      }
    )
  });
} catch(e) {}

if (supportsFedCmMode) {
  // The button mode is supported.
}

Utilizza un'altra opzione per l'account

L'RP può consentire agli utenti di "utilizzare altri account" nel selettore account, ad esempio quando le IdP supportano più account o sostituiscono l'account esistente.

Per attivare l'opzione che consente di utilizzare un altro account:

• Attiva la funzionalità sperimentale FedCmUseOtherAccount in chrome://flags o registra la prova dell'origine dell'API Modalità pulsante.
• L'IdP specifica quanto segue nel file di configurazione IdP:

{
  "accounts_endpoint" : ...,
  "modes: {
    "button": {
      "supports_use_other_account": true,
    }
  }
}

Partecipare alla prova dell'origine

Puoi provare l'API Button Mode localmente attivando un flag di Chrome chrome://flags#fedcm-button-mode su Chrome 125 o versioni successive.

Le IdP possono anche attivare la modalità Pulsante registrando una prova dell'origine:

• Registra una prova dell'origine di terze parti per l'RP.

Le prove delle origini ti consentono di provare nuove funzionalità e di fornire feedback sulla loro usabilità, praticità ed efficacia alla community degli standard web. Per maggiori informazioni, consulta la Guida alle prove dell'origine per gli sviluppatori web.

La prova dell'origine dell'API Button Mode è disponibile da Chrome 125 a Chrome 130.

1. Vai alla pagina di registrazione della prova dell'origine.
2. Fai clic sul pulsante Registrati e compila il modulo per richiedere un token.
3. Inserisci l'origine dell'IDP come Origine web.
4. Seleziona Corrispondenza di terze parti per iniettare il token con JavaScript in altre origini.
5. Fai clic su Invia.
6. Incorpora il token emesso su un sito web di terze parti.

Per incorporare il token in un sito web di terze parti, aggiungi il seguente codice alla libreria JavaScript o all'SDK dell'IDP pubblicato dall'origine dell'IDP.

const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);

Sostituisci TOKEN_GOES_HERE con il tuo token.

Nota: se l'API FedCM viene invocata dal RP e non dallo script caricato dall'IDP, il RP deve registrare autonomamente la propria origine ed eseguire la prova dell'origine proprietaria.

CORS e SameSite=None saranno obbligatori in Chrome 125

CORS

Chrome applicherà il CORS all'endpoint di affermazione dell'ID a partire da Chrome 125.

CORS (Cross-Origin-Resource-Sharing) è un sistema costituito dalla trasmissione di intestazioni HTTP che determina se i browser bloccano il codice JavaScript frontend dall'accesso alle risposte per le richieste cross-origin. L'endpoint dell'affermazione dell'identità sul server dell'IDP deve rispondere alla richiesta con intestazioni aggiuntive. Di seguito è riportato un esempio di intestazione di risposta a una richiesta da https://fedcm-rp-demo.glitch.me:

Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true

Nota: poiché Access-Control-Allow-Credentials è impostato su true, Access-Control-Allow-Origin deve restituire un dominio esplicitamente e non può utilizzare un carattere jolly indicato da *.

SameSite=None

Il parametro SameSite del cookie dichiara se il cookie è limitato a un contesto proprietario o same-site. Se lo specifichi come None, il cookie può essere inviato a un dominio di terze parti.

In FedCM, Chrome invia cookie all'endpoint account, all'endpoint dichiarazione ID e all'endpoint disconnessione. A partire da Chrome 125, Chrome invierà queste richieste con credenziali solo con cookie esplicitamente contrassegnati come SameSite=None.