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.
API Login Hint
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.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/a-fedcm-dialog-showing-mu-e3714b87b4d94.png?authuser=7&hl=it)
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.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/sign-with-google-button-d34d0cc6c6301.png?authuser=7&hl=it)
![Pulsante Accedi con Google personalizzato.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/personalized-sign-with-g-45331497ab21b.png?authuser=7&hl=it)
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](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-s-fe1a06336087f.png?authuser=7&hl=it)
![Finestra di dialogo FedCM visualizzata con](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-s-06a2fc27f97ad.png?authuser=7&hl=it)
![Finestra di dialogo FedCM visualizzata con](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-c-5d3bb7d44dd6a.png?authuser=7&hl=it)
![Finestra di dialogo FedCM visualizzata con](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/fedcm-dialog-rendered-u-efb6bbffb812.png?authuser=7&hl=it)
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",
}],
}
});
Prova dell'origine dell'API Sign-In Status dell'IdP
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.
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.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/a-fedcm-dialog-suggesting-b9179c79f722d.png?authuser=7&hl=it)
Se fai clic sul pulsante Continua, il browser apre una finestra popup che indirizza l'utente alla pagina di accesso dell'IdP.
![Viene visualizzata una finestra popup dopo aver fatto clic sul pulsante di accesso all'IdP.](https://developers-dot-devsite-v2-prod.appspot.com/static/privacy-sandbox/assets/images/blog/a-popup-window-shown-cli-0520929770807.png?authuser=7&hl=it)
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'APIIdentityProvider.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();
}
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 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 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