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

Eiji Kitamura

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

API Button Mode

L'interfaccia utente FedCM è disponibile come widget visualizzato nell'angolo in alto a destra sul computer o come foglio inferiore sui dispositivi mobili, non appena viene richiamata l'API, ovvero quando l'utente arriva sulla relying party (RP). Questa modalità viene chiamata modalità widget. Per visualizzare il widget, l'utente deve aver eseguito l'accesso al provider di identità prima di accedere al relying party. FedCM da solo non aveva un modo affidabile per consentire all'utente di accedere all'IdP prima di poter accedere all'RP utilizzando l'account disponibile sull'IdP. FedCM sta per aggiungere un modo per farlo.

La nuova API Button Mode aggiunge una nuova modalità UI chiamata modalità pulsante. A differenza della modalità widget, la modalità pulsante non deve essere richiamata non appena l'utente arriva nella RP. Deve invece essere richiamato quando l'utente avvia un flusso di accesso, ad esempio premendo un pulsante "Accedi con IdP".

Non appena viene premuto il pulsante, FedCM controlla se l'utente ha eseguito l'accesso al provider di identità tramite un recupero all'endpoint account o 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 in cui l'utente può scegliere un account IdP con cui accedere. Selezionando un account, l'utente può procedere all'accesso al RP utilizzando l'account IdP.

Nell'interfaccia utente della modalità pulsante, la finestra di dialogo di accesso visualizzata è più grande rispetto alla modalità widget, quindi anche l'icona del brand deve essere più grande per mantenere la coerenza visiva. Mentre la dimensione minima dell'icona per la modalità widget è 25 x 25 px, la dimensione minima per l'icona in modalità pulsante è 40 x 40 px. Il file well-known dell'IdP consente di specificare più URL delle icone nel seguente modo:

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

Provalo tu stesso utilizzando Chrome 125 all'indirizzo https://fedcm-demo-rp.dev/active-mode.

Per utilizzare l'API Button Mode:

• Attiva la funzionalità sperimentale FedCmButtonMode in chrome://flags.
• Assicurati di richiamare l'API dietro l'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"
    }
  });

Il browser invierà un nuovo parametro all'endpoint di asserzione dell'ID che rappresenta 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

Rilevamento delle funzionalità

Per determinare se il browser è idoneo all'utilizzo della modalità pulsante, puoi esaminare 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.
}

Utilizzare l'opzione Altro account

Il RP può consentire agli utenti di "utilizzare altri account" nel selettore account, ad esempio quando i IdP supportano più account o la sostituzione dell'account esistente.

Per attivare l'opzione per utilizzare un altro account:

• Attiva la funzionalità sperimentale FedCmUseOtherAccount in chrome://flags o registrati alla prova dell'origine dell'API Button Mode.
• L'IdP specifica quanto segue nel file di configurazione dell'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.

I provider di identità possono anche attivare la modalità pulsante registrando una prova dell'origine:

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

Origin trials ti consente di provare nuove funzionalità e fornire feedback sulla loro usabilità, praticità ed efficacia alla community degli standard web. Per maggiori informazioni, consulta la Guida alle prove dell'origine per 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 del fornitore di servizi come Origine web.
4. Controlla la corrispondenza di terze parti per inserire il token con JavaScript su altre origini.
5. Fai clic su Invia.
6. Incorpora il token emesso in 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 del fornitore di servizi di identità (IdP) fornito 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.

CORS e SameSite=None saranno obbligatori in Chrome 125

CORS

A partire da Chrome 125, Chrome applicherà CORS all'endpoint di asserzione dell'ID.

CORS (Cross-Origin-Resource-Sharing) è un sistema che consiste nella trasmissione di intestazioni HTTP che determinano se i browser bloccano il codice JavaScript frontend dall'accesso alle risposte per le richieste multiorigine. L'endpoint di asserzione ID sul server IdP deve rispondere alla richiesta con intestazioni aggiuntive. Di seguito è riportata un'intestazione di risposta di esempio 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

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 i cookie all'endpoint degli account, all'endpoint dell'asserzione ID e all'endpoint di disconnessione. A partire da Chrome 125, Chrome invierà le richieste con credenziali solo con i cookie contrassegnati esplicitamente come SameSite=None.