No Chrome 125, a API Button Mode (link em inglês) está iniciando um teste de origem no computador. Com a API Button Mode, os provedores de identidade podem usar a API FedCM mesmo que os usuários não tenham sessões do IdP ativas na chamada de API. Os usuários podem fazer login em um site com a conta federada sem serem direcionados para o site do IdP. A interface da FedCM no modo de botão é mais proeminente em comparação com a do fluxo de widgets existente porque é controlada por um gesto do usuário e reflete melhor a intenção de login por parte do usuário.
API Button Mode
A interface do usuário da FedCM estava disponível como um widget exibido no canto superior direito do computador ou como uma página inferior em dispositivos móveis, assim que a API é invocada, o que pode acontecer quando o usuário chega à parte confiável (RP). Isso é chamado de modo widget. Para exibir o widget, o usuário precisa estar conectado ao IdP antes de acessar a RP. O FedCM, por si só, não tinha uma maneira confiável de permitir que o usuário fizesse login no IdP antes de permitir que ele fizesse login na RP usando a conta disponível no IdP. A FedCM está prestes a adicionar uma forma de fazer isso.
A nova API Button Mode adiciona um novo modo de interface chamado button. Ao contrário do modo de widget, o modo de botão não precisa ser invocado assim que o usuário acessa a RP. Em vez disso, ele precisa ser invocado quando o usuário inicia um fluxo de login, como pressionar um botão "Fazer login com o IdP".
Assim que o botão é pressionado, a FedCM verifica se o usuário está conectado ao
IdP usando uma busca no endpoint
de contas ou
um status de login armazenado no
navegador. Se o
usuário ainda não estiver conectado, a FedCM solicitará que ele faça login no IdP usando o
login_url
fornecido pelo IdP em uma janela pop-up. Se o navegador souber que o usuário
já está conectado ao IdP ou assim que ele fizer login no IdP com
a janela pop-up, o FedCM abrirá uma caixa de diálogo modal para o usuário escolher uma conta do IdP
para fazer login. Ao selecionar uma conta, o usuário pode fazer login
na RP usando a conta do IdP.
Faça um teste usando o Chrome 125 em https://fedcm-rp-demo.glitch.me/button_flow.
Para usar a API Button Mode:
- Ativar o recurso experimental
FedCmButtonMode
nochrome://flags
. - Invoque a API por trás da ativação temporária do usuário, como um clique de botão.
- Invoque a API com o parâmetro
mode
da seguinte maneira:
return await navigator.credentials.get({
identity: {
providers: [{
configURL: "https://idp.example/config.json",
clientId: "123",
nonce:"456",
}],
mode: "button"
}
});
O navegador vai enviar um novo parâmetro para o endpoint de declaração de ID representando o tipo de solicitação ao incluir 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
Usar outra opção de conta
A RP pode permitir que os usuários "usem outras contas" no seletor de conta, por exemplo, quando os IdPs forem compatíveis com várias contas ou substituindo a conta atual.
Para ativar a opção de usar outra conta:
- Ative o recurso experimental
FedCmUseOtherAccount
emchrome://flags
ou registre o teste de origem da API Button Mode. - O IdP especifica o seguinte no arquivo de configuração do IdP:
{
"accounts_endpoint" : ...,
"modes: {
"button": {
"supports_use_other_account": true,
}
}
}
Participar do teste de origem
Você pode testar a API Button Mode localmente ativando uma flag
do Chrome
chrome://flags#fedcm-button-mode
no Chrome 125 ou mais recente.
Os IdPs também podem ativar o modo de botão registrando um teste de origem:
- 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 Button Mode está disponível do Chrome 125 ao 127.
- Acesse a página de registro de testes de origem.
- Clique no botão Register e preencha o formulário para solicitar um token.
- Digite a origem do IdP como Web Origin.
- Verifique a 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 seguinte código à biblioteca JavaScript do IdP 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.
O CORS e SameSite=None
serão necessários no Chrome 125
CORS
O Chrome vai aplicar o CORS no endpoint de declaração de ID a partir do Chrome 125.
O Compartilhamento de recursos entre origens (CORS, na sigla em inglês) é um sistema que consiste na transmissão de cabeçalhos HTTP. Ele determina se os navegadores impedem que o código JavaScript do front-end acesse as respostas para solicitações entre origens. O endpoint de declaração de ID no
servidor do IdP precisa responder à solicitação com outros cabeçalhos. Veja
a seguir um exemplo de cabeçalho de resposta para uma solicitação de
https://fedcm-rp-demo.glitch.me
:
Access-Control-Allow-Origin: https://fedcm-rp-demo.glitch.me
Access-Control-Allow-Credentials: true
SameSite=None
O parâmetro SameSite do cookie declara se o cookie está restrito a um contexto primário ou do mesmo site. Se ele for especificado como None
, o cookie poderá ser enviado para um domínio de terceiros.
Na FedCM, o Chrome envia cookies para o endpoint
de contas,
o endpoint de declaração
de ID e
o endpoint
de desconexão. A partir do
Chrome 125, o Chrome vai enviar essas solicitações credenciadas apenas com cookies explicitamente
marcados como SameSite=None
.