Chrome 116 include funzionalità FedCM come l'API Login Hint, l'API User Info e l'API RP Context e avvia una prova dell'origine per l'API IdP Sign-In Status.
In Chrome 116, Chrome include le seguenti tre nuove funzionalità di Gestione delle credenziali federate (FedCM):
- API Login Hint: specifica un account utente preferito per 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 dialog FedCM.
Inoltre, Chrome sta avviando un prova dell'origine per l'API Stato accesso IdP. L'API IdP Sign-in Status è un requisito e costituirà un'interruzione quando verrà rilasciata. Se hai già implementato FedCM, assicurati di partecipare alla prova dell'origine.
API Login Hint
Quando viene invocato FedCM, il browser mostra l'account con cui è stato eseguito l'accesso dal provider di identità (IdP) specificato. Quando l'IDP supporta più account, elenca tutti gli account con accesso.
Dopo che l'utente ha eseguito l'accesso, a volte la terza parte attendibile (RP) gli chiede di eseguire nuovamente l'autenticazione. Tuttavia, l'utente potrebbe non essere sicuro di quale account abbia utilizzato. Se l'RP può specificare con quale account accedere, sarà più facile per l'utente scegliere un account. Il suggerimento di accesso è disponibile in Chrome 116 e consente all'RP di restringere l'elenco a un solo elemento.
Questa estensione aggiunge un array di login_hints nell'endpoint elenco account della risposta dell'IDP, con tutti i possibili tipi di filtro supportati dall'IDP. Ad esempio, la risposta degli account potrebbe avere il seguente aspetto quando un provider di identità 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, l'RP può invocare navigator.credentials.get() con la proprietà loginHint come mostrato nell'esempio di codice seguente per mostrare in modo selettivo 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 ormai comuni. Tuttavia, decorare il pulsante utilizzando l'icona del profilo dell'utente e le sue informazioni è ancora più intuitivo per accedere, soprattutto se un utente ha già eseguito la registrazione su questo sito web con l'IdP.
Il problema è che, poiché il pulsante personalizzato dipende dai cookie di terze parti nel dominio dell'IDP all'interno di un iframe per identificare l'utente che ha eseguito l'accesso al fine di visualizzare il pulsante, non sarà disponibile una volta ritiratI 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 da un iframe incorporato nel sito web del RP in modo da poter recuperare le informazioni dell'utente e visualizzare un pulsante personalizzato come se fosse parte della piattaforma RP. Con la chiamata all'API, il browser invia una richiesta all'endpoint elenco account, quindi restituisce un array di informazioni utente se:
- L'utente ha eseguito l'accesso all'RP con l'IdP tramite FedCM in passato sulla stessa istanza del browser e i dati non sono stati cancellati.
- L'utente ha eseguito l'accesso all'IdP nella 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 la chiamata di IdentityProvider.getUserInfo() da un iframe con la stessa origine dell'IDP, il codice HTML di incorporamento deve consentirlo esplicitamente con le norme relative alle autorizzazioni di identity-credentials-get.
<iframe src="https://fedcm-idp-demo.glitch.me" allow="identity-credentials-get"></iframe>
Puoi vederlo in azione all'indirizzo https://fedcm-rp-demo.glitch.me/button.
API RP Context
L'API RP Context, disponibile in Chrome 116, consente a un RP di modificare la stringa nella UI della finestra di dialogo FedCM in modo da poter supportare contesti di autenticazione predefiniti. Guarda gli screenshot seguenti per vedere le diverse opzioni:
L'utilizzo è semplice: specifica identity.context come valore della proprietà "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",
}],
}
});
Prova dell'origine dell'API Stato accesso IdP
Chrome avvia una prova dell'origine dell'API Stato accesso IdP su computer a partire da Chrome 116, seguita da Chrome per Android in un secondo momento. Le prove Origin 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 la funzionalità venga resa disponibile per tutti.
L'API Stato accesso IdP è 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 temporizzazione.
Comunicare al browser lo stato di accesso dell'utente
Gli IdP possono segnalare lo stato di accesso dell'utente al browser inviando un header HTTP o chiamando un'API JavaScript, quando l'utente ha eseguito l'accesso all'IdP o quando ha eseguito la disconnessione da tutti i suoi account IdP. Il browser registra lo stato come uno dei seguenti: "accesso", "uscita" o "sconosciuto" (valore predefinito).
Per indicare che l'utente ha eseguito l'accesso, invia un'IdP-SignIn-Status: action=signin
intestazione HTTP in una navigazione di primo livello o in una richiesta di risorsa secondaria dello stesso ambito:
IdP-SignIn-Status: action=signin
In alternativa, chiama l'API JavaScript IdentityProvider.login() dall'origine dell'IDP:
IdentityProvider.login()
Questi registreranno lo stato di accesso dell'utente come "accesso". Quando lo stato di accesso dell'utente è impostato su "accesso", la RP che chiama FedCM invia richieste all'endpoint dell'elenco di account dell'IDP e mostra all'utente gli account disponibili nella finestra di dialogo FedCM.
Per indicare che l'utente ha eseguito la disconnessione da tutti i suoi account, invia l'intestazione HTTP IdP-SignIn-Status: action=signout-all in una navigazione di primo livello o in una richiesta di risorsa secondaria dello stesso ambito:
IdP-SignIn-Status: action=signout-all
In alternativa, chiama l'API JavaScript IdentityProvider.logout() dall'origine dell'IDP:
IdentityProvider.logout()
Questi registreranno lo stato di accesso dell'utente come "accesso non eseguito". Quando lo stato di accesso dell'utente è "Ultima uscita", la chiamata a FedCM non va a buon fine e non viene effettuata alcuna richiesta all'endpoint dell'elenco di account dell'IDP.
Per impostazione predefinita, lo stato di accesso dell'IDP è impostato su "sconosciuto". Questo stato viene utilizzato prima che l'IdP invii un indicatore utilizzando l'API IdP Sign-In Status. Abbiamo introdotto questo stato per una transizione migliore perché un utente potrebbe aver già eseguito l'accesso all'IdP quando viene rilasciata questa API e l'IdP potrebbe non avere la possibilità di segnalarlo al browser al momento della prima chiamata di FedCM. In questo caso, inviamo una richiesta all'endpoint dell'elenco di account dell'IdP e aggiorniamo lo stato in base alla risposta dell'endpoint dell'elenco di account:
- Se l'endpoint restituisce un elenco di account attivi, aggiorna lo stato su "accesso" e apri la finestra di dialogo FedCM per visualizzare gli account.
- Se l'endpoint non restituisce account, aggiorna lo stato su "Uscire" e fai fallire 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 dello stato di accesso dell'utente, potrebbe non essere sincronizzato, ad esempio quando la sessione scade. Il browser tenta di 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 caso, il browser può consentire all'utente di accedere dinamicamente all'IdP tramite una finestra popup.
La finestra di dialogo FedCM mostrerà un messaggio, come mostrato nell'immagine seguente:
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
all'interno del 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 cookie proprietari. Tutto ciò che accade all'interno della finestra dei contenuti dipende dall'IDP, ma non sono disponibili handle della finestra per effettuare una richiesta di comunicazione cross-origin alla pagina RP. Dopo che l'utente ha eseguito l'accesso, l'IdP deve:
- Invia l'intestazione
IdP-SignIn-Status: action=signino chiama l'APIIdentityProvider.login()per informare il browser che l'utente ha eseguito l'accesso. - Chiama
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();
}
Puoi provare il comportamento dell'API IdP Sign-In Status nella nostra demo. La sessione scade dopo tre minuti dall'accesso all'IdP di prova. Poi puoi osservare l'accesso all'IdP tramite il comportamento della finestra popup.
Partecipare alla prova dell'origine
Puoi provare l'API Stato accesso IdP localmente attivando un flag
di Chrome
chrome://flags#fedcm-idp-signin-status-api su
Chrome 116 o versioni successive.
Puoi anche attivare l'API IdP Sign-In Status registrando un trial di origine due volte:
- Registra una prova dell'origine per l'SP.
- Registra una prova di un'origine di terze parti per il 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 Stato accesso IdP è disponibile da Chrome 116 a Chrome 119.
Registra una prova dell'origine per l'IDP
- Vai alla pagina di registrazione per la prova di Origin.
- 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
origin-trial<meta>all'inizio delle pagine che utilizzanoIdentityProvider.close(). Ad esempio, potrebbe avere il seguente aspetto:
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.
Registra una prova dell'origine di terze parti per il RP
- Vai alla pagina di registrazione per la prova di Origin.
- 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 iniettare il token con JavaScript in altre origini.
- Fai clic su Invia.
- 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 biblioteca o all'SDK JavaScript 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.
Coinvolgere e condividere feedback
Se hai un feedback o riscontri problemi durante i test, puoi condividerli su crbug.com.
Foto di Dan Cristian Pădureț su Unsplash