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

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:

  1. Acesse a página Configurações do Identity Platform no Console do Cloud.

    Acessar a página "Configurações"

  2. Selecione a guia Segurança.

  3. Em Domínios autorizados, clique em Adicionar domínio.

  4. Insira o URI da sua extensão. Que precisa ser semelhante a este: chrome-extension://CHROME_EXTENSION_ID

  5. Clique em Add.

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() e linkWithPopup()) 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.

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