A partir do Chrome 125, a API Button Mode vai iniciar 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 ativas do IdP na chamada da API. Em seguida, os usuários podem fazer login em um site com a conta federada sem precisar navegar até o site do IdP. A interface do FedCM no modo de botão é mais proeminente em comparação com o fluxo de widget atual, porque é controlada por um gesto do usuário e reflete melhor a intenção dele de fazer login.
API Button Mode
A interface do usuário do FedCM está disponível como um widget mostrado 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 acessa o site da parte confiável (RP, na sigla em inglês). Isso é chamado de modo widget. Para mostrar o widget, o usuário precisa fazer login no IdP antes de acessar o RP. A FedCM não tinha uma maneira confiável de permitir que o usuário fizesse login no IdP antes de fazer login na RP usando a conta disponível no IdP. O FedCM está prestes a adicionar uma maneira 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 deve ser invocado assim que o usuário acessa o RP. Em vez disso, ele deve ser invocado quando o usuário inicia um fluxo de login, como pressionar um botão "Fazer login com IdP".
Assim que o botão é pressionado, a FedCM verifica se o usuário fez login no
IdP por uma busca no endpoint
de contas ou
um status de login armazenado no
navegador. Se o
usuário ainda não tiver feito login, a FedCM vai pedir 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á fez login no IdP ou assim que o usuário fizer login no IdP com
a janela pop-up, o FedCM vai abrir uma caixa de diálogo modal para que o usuário escolha uma conta
do IdP para fazer login. Ao selecionar uma conta, o usuário pode fazer login no RP usando a conta do IdP.
Na interface do modo de botão, a caixa de diálogo de login exibida é maior em comparação com o modo de widget. Portanto, o ícone da marca também precisa ser maior para manter a consistência visual. O tamanho mínimo do ícone para o modo widget é de 25 x 25 pixels, mas o tamanho mínimo para o ícone no modo botão é de 40 x 40 pixels. O arquivo conhecido do IdP permite especificar vários URLs de ícones da seguinte forma:
{
// ... Other settings (like endpoints) here
"branding": {
"icons": [
{
"url": "https://size-25px-image",
"size": 25,
},
{
"url": "https://size-40px-image",
"size": 40
}
]
}
}
Teste você mesmo usando o Chrome 125 em https://fedcm-demo-rp.dev/active-mode.
Para usar a API Button Mode:
- Ative o recurso experimental
FedCmButtonModeemchrome://flags. - Não se esqueça de invocar a API por trás da ativação transitória do usuário, como um clique em um botão.
- Invoque a API com o parâmetro
modedesta forma:
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 ao endpoint de declaração de ID
que representa o tipo de solicitação incluindo 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
Detecção de recursos
Para determinar se o navegador está qualificado para usar o modo de botão, examine com o seguinte código:
let supportsFedCmMode = false;
try {
navigator.credentials.get({
identity: Object.defineProperty(
{}, 'mode', {
get: function () { supportsFedCmMode = true; }
}
)
});
} catch(e) {}
if (supportsFedCmMode) {
// The button mode is supported.
}
Usar a opção "Outra conta"
O RP pode permitir que os usuários "usem outras contas" no seletor de contas, por exemplo, quando os IdPs oferecem suporte a várias contas ou substituem a conta atual.
Para ativar a opção de usar outra conta:
- Ative o recurso experimental
FedCmUseOtherAccountemchrome://flagsou inscreva-se no 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
Para testar a API Button Mode localmente, ative uma flag do Chrome
chrome://flags#fedcm-button-mode no Chrome 125 ou em versões mais recentes.
Os IdPs também podem ativar o modo de botão registrando um teste de origem:
- Registre um teste de origem de terceiros para o RP.
Com os testes de origem, você pode testar novos recursos e dar feedback sobre a usabilidade, a praticidade e a eficácia deles para a comunidade de padrões da Web. Para mais informações, consulte 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 130.
- Acesse a página de registro do teste de origem.
- Clique no botão Registrar e preencha o formulário para solicitar um token.
- Insira a origem do IdP como Origem da Web.
- Marque "Correspondência de terceiros" para injetar o token com JavaScript em outras origens.
- Clique em Enviar.
- Incorpore o token emitido em um site de terceiros.
Para incorporar o token em um site de terceiros, adicione o seguinte código à biblioteca JavaScript ou ao SDK do IdP veiculado da origem dele.
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.
CORS e SameSite=None serão obrigatórios no Chrome 125
CORS
O Chrome vai exigir CORS no endpoint de declaração de ID a partir do Chrome 125.
O CORS (Cross-Origin-Resource-Sharing) é um sistema que consiste na transmissão de cabeçalhos HTTP e determina se os navegadores bloqueiam o código JavaScript do front-end de acessar respostas para solicitações de origem cruzada. O endpoint de declaração de ID no
servidor do IdP precisa responder à solicitação com cabeçalhos adicionais. Confira abaixo um exemplo de cabeçalho de resposta a 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. Ao especificar que ele seja None, o cookie pode ser enviado a um domínio de terceiros.
Na API 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 navegador vai enviar essas solicitações autenticadas apenas com cookies explicitamente marcados como SameSite=None.