Como fazer login dos usuários usando uma extensão do Chrome
Neste documento, você aprenderá como usar o Identity Platform para fazer login de usuários a partir de uma extensão do Chrome.
Antes de começar
Ative o Identity Platform e configure um provedor de identidade. Consulte o Guia de início rápido para saber como.
Adicione os seguintes URLs à lista de permissões
content_security_policy
da extensão:https://apis.google.com
https://www.gstatic.com
https://www.googleapis.com
https://securetoken.googleapis.com
Consulte a documentação de política de segurança de conteúdo (CSP, na sigla em inglês) para saber mais.
Como registrar o ID da extensão
Para fazer login de usuários usando uma extensão do Chrome, registre o ID da extensão como um domínio autorizado:
Acesse a página Configurações do Identity Platform no Console do Google Cloud.
Selecione a guia Segurança.
Em Domínios autorizados, clique em Adicionar domínio.
Insira o URI da sua extensão. Que precisa ser semelhante a este:
chrome-extension://CHROME_EXTENSION_ID
Clique em Adicionar.
Como conectar usuários
O login de usuários de uma extensão do Chrome é semelhante a um app da Web, com algumas diferenças:
A autenticação por telefone e multifator não é compatível.
As extensões do Chrome não podem usar redirecionamentos HTTP, portanto, será necessário usar operações pop-up (
signInWithPopup()
elinkWithPopup()
) para fazer login dos usuários.Chamar métodos de autenticação de uma ação do navegador cancelará a ação do navegador. Portanto, chame-os de um script em segundo plano.
Os métodos de pop-up só podem ser usados em extensões que usam o Manifesto V2.
O exemplo a seguir demonstra o login de um usuário com o Google.
JavaScript
popup.js
// Get reference to background page.
const bgPage = chrome.extension.getBackgroundPage();
// Sign in with popup, typically attached to a button click.
bgPage.signInWithPopup();
background.js
const app = firebase.initializeApp(config);
const auth = app.auth();
const signInWithPopup = () => {
const provider = new firebase.auth.GoogleAuthProvider();
return auth.signInWithPopup(provider).catch((error) => {
console.log(error);
});
};
A seguir
- Faça login de usuários com vários provedores de identidade.
- Saiba mais sobre os usuários do Identity Platform.