Questa pagina è stata tradotta dall'API Cloud Translation.

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

Eiji Kitamura

A partire da Chrome 125, l'API Button Mode avvia un'istanza su computer. Con l'API Button Mode, i provider di identità possono utilizzare API FedCM anche se i suoi 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 ho raggiunto il sito dell'IdP. L'interfaccia utente di FedCM nella modalità dei pulsanti è più in evidenza rispetto a quello del flusso del widget esistente perché è controllato da un utente gesto e rispecchia meglio l'intenzione dell'utente di accedere.

API Button Mode

L'interfaccia utente di FedCM è disponibile sotto forma di widget visualizzato in alto a destra su computer o come riquadro inferiore sui dispositivi mobili, non appena viene richiamata l'API ad esempio quando l'utente arriva sulla parte coinvolta (RP). Questo processo è chiamato widget. Per visualizzare il widget, l'utente deve aver eseguito l'accesso all'IdP prima di arrivare alla parte soggetta a limitazioni. FedCM di per sé non disponeva di un modo affidabile per l'utente possa accedere all'IdP prima di consentire all'utente di accedere alla parte soggetta a limitazioni utilizzando l'account disponibile nell'IdP. FedCM sta per aggiungere un modo per farlo.

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

La nuova API Button Mode aggiunge una nuova modalità UI chiamata modalità button. A differenza del widget, la modalità pulsante non deve essere richiamata non appena l'utente atterra al parte soggetta a limitazioni. Deve essere richiamato quando l'utente avvia un flusso di accesso ad esempio premendo il pulsante "Accedi con l'IdP" .

Non appena il pulsante viene premuto, FedCM controlla se l'utente ha eseguito l'accesso al tramite un recupero degli account endpoint o uno stato di accesso memorizzato del browser. Se non ha ancora effettuato l'accesso, FedCM gli chiede di accedere all'IdP utilizzando login_url fornito dall'IdP mediante una finestra popup. Se il browser sa che l'utente abbia già effettuato l'accesso all'IdP o non appena l'utente accede all'IdP con finestra popup, FedCM apre una finestra di dialogo modale che consente all'utente di scegliere un IdP con cui effettuare l'accesso. Selezionando un account, l'utente può procedere alla firma alla parte soggetta a limitazioni utilizzando l'account IdP.

Nell'interfaccia utente in modalità pulsante, la finestra di dialogo di accesso visualizzata è più grande rispetto alla widget e dovrebbe essere l'icona di branding per mantenere la coerenza visiva. Mentre le dimensioni minime delle icone per la modalità widget sono 25 x 25 px, le dimensioni minime l'icona in modalità pulsante è 40 x 40 px. Il nome ben noto dell'IdP file consente specificando 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à a pulsante, viene visualizzata una finestra di dialogo modale in alto al centro su Chrome da computer. — Con la modalità a pulsante, viene visualizzata una finestra di dialogo modale in alto al centro su Chrome da computer, con un'icona più grande.

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

Un utente sta accedendo alla parte soggetta a limitazioni utilizzando l'API Button Mode.

Per utilizzare l'API Button Mode:

Attiva la funzionalità sperimentale FedCmButtonMode in chrome://flags.
Assicurati di richiamare l'API dietro l'attivazione utente temporanea come un clic su un pulsante.
Richiama l'API con il parametro mode in questo 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'asserzione ID endpoint 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 caratteristiche

Per determinare se il browser è idoneo all'utilizzo della modalità dei pulsanti, puoi esamina 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 di account

La parte soggetta a limitazioni può consentire agli utenti di "utilizzare altri account" nel Selettore account, ad esempio quando gli IdP supportano più account o sostituiscono l'account esistente.

Per abilitare 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 Button Mode.
L'IdP specifica quanto segue nella configurazione dell'IdP file:

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

Partecipare alla prova dell'origine

Puoi provare l'API Button Mode in locale attivando una segnala chrome://flags#fedcm-button-mode su Chrome 125 o versioni successive.

Gli IdP possono anche abilitare la modalità pulsante registrando una prova dell'origine:

Registrare una prova dell'origine di terze parti per la parte soggetta a limitazioni.

Origin trials consente di provare nuove funzionalità e dare feedback usabilità, praticità ed efficacia per la community degli standard web. Per ulteriori informazioni, consulta la Guida alle prove dell'origine per il Web Sviluppatori.

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

Vai alla registrazione alla prova dell'origine .
Fai clic sul pulsante Registrati e compila il modulo per richiedere un token.
Inserisci l'origine dell'IdP come Origine web.
Controlla la corrispondenza di terze parti per inserire il token con JavaScript su altro diverse origini dati.
Fai clic su Invia.
Incorpora il token emesso in un sito web di terze parti.

Per incorporare il token su un sito web di terze parti, aggiungi il codice seguente all'IdP una libreria JavaScript o un SDK gestito 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.

In Chrome 125 saranno richiesti CORS e `SameSite=None`

CORS

Chrome applicherà CORS su ID asserzione endpoint a partire da Chrome 125.

CORS (condivisione di risorse tra origini) è un sistema, che consiste nella trasmissione Intestazioni HTTP, che determinano se i browser bloccano il codice JavaScript frontend del frontend di accedere alle risposte per le richieste multiorigine. Endpoint di asserzione ID su il server IdP deve rispondere alla richiesta con intestazioni aggiuntive. La di seguito è riportato un esempio di intestazione di risposta a una richiesta https://fedcm-rp-demo.glitch.me:

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

SameSite=None

SameSite di Cookie dichiara se il cookie è limitato a un contesto proprietario o dello stesso sito. specificandolo su None, il cookie può essere inviato a un dominio di terze parti.

In FedCM, Chrome invia i cookie agli account endpoint, l'asserzione ID endpoint e la disconnessione endpoint. A partire da Chrome 125, Chrome invierà le richieste con credenziali solo con cookie contrassegnato esplicitamente come SameSite=None.