O Chrome 116 inclui recursos do FedCM, como as APIs Login Hint, User Info e RP Context, e inicia um teste de origem para a API IdP Sign-In Status.
No Chrome 116, o Chrome oferece os três novos recursos do Gerenciamento de credenciais federadas (FedCM, na sigla em inglês) a seguir:
- API Login Hint: especifique uma conta de usuário preferencial para fazer login.
- API User Info: busque as informações do usuário recorrente para que o provedor de identidade (IdP) possa renderizar um botão de login personalizado em um iframe.
- API RP Context: use um título diferente de "Fazer login" na caixa de diálogo da FedCM.
Além disso, o Chrome está iniciando um teste de origem para a API IdP Sign-In Status. A API IdP Sign-in Status é um requisito e será uma alteração interruptiva quando for enviada. Se você já tiver uma implementação do FedCM, participe do teste de origem.
API Login Hint
Quando o FedCM é invocado, o navegador mostra a conta conectada do provedor de identidade (IdP) especificado. Quando o IdP oferece suporte a várias contas, ele lista todas as contas conectadas.
Depois que o usuário faz login, às vezes a parte confiável (RP) pede que ele faça a autenticação novamente. Mas o usuário pode não ter certeza de qual conta está usando. Se o RP puder especificar com qual conta fazer login, seria mais fácil para o usuário escolher uma conta. A dica de login está sendo enviada no Chrome 116 e, com ela, a RP pode restringir a lista a uma.
Essa extensão adiciona uma matriz de login_hints na resposta do endpoint
de lista de contas do IdP com todos os tipos de filtro possíveis compatíveis com o IdP. Por exemplo, a
resposta das contas pode ter esta aparência quando um IdP é compatível com a filtragem por e-mail
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"],
...
}, ...]
}
Ao transmitir login_hints na lista de contas, a parte restrita pode invocar navigator.credentials.get() com a propriedade loginHint, conforme mostrado no exemplo de código a seguir para mostrar seletivamente a conta especificada:
return await navigator.credentials.get({
identity: {
providers: [{
configURL: "https://idp.example/manifest.json",
clientId: "123",
nonce: nonce,
loginHint : "demo1@example.com"
}]
}
});
API User Info
Botões de login decorados com o logotipo do IdP que permitem que os usuários façam login com a federação de identidade agora são comuns. No entanto, decorar o botão usando o ícone de perfil do usuário e as informações dele é ainda mais intuitivo para fazer login, especialmente quando um usuário já se inscreveu neste site com o IdP antes.
O desafio é que, como o botão personalizado depende dos cookies de terceiros no domínio do IdP em um iframe para identificar o usuário conectado para renderizar o botão, ele não estará disponível depois que os cookies de terceiros forem descontinuados.
A API User Info, enviada no Chrome 116, oferece uma maneira para o IdP receber as informações do usuário recorrente do servidor sem depender dos cookies de terceiros.
Espera-se que a API seja chamada pelo IdP em um iframe incorporado no site da RP para que possa recuperar as informações do usuário e renderizar um botão personalizado como se fizesse parte da superfície da RP. Com a chamada de API, o navegador faz uma solicitação ao endpoint da lista de contas e retorna uma matriz de informações do usuário se:
- O usuário fez login no RP com o IdP via FedCM na mesma instância do navegador, e os dados não foram apagados.
- O usuário fez login no IdP na mesma instância do navegador.
// 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.
}
Para permitir a chamada de IdentityProvider.getUserInfo() de dentro de um
iframe que tenha a mesma origem que o IdP, o HTML de incorporação precisa permitir explicitamente
o uso com a política de permissões
identity-credentials-get.
<iframe src="https://fedcm-idp-demo.glitch.me" allow="identity-credentials-get"></iframe>
Confira como ele funciona em https://fedcm-rp-demo.glitch.me/button.
API RP Context
A API RP Context, disponibilizada no Chrome 116, permite que um RP modifique a string na interface da caixa de diálogo da FedCM para que ela possa acomodar contextos de autenticação predefinidos. Confira as seguintes capturas de tela para diferentes opções:
O uso é simples. Forneça uma propriedade de identity.context entre "signin" (padrão), "signup", "use" ou "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",
}],
}
});
Teste de origem da API IdP Sign-In Status
No Chrome 116, o Chrome inicia um teste de origem da API Sign-In Status do IdP no computador, seguido pelo Chrome para Android. Os testes de origem oferecem acesso a um recurso novo ou experimental para criar funcionalidades que os usuários podem testar por um tempo limitado antes que o recurso seja disponibilizado para todos.
A API IdP Sign-In Status é um mecanismo em que um IdP informa o navegador sobre o status de login do usuário no IdP. Com essa API, o navegador pode reduzir solicitações desnecessárias para o IdP e possíveis ataques de tempo.
Informar o navegador sobre o status de login do usuário
Os IdPs podem sinalizar o status de login do usuário para o navegador enviando um cabeçalho HTTP ou chamando uma API JavaScript, quando o usuário estiver conectado ao IdP ou quando o usuário estiver desconectado de todas as contas do IdP. O navegador registra o status como um destes: "fazer login", "sair" ou "desconhecido" (padrão).
Para sinalizar que o usuário está conectado, envie um cabeçalho HTTP IdP-SignIn-Status: action=signin
em uma navegação de nível superior ou uma solicitação de sub-recurso de mesma origem:
IdP-SignIn-Status: action=signin
Como alternativa, chame a API JavaScript IdentityProvider.login() na origem do
IdP:
IdentityProvider.login()
Isso registrará o status de login do usuário como "login". Quando o status de login do usuário é definido como "login", a PR que chama FedCM faz solicitações ao endpoint da lista de contas do IdP e exibe as contas disponíveis para o usuário na caixa de diálogo da FedCM.
Para sinalizar que o usuário está desconectado de todas as contas, envie o
cabeçalho HTTP IdP-SignIn-Status: action=signout-all em uma navegação de nível superior ou
uma solicitação de sub-recurso de mesma origem:
IdP-SignIn-Status: action=signout-all
Como alternativa, chame a API JavaScript IdentityProvider.logout() na origem do
IdP:
IdentityProvider.logout()
Elas registrarão o status de login do usuário como "sair". Quando o status de login do usuário é "out-out", a chamada ao FedCM falha silenciosamente sem fazer uma solicitação ao endpoint da lista de contas do IdP.
Por padrão, o status de login do IdP é definido como "desconhecido". Esse status é usado antes que o IdP envie um indicador usando a API IdP Sign-In Status. Introduzimos esse status para melhor transição porque um usuário pode já ter feito login no IdP quando enviamos essa API, e o IdP pode não ter a chance de sinalizar isso ao navegador no momento em que a FedCM é invocada pela primeira vez. Nesse caso, fazemos uma solicitação para o endpoint da lista de contas do IdP e atualizamos o status com base na resposta desse endpoint:
- Se o endpoint retornar uma lista de contas ativas, atualize o status para "login" e abra a caixa de diálogo "FedCM" para mostrar essas contas.
- Se o endpoint não retornar contas, atualize o status para "sair" e falhe na chamada da FedCM.
E se a sessão do usuário expirar? Permitir que o usuário faça login por meio de um fluxo dinâmico de login
Mesmo que o IdP continue informando o navegador sobre o status de login do usuário, ele pode estar fora de sincronia, como quando a sessão expira. O navegador tenta enviar uma solicitação credenciada para o endpoint da lista de contas quando o status de login é "login", mas o servidor a rejeita porque a sessão não está mais disponível. Nesse cenário, o navegador pode permitir dinamicamente que o usuário faça login no IdP por uma janela pop-up.
A caixa de diálogo "FedCM" vai mostrar uma mensagem, como na imagem abaixo:
Ao clicar no botão Continuar, o navegador abre uma janela pop-up que envia o usuário para a página de login do IdP.
O URL da página de login, que precisa ser a origem do IdP, pode ser especificado com signin_url
como parte do arquivo de
configuração do IdP.
{
"accounts_endpoint": "/auth/accounts",
"client_metadata_endpoint": "/auth/metadata",
"id_assertion_endpoint": "/auth/idtokens",
"signin_url": "/signin"
}
}
A janela pop-up é uma janela normal do navegador que usa cookies primários. O que acontece na janela de conteúdo depende do IdP, mas nenhum identificador de janela está disponível para fazer uma solicitação de comunicação de origem cruzada para a página da RP. Depois que o usuário faz login, o IdP precisa:
- Envie o cabeçalho
IdP-SignIn-Status: action=signinou chame a APIIdentityProvider.login()para informar ao navegador que o usuário fez login. - Chame
IdentityProvider.close()para fechar a janela pop-up.
// User is signed in...
// Don't forget feature detection.
if (IdentityProvider) {
// Signal to the browser that the user has signed in.
IdentityProvider.close();
}
Teste o comportamento da API IdP Sign-In Status em nossa demonstração. A sessão expira três minutos depois que você faz login no IdP de demonstração. Em seguida, é possível observar o login no IdP pelo comportamento da janela pop-up.
Participar do teste de origem
Para testar a API IdP Sign-In Status localmente, ative uma sinalização
do Chrome
chrome://flags#fedcm-idp-signin-status-api no
Chrome 116 ou versão mais recente.
Também é possível ativar a API IdP Sign-In Status registrando um teste de origem duas vezes:
- Registre um teste de origem para o IdP.
- Registre um teste de origem de terceiros para a RP.
Os testes de origem permitem que você teste novos recursos e dê feedback sobre usabilidade, praticidade e eficácia para a comunidade de padrões da Web. Para mais informações, confira o Guia de testes de origem para desenvolvedores da Web.
O teste de origem da API IdP Sign-In Status está disponível do Chrome 116 ao 119.
Registrar um teste de origem para o IdP
- Acesse a página de registro do teste de origem.
- Clique no botão Register e preencha o formulário para solicitar um token.
- Digite a origem do IdP como Web Origin.
- Clique em Enviar.
- Adicione uma tag
origin-trial<meta>ao cabeçalho das páginas que usamIdentityProvider.close(). Por exemplo:
<meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">.
Registrar um teste de origem de terceiros para a parte restrita
- Acesse a página de registro do teste de origem.
- Clique no botão Register e preencha o formulário para solicitar um token.
- Digite a origem do IdP como Web Origin.
- Marque a opção Correspondência de terceiros para injetar o token com JavaScript em outras origens.
- Clique em Enviar.
- Incorporar o token emitido em um site de terceiros.
Para incorporar o token a um site de terceiros, adicione o código a seguir à biblioteca JavaScript ou ao SDK disponibilizado na origem do IdP.
const tokenElement = document.createElement('meta');
tokenElement.httpEquiv = 'origin-trial';
tokenElement.content = 'TOKEN_GOES_HERE';
document.head.appendChild(tokenElement);
Substitua TOKEN_GOES_HERE pelo seu próprio token.
Interaja e compartilhe feedback
Se você tiver feedback ou encontrar algum problema durante o teste, compartilhe-o em crbug.com.
Foto de Dan Cristian P Badureē no Unsplash (links em inglês).