Autenticar usando o Google com JavaScript

Você pode permitir a autenticação de usuários no Firebase com Contas do Google. Use o SDK do Firebase para realizar o fluxo de login do Google ou realizar o fluxo de login manualmente usando a biblioteca "Fazer login com o Google" e transmitindo o token de ID resultante para o Firebase.

Antes de começar

  1. Adicione o Firebase ao seu projeto em JavaScript.
  2. Ative o Google como um método de login no Console do Firebase:
    1. No console do Firebase, abra a seção Auth.
    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 do Firebase para JavaScript. Se 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 do provedor do Google:
    WebWeb
    import { GoogleAuthProvider } from "firebase/auth";
    
    const provider = new GoogleAuthProvider();
    var provider = new firebase.auth.GoogleAuthProvider();
  2. Opcional: especifique escopos adicionais do OAuth 2.0 que você quer solicitar do provedor de autenticação. Para adicionar um escopo, chame addScope. Por exemplo:
    WebWeb
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
    Consulte a documentação do provedor de autenticação.
  3. Opcional: para localizar o fluxo de OAuth do provedor para o idioma preferido do usuário sem transmitir 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:
    WebWeb
    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // auth.useDeviceLanguage();
    firebase.auth().languageCode = 'it';
    // 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 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:
    WebWeb
    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    provider.setCustomParameters({
      'login_hint': 'user@example.com'
    });
    Os parâmetros de OAuth reservados e 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 é bom para dispositivos móveis.
    • Para fazer login com uma janela pop-up, chame signInWithPopup:
      WebWeb
      import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access the Google API.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          // The signed-in user info.
          const user = result.user;
          // IdP data available using getAdditionalUserInfo(result)
          // ...
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = GoogleAuthProvider.credentialFromError(error);
          // ...
        });
      firebase.auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // This gives you a Google Access Token. You can use it to access the Google API.
          var token = credential.accessToken;
          // The signed-in user info.
          var user = result.user;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
        }).catch((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 é possível recuperar o token de OAuth do provedor do Google, que pode ser usado para buscar outros dados usando as APIs do Google.

      Também é aqui que você identifica e corrige erros. Para conferir uma lista de códigos de erro, consulte os Documentos de referência de autenticação.

    • Para redirecionar os usuários à página de login, chame signInWithRedirect: siga as práticas recomendadas ao usar "signInWithRedirect".
      WebWeb
      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);
      firebase.auth().signInWithRedirect(provider);
      Em seguida, você também pode recuperar o token de OAuth do provedor do Google. Basta chamar getRedirectResult quando sua página carregar:
      WebWeb
      import { getAuth, getRedirectResult, GoogleAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a Google Access Token. You can use it to access Google APIs.
          const credential = GoogleAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
      
          // The signed-in user info.
          const user = result.user;
          // IdP data available using getAdditionalUserInfo(result)
          // ...
        }).catch((error) => {
          // Handle Errors here.
          const errorCode = error.code;
          const errorMessage = error.message;
          // The email of the user's account used.
          const email = error.customData.email;
          // The AuthCredential type that was used.
          const credential = GoogleAuthProvider.credentialFromError(error);
          // ...
        });
      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a Google Access Token. You can use it to access the Google API.
            var token = credential.accessToken;
            // ...
          }
          // The signed-in user info.
          var user = result.user;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
        }).catch((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 é aqui que você identifica e corrige erros. Para conferir uma lista de códigos de erro, consulte os Documentos de referência de autenticação.

Se você ativou a configuração Uma conta por endereço de e-mail no Console do Firebase, quando um usuário tentar se conectar a um provedor (como o Google) com um e-mail que já existe em outro provedor de usuário do Firebase (como o Facebook), o erro auth/account-exists-with-different-credential será exibido com um objeto AuthCredential (token de ID do Google). No exemplo acima, o usuário deve primeiramente concluir o login no provedor existente (Facebook) e, depois, vincular ao AuthCredential anterior (token de ID do Google) para fazer login no provedor desejado.

Se você usar signInWithPopup, poderá corrigir erros auth/account-exists-with-different-credential utilizando código, como o do exemplo a seguir:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  GoogleAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Google.
  let result = await signInWithPopup(getAuth(), new GoogleAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Google credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Google credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

Modo de redirecionamento

O processamento desse erro é similar no modo de redirecionamento. No entanto, nele, as credenciais pendentes devem ser armazenadas em cache entre os redirecionamentos de página usando, por exemplo, o armazenamento de sessão.

Você também pode fazer a autenticação com o Firebase usando uma Conta do Google ao processar o fluxo de login com a biblioteca Fazer login com o Google:

  1. Integre a biblioteca Fazer login com o Google ao seu app seguindo o guia de integração. Para configurar o Login do Google, use o ID do cliente do Google gerado para seu projeto do Firebase. Você encontra esse ID na página Credenciais do Console para desenvolvedores.
  2. Na chamada de retorno do resultado do login, troque o token do ID da resposta de autenticação do Google por uma credencial do Firebase e use-o para fazer a autenticação com o Firebase:
    function handleCredentialResponse(response) {
      // Build Firebase credential with the Google ID token.
      const idToken = response.credential;
      const credential = GoogleAuthProvider.credential(idToken);
    
      // Sign in with credential from the Google user.
      signInWithCredential(auth, credential).catch((error) => {
        // Handle Errors here.
        const errorCode = error.code;
        const errorMessage = error.message;
        // The email of the user's account used.
        const email = error.email;
        // The credential that was used.
        const credential = GoogleAuthProvider.credentialFromError(error);
        // ...
      });
    }

Para autenticar com o Firebase em um aplicativo Node.js:

  1. Faça o login do usuário com a Conta do Google dele e receba o respectivo token de ID do Google. Isso pode ser feito de várias maneiras. Exemplo:
    • Caso seu app tenha um front-end de navegador, use o Login do Google conforme descrito na seção Processar o fluxo de login manualmente. Receba o token de ID do Google da resposta de autenticação:
      var id_token = googleUser.getAuthResponse().id_token
      Depois, envie esse token para seu app Node.js.
    • Se seu app é executado em um dispositivo com recursos de entrada limitados, como uma TV, use o fluxo Login do Google para TVs e dispositivos.
  2. Depois de conseguir o token de ID do Google, use-o para criar um objeto Credential e, depois, faça o login do usuário com a credencial:
    WebWeb
    import { getAuth, signInWithCredential, GoogleAuthProvider } from "firebase/auth";
    
    // Build Firebase credential with the Google ID token.
    const credential = GoogleAuthProvider.credential(id_token);
    
    // Sign in with credential from the Google user.
    const auth = getAuth();
    signInWithCredential(auth, credential).catch((error) => {
      // Handle Errors here.
      const errorCode = error.code;
      const errorMessage = error.message;
      // The email of the user's account used.
      const email = error.customData.email;
      // The AuthCredential type that was used.
      const credential = GoogleAuthProvider.credentialFromError(error);
      // ...
    });
    // Build Firebase credential with the Google ID token.
    var credential = firebase.auth.GoogleAuthProvider.credential(id_token);
    
    // Sign in with credential from the Google user.
    firebase.auth().signInWithCredential(credential).catch((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;
      // ...
    });

Autenticar com Firebase em uma extensão do Chrome

Se você estiver criando um app de extensão do Google Chrome, consulte a Guia de documentos fora da tela.

O Firebase vai provisionar um subdomínio exclusivo para o projeto no momento da criação: https://my-app-12345.firebaseapp.com.

Esse subdomínio também será usado como mecanismo de redirecionamento para o login do OAuth. Esse domínio precisaria ter permissão para todos os provedores OAuth com suporte. No entanto, isso significa que os usuários podem ver esse domínio ao entrarem no Google, antes de serem redirecionados para o aplicativo: Continuar com: https://my-app-12345.firebaseapp.com

Para evitar a exibição do subdomínio, configure um domínio personalizado com o Firebase Hosting:

  1. Siga as etapas de 1 a 3 em Configurar o domínio para o Hosting. Quando você verifica a propriedade do domínio, o Hosting provisiona um certificado SSL para o domínio personalizado.
  2. Adicione o domínio personalizado à lista de domínios autorizados no console do Firebase: auth.custom.domain.com.
  3. Na página de configuração do console do desenvolvedor do Google ou OAuth, coloque na lista de permissões o URL da página de redirecionamento, que ficará acessível no seu domínio personalizado: https://auth.custom.domain.com/__/auth/handler.
  4. Ao inicializar a biblioteca JavaScript, especifique seu domínio personalizado com o campo authDomain:
    var config = {
      apiKey: '...',
      // Changed from 'PROJECT_ID.firebaseapp.com'.
      authDomain: 'auth.custom.domain.com',
      databaseURL: 'https://PROJECT_ID.firebaseio.com',
      projectId: 'PROJECT_ID',
      storageBucket: 'PROJECT_ID.firebasestorage.app',
      messagingSenderId: 'SENDER_ID'
    };
    firebase.initializeApp(config);

Próximas etapas

Depois que um usuário faz login pela primeira vez, uma nova conta de usuário é 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 e pode ser usada para identificar um usuário em todos os apps do projeto, seja qual for o método de login utilizado.

  • Nos apps, a maneira recomendada de saber o status de autenticação do seu usuário é definindo um observador no objeto Auth. É possível, então, receber as informações básicas de perfil do usuário do objeto User. Consulte Gerenciar usuários.

  • Nas Regras de segurança Firebase Realtime Database e Cloud Storage, você pode acessar o ID exclusivo do usuário conectado pela variável auth e usar essas informações para controlar quais dados um usuário pode acessar.

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:

WebWeb
import { getAuth, signOut } from "firebase/auth";

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});
firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});