Questa pagina è stata tradotta dall'API Cloud Translation.

Aggiornamenti di FedCM: API IdP Sign-In Status, suggerimento per l'accesso e altro ancora

Chrome 116 fornisce funzionalità FedCM come API Login Hint, API User Info e API RP Context e avvia una prova dell'origine per l'API IdP Sign-In Status.

In Chrome 116, Chrome fornisce le seguenti tre nuove funzionalità di Gestione delle credenziali federate (FedCM):

API Login Hint: specifica un account utente preferito a cui accedere.
API User Info: recupera le informazioni dell'utente di ritorno in modo che il provider di identità (IdP) possa visualizzare un pulsante di accesso personalizzato all'interno di un iframe.
API RP Context: utilizza un titolo diverso da "Accedi" nella finestra di dialogo FedCM.

Inoltre, Chrome sta avviando una prova dell'origine per l'API Sign-In Status. L'API IdP Sign-in Status è un requisito e subirà una modifica irreversibile quando verrà spedita. Se hai già un'implementazione FedCM, assicurati di partecipare alla prova dell'origine.

Quando viene richiamato FedCM, il browser mostra l'account a cui è stato eseguito l'accesso dal provider di identità (IdP) specificato. Se l'IdP supporta più account, elenca tutti gli account a cui è stato eseguito l'accesso.

Una finestra di dialogo FedCM che mostra più account utente. — Una finestra di dialogo FedCM che mostra più account utente

Dopo che l'utente ha eseguito l'accesso, a volte la parte attendibile chiede all'utente di eseguire nuovamente l'autenticazione. ma l'utente potrebbe non essere sicuro di quale account sta utilizzando. Se la parte soggetta a limitazioni può specificare con quale account eseguire l'accesso, sarebbe più facile per l'utente scegliere un account. Il suggerimento di accesso viene inviato in Chrome 116 e, in questo caso, la parte soggetta a limitazioni può restringere l'elenco a uno.

Questa estensione aggiunge un array di login_hints nella risposta dell'endpoint dell'elenco di account dall'IdP, con tutti i possibili tipi di filtro supportati dall'IdP. Ad esempio, la risposta dell'account potrebbe avere il seguente aspetto quando un IdP supporta il filtro per email e ID:

{
  "accounts": [{
    "id": "demo1",
    "email": "demo1@example.com",
    "name": "John Doe",
    "login_hints": ["demo1", "demo1@example.com"],
    ...
  }, {
    "id": "demo2",
    "email": "demo2@example.com",
    "name": "Jane Doe",
    "login_hints": ["demo2", "demo2@example.com"],
    ...
  }, ...]
}

Passando login_hints nell'elenco degli account, la parte soggetta a limitazioni può richiamare navigator.credentials.get() con la proprietà loginHint, come mostrato nel seguente esempio di codice per mostrare selettivamente l'account specificato:

return await navigator.credentials.get({
  identity: {
    providers: [{
      configURL: "https://idp.example/manifest.json",
      clientId: "123",
      nonce: nonce,
      loginHint : "demo1@example.com"
    }]
  }
});

API User Info

I pulsanti di accesso decorati con il logo dell'IdP che consentono agli utenti di accedere con la federazione delle identità sono ora comuni. Tuttavia, la decorazione del pulsante mediante l'icona del profilo dell'utente e le relative informazioni risulta ancora più intuitiva con l'accesso, soprattutto se l'utente si è già registrato su questo sito web con l'IdP.

Pulsante Accedi con Google. — Pulsante Accedi con Google

Pulsante Accedi con Google personalizzato. — Pulsante Accedi con Google personalizzato

Il problema è che, poiché il pulsante personalizzato dipende dai cookie di terze parti sul dominio IdP all'interno di un iframe per identificare l'utente che ha eseguito l'accesso e visualizzare il pulsante, non sarà disponibile una volta deprecati i cookie di terze parti.

L'API User Info, disponibile in Chrome 116, consente all'IdP di ottenere le informazioni dell'utente di ritorno dal server senza dipendere dai cookie di terze parti.

