Ir para o console

Autenticar usando o Login do Google com JavaScript

Com a integração do Login do Google ao seu app, você pode permitir que os usuários usem as Contas do Google deles para a autenticação no Firebase. Para integrar, use o SDK do Firebase para executar o fluxo de login automaticamente, ou execute-o manualmente e transmita o token de código resultante para o Firebase.

Antes de começar

  1. Adicione o Firebase ao seu projeto do JavaScript.
  2. Ative o Login do Google no Firebase console:
    1. No Console do Firebase, abra a seção Authentication.
    2. Na guia Método de login, ative o método de login do Google e clique em Salvar.

Processar o fluxo de login com o SDK do Firebase

Se você está desenvolvendo um app da Web, a maneira mais fácil de autenticar seus usuários com o Firebase usando contas do Google é processando o fluxo de login com o SDK para JavaScript do Firebase.Se você quiser autenticar um usuário no Node.js ou outro ambiente fora do navegador, precisará processar o fluxo de login manualmente.

Para processar o fluxo de login com o SDK do Firebase para JavaScript, siga estas etapas:

  1. Crie uma instância do objeto provedor do Google:
    var provider = new firebase.auth.GoogleAuthProvider();
  2. Opcional: especifique os escopos de OAuth 2.0 adicionais que você deseja solicitar ao provedor de autenticação. Para adicionar um escopo, chame addScope. Por exemplo:
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    Consulte a documentação do provedor de autenticação.
  3. Opcional: para localizar o fluxo OAuth do provedor para a linguagem preferida do usuário sem passar explicitamente os parâmetros de OAuth personalizados relevantes, atualize o código do idioma na instância de Auth antes de iniciar o fluxo de OAuth. Por exemplo:
    firebase.auth().languageCode = 'pt';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
    
  4. Opcional: especifique outros parâmetros personalizados do provedor de OAuth que você quiser enviar com a solicitação de OAuth. Para adicioná-los, chame setCustomParameters no provedor inicializado usando um objeto que tenha a chave especificada na documentação do provedor de OAuth e o valor correspondente. Por exemplo:
    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    
    Os parâmetros de OAuth reservados obrigatórios não são permitidos e serão ignorados. Consulte a referência do provedor de autenticação para saber mais.
  5. Use o objeto provedor do Google para a autenticação no Firebase. Você pode solicitar que os usuários façam login nas Contas do Google deles em uma nova janela pop-up ou com redirecionamento para a página de login. O método de redirecionamento é recomendável para dispositivos móveis.
    • Para solicitar o login em uma janela pop-up, chame signInWithPopup:
      firebase.auth().signInWithPopup(provider).then(function(result) {
        // This gives you a Google Access Token. You can use it to access the Google API.
        var token = result.credential.accessToken;
        // The signed-in user info.
        var user = result.user;
        // ...
      }).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
      });
      Observe que você também pode recuperar o token de OAuth do provedor do Google, que pode ser usado para acessar dados adicionais usando as APIs do Google.

      Também é nesse local que você pode identificar e corrigir erros. Para ver uma lista de códigos de erro, consulte os Documentos de referência de autenticação.

    • Para redirecionar os usuários para a página de solicitação de login, chame signInWithRedirect:
      firebase.auth().signInWithRedirect(provider);
      Depois, você também pode recuperar o token de OAuth do provedor do Google chamando getRedirectResult quando sua página for carregada:
      firebase.auth().getRedirectResult().then(function(result) {
        if (result.credential) {
          // This gives you a Google Access Token. You can use it to access the Google API.
          var token = result.credential.accessToken;
          // ...
        }
        // The signed-in user info.
        var user = result.user;
      }).catch(function(error) {
        // Handle Errors here.
        var errorCode = error.code;
        var errorMessage = error.message;
        // The email of the user's account used.
        var email = error.email;
        // The firebase.auth.AuthCredential type that was used.
        var credential = error.credential;
        // ...
      });
      Também é nesse local que você pode identificar e corrigir erros. Para ver uma lista de códigos de erro, consulte os Documentos de referência de autenticação.

Autenticar com o Firebase em uma Extensão do Chrome

Se você estiver criando um app de Extensão do Chrome, coloque o código da extensão na lista de permissões:

  1. Abra seu projeto no Firebase console.
  2. Na seção Autenticação, abra a página Método de login.
  3. Adicione um URI como o seguinte à lista de domínios autorizados:
    chrome-extension://CHROME_EXTENSION_ID

Somente as operações pop-up (signInWithPopup e linkWithPopup) estão disponíveis para as Extensões do Chrome. Isso ocorre porque as extensões não podem usar redirecionamentos HTTP. Chame esses métodos a partir de um script em segundo plano porque, se usar o pop-up de ação do navegador, ele será cancelado pelo pop-up de autenticação.

No arquivo de manifesto da sua extensão do Chrome, adicione o URL https://apis.google.com à lista de permissões content_security_policy.

Próximas etapas

Depois que um usuário faz login pela primeira vez, uma nova conta é criada e vinculada às credenciais, que podem ser o número do telefone, o nome de usuário e a senha ou as informações do provedor de autenticação. Essa nova conta é armazenada como parte do projeto do Firebase. Ela pode ser usada para identificar um usuário em todos os apps do projeto, independentemente do método de login usado.

  • Nos seus apps, a maneira recomendada para descobrir o status de autenticação do usuário é definir um observador no objeto Auth. Você pode coletar as informações básicas do perfil do usuário do objeto User. Consulte Gerenciar usuários.

  • Nas Regras de segurança do Firebase Realtime Database e do Cloud Storage, é possível usar a variável auth para encontrar o ID exclusivo do usuário conectado. Utilize essa informação para controlar o acesso dele aos dados.

Os usuários podem fazer login no app usando vários provedores de autenticação. Basta vincular as credenciais desses provedores a uma conta de usuário.

Para desconectar um usuário, chame signOut:

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});