L'API dovrebbe essere chiamata dall'IdP dall'interno di un iframe incorporato nel sito web RP, in modo da poter recuperare le informazioni dell'utente e visualizzare un pulsante personalizzato come se fa parte della piattaforma RP. Con la chiamata API, il browser effettua una richiesta all'endpoint dell'elenco di account, quindi restituisce un array di informazioni sull'utente se:

In passato l'utente ha eseguito l'accesso alla RP con l'IdP tramite FedCM sulla stessa istanza del browser e i dati non sono stati cancellati.
L'utente abbia eseguito l'accesso all'IdP sulla stessa istanza del browser.

// Iframe displaying a page from the https://idp.example origin
const user_info = await IdentityProvider.getUserInfo({
    configUrl: "https://idp.example/fedcm.json",
    clientId: "client1234"
});

// IdentityProvider.getUserInfo returns an array of user information.
if (user_info.length > 0) {
  // Chrome puts returning accounts first, so the first account received is guaranteed to be a returning account.
  const name = user_info[0].name;
  const given_name = user_info[0].given_name;
  const display_name = given_name ? given_name : name;
  const picture = user_info[0].picture;
  const email = user_info[0].email;
  // Renders the personalized sign-in button with the information above.
}

Tieni presente che per consentire le chiamate a IdentityProvider.getUserInfo() da un iframe che ha la stessa origine dell'IdP, l'HTML di incorporamento deve autorizzarlo esplicitamente con i criteri di autorizzazione di identity-credentials-get.

<iframe src="https://fedcm-idp-demo.glitch.me" allow="identity-credentials-get"></iframe>

Puoi vederla in azione all'indirizzo https://fedcm-rp-demo.glitch.me/button.

API RP Context

L'API RP Context, disponibile in Chrome 116, consente a una RP di modificare la stringa nell'interfaccia utente della finestra di dialogo FedCM affinché possa adattarsi ai contesti di autenticazione predefiniti. Guarda gli screenshot seguenti per conoscere le diverse opzioni:

Finestra di dialogo FedCM visualizzata con "Accedi a ****". Questa è l'opzione predefinita se il contesto RP non è specificato.

L'utilizzo è semplice; specifica una proprietà identity.context tra "signin" (valore predefinito), "signup", "use" o "continue".

const credential = await navigator.credentials.get({
  identity: {
    // "signin" is the default, "signup", "use" and "continue" 
    // can also be used
    context: "signup", 
    providers: [{
      configURL: "https://idp.example/fedcm.json",
      clientId: "1234",
    }],
  }
});

Chrome avvia una prova dell'origine dell'API Sign-In Status dell'IdP su computer da Chrome 116, seguita da Chrome per Android in un secondo momento. Le prove dell'origine ti consentono di accedere a una funzionalità nuova o sperimentale per creare funzionalità che gli utenti possono provare per un periodo di tempo limitato prima che venga resa disponibile per tutti.

L'API IdP Sign-In Status è un meccanismo in cui un IdP informa il browser dello stato di accesso dell'utente sull'IdP. Con questa API, il browser può ridurre le richieste non necessarie all'IdP e mitigare i potenziali attacchi di tempistica.

Nota: FedCM introduce una richiesta con credenziali all'endpoint dell'elenco di account. Questa richiesta non invia dati che identificano il richiedente e non consente di passare i dati forniti dalla parte soggetta a limitazioni; tuttavia, il browser esegue separatamente una richiesta senza credenziali contenente le informazioni della parte soggetta a limitazioni a client_metadata_endpoint, quindi il server IdP può correlare la richiesta senza credenziali con la richiesta con credenziali (stocasticamente) utilizzando tempi o altri dati di fingerprint. Per ulteriori dettagli, consulta queste diapositive.

Comunica al browser lo stato di accesso dell'utente

Gli IdP possono segnalare lo stato di accesso dell'utente al browser inviando un'intestazione HTTP o chiamando un'API JavaScript, quando l'utente ha eseguito l'accesso sull'IdP o quando l'utente è disconnesso da tutti i suoi account IdP. Il browser registra lo stato in uno dei seguenti modi: "sign-in", "sign-out" o "sconosciuto" (impostazione predefinita).

Per segnalare che l'utente ha eseguito l'accesso, invia un'intestazione HTTP IdP-SignIn-Status: action=signin in una navigazione di primo livello o in una richiesta di sottorisorse della stessa origine:

IdP-SignIn-Status: action=signin

In alternativa, chiama l'API JavaScript IdentityProvider.login() dall'origine dell'IdP:

IdentityProvider.login()

Lo stato di accesso dell'utente verrà registrato come "accesso". Quando lo stato di accesso dell'utente è impostato su "accesso", il FedCM che effettua le chiamate PR invia richieste all'endpoint dell'elenco degli account dell'IdP e mostra gli account disponibili all'utente nella finestra di dialogo FedCM.

Per segnalare che l'utente è disconnesso da tutti gli account, invia l'intestazione HTTP IdP-SignIn-Status: action=signout-all in una navigazione di primo livello o in una richiesta di sottorisorse della stessa origine:

IdP-SignIn-Status: action=signout-all

In alternativa, chiama l'API JavaScript IdentityProvider.logout() dall'origine dell'IdP:

IdentityProvider.logout()

Lo stato di accesso dell'utente verrà registrato come "uscita". Quando lo stato di accesso dell'utente è "sign-out", la chiamata al FedCM ha esito negativo senza fare una richiesta all'endpoint dell'elenco degli account dell'IdP.

Per impostazione predefinita, lo stato di accesso all'IdP è impostato su "sconosciuto". Questo stato viene utilizzato prima che l'IdP invii un indicatore utilizzando l'API IdP Sign-In Status. Introduciamo questo stato per una migliore transizione perché un utente potrebbe aver già eseguito l'accesso all'IdP al momento della spedizione di questa API e l'IdP potrebbe non avere la possibilità di segnalarlo al browser prima della chiamata a FedCM per la prima volta. In questo caso, effettuiamo una richiesta all'endpoint dell'elenco degli account dell'IdP e aggiorniamo lo stato in base alla risposta dall'endpoint dell'elenco di account:

Se l'endpoint restituisce un elenco di account attivi, aggiorna lo stato in "Accesso" e apri la finestra di dialogo FedCM per visualizzare questi account.
Se l'endpoint non restituisce alcun account, aggiorna lo stato impostandolo su "sign-out" e non supera la chiamata FedCM.

Che cosa succede se la sessione utente scade? Consentire all'utente di accedere tramite un flusso di accesso dinamico

Anche se l'IdP continua a informare il browser sullo stato di accesso dell'utente, potrebbe non essere sincronizzato, ad esempio alla scadenza della sessione. Il browser prova a inviare una richiesta con credenziali all'endpoint dell'elenco di account quando lo stato di accesso è "accesso", ma il server la rifiuta perché la sessione non è più disponibile. In questo scenario, il browser può consentire dinamicamente all'utente di accedere all'IdP tramite una finestra popup.

Nella finestra di dialogo FedCM viene visualizzato un messaggio, come nell'immagine seguente:

Una finestra di dialogo FedCM che suggerisce di accedere all'IdP.

Se fai clic sul pulsante Continua, il browser apre una finestra popup che indirizza l'utente alla pagina di accesso dell'IdP.

L'URL della pagina di accesso (che deve essere l'origine dell'IdP) può essere specificato con signin_url nel file di configurazione dell'IdP.

{
  "accounts_endpoint": "/auth/accounts",
  "client_metadata_endpoint": "/auth/metadata",
  "id_assertion_endpoint": "/auth/idtokens",
  "signin_url": "/signin"
  }
}

La finestra popup è una normale finestra del browser che utilizza i cookie proprietari. Qualunque cosa avvenga all'interno della finestra dei contenuti spetta all'IdP, ma non sono disponibili handle di finestra per effettuare una richiesta di comunicazione multiorigine alla pagina della parte soggetta a limitazioni. Dopo che l'utente ha eseguito l'accesso, l'IdP deve:

Invia l'intestazione IdP-SignIn-Status: action=signin o chiama l'API IdentityProvider.login() per informare il browser che l'utente ha eseguito l'accesso.
Richiama IdentityProvider.close() per chiudersi (la finestra popup).

// User is signed in...
// Don't forget feature detection.
if (IdentityProvider) {
  // Signal to the browser that the user has signed in.
  IdentityProvider.close();
}

Un utente accede a una RP dopo aver eseguito l'accesso all'IdP mediante FedCM

Nota:questa esperienza di accesso dinamico è destinata quando una sessione IdP è scaduta senza una disconnessione esplicita, causando la contraddizione dello stato di accesso del browser con lo stato effettivo. Questo non verrà attivato per gli utenti che non hanno ancora eseguito l'accesso all'IdP. Questo nuovo flusso è progettato per coprire i casi in cui lo stato di accesso all'IdP sul browser è "accesso", ma l'endpoint dell'elenco di account dell'IdP non restituisce alcun account.

Supponendo che l'API IdP Sign-In Status venga chiamata tempestivamente, quando viene richiamato FedCM, può verificarsi uno dei seguenti scenari:

Se il browser non conosce lo stato di accesso dell'utente ("sconosciuto"), lo stato viene aggiornato ("accesso" o "uscita") a seconda della risposta dell'IdP dall'endpoint dell'elenco degli account. Non verrà attivato un flusso di accesso dinamico.
Se un utente ha eseguito l'accesso all'IdP sul browser ("accesso") e poi è stato esplicitamente disconnesso dall'IdP ("disconnesso"), il flusso di accesso dinamico non verrà attivato.
Se un utente ha eseguito l'accesso all'IdP sul browser ("accesso"), ma la sessione scade senza un disconnessione esplicita, verrà attivato il flusso di accesso dinamico.

L'API IdP Sign-In Status non consente alla RP di visualizzare una finestra di dialogo "Accedi all'IdP" per gli utenti che non hanno eseguito l'accesso all'IdP. Questa è una funzionalità separata che potrebbe essere aggiunta in futuro.

Puoi provare il comportamento dell'API IdP Sign-In Status nella nostra demo. La sessione scade tre minuti dopo che hai eseguito l'accesso all'IdP demo. Quindi puoi osservare l'accesso all'IdP tramite il comportamento della finestra popup.

Partecipare alla prova dell'origine

Puoi provare l'API IdP Sign-In Status localmente attivando un flag
di Chrome chrome://flags#fedcm-idp-signin-status-api su
Chrome 116 o versioni successive.

Puoi anche abilitare l'API IdP Sign-In Status registrando una prova dell'origine due volte:

Registra una prova dell'origine per l'IdP.
Registra una prova dell'origine di terze parti per la parte soggetta a limitazioni.

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

La prova dell'origine dell'API Sign-In Status dell'IdP è disponibile da Chrome 116 a Chrome 119.

Registra una prova dell'origine per l'IdP

Vai alla pagina di registrazione della prova dell'origine.
Fai clic sul pulsante Registrati e compila il modulo per richiedere un token.
Inserisci l'origine dell'IdP come Origine web.
Fai clic su Invia.
Aggiungi un tag <meta> origin-trial in cima alle pagine che utilizzano IdentityProvider.close(). Ad esempio, potrebbe avere il seguente aspetto:
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.

Avviso: l'invio di un'intestazione HTTP Origin-Trial non funzionerà per questa API.

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

Vai alla pagina di registrazione della prova dell'origine.
Fai clic sul pulsante Registrati e compila il modulo per richiedere un token.
Inserisci l'origine dell'IdP come Origine web.
Seleziona Corrispondenza di terze parti per inserire il token con JavaScript su altre origini.
Fai clic su Invia.
Incorpora il token emesso su un sito web di terze parti.

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

Interagisci e condividi feedback

Se hai feedback o problemi durante il test, puoi condividerli all'indirizzo crbug.com.

Foto di Dan Cristian Pădureț su Unsplash