Como fazer login de usuários com o Google

Neste documento, mostramos como usar o Identity Platform para fazer login de usuários com o Google.

Antes de começar

Neste tutorial, pressupomos que você já tenha ativado o Identity Platform e tenha um aplicativo da Web básico escrito usando HTML e JavaScript. Consulte o Guia de início rápido para saber como.

Como configurar o Google como um provedor

Para configurar o Google como um provedor de identidade:

Acesse a página Provedores de identidade no console do Google Cloud.

Acessar a página "Provedores de identidade"
Clique em Adicionar um provedor.
Selecione Google na lista.
Insira o ID do cliente da Web e o Secret da Web do Google. Se você ainda não tiver um ID e um secret, poderá conseguir na página da API e dos serviços.
Configure o URI listado em Configurar o Google como um URI de redirecionamento OAuth válido para seu Google app. Se você tiver configurado um domínio personalizado no Identity Platform, atualize o URI de redirecionamento na configuração do Google app para usar o domínio personalizado em vez do domínio padrão. Por exemplo, altere https://myproject.firebaseapp.com/__/auth/handler para https://auth.myownpersonaldomain.com/__/auth/handler.
Registre os domínios do seu aplicativo clicando em Adicionar domínio em Domínios autorizados. Para fins de desenvolvimento, localhost já está ativado por padrão.
Em Configurar seu aplicativo, clique em Detalhes de configuração. Copie o snippet no código do aplicativo para inicializar o SDK do cliente do Identity Platform.
Clique em Salvar.

Como fazer login de usuários com o SDK do cliente

Crie uma instância do objeto do provedor do Google:
Versão 9 para a Web

Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.
```
import { GoogleAuthProvider } from "firebase/auth";

const provider = new GoogleAuthProvider();auth_google_provider_create.js
```
Versão 8 para a Web
```
var provider = new firebase.auth.GoogleAuthProvider();google-signin.js
```

Opcional: adicione escopos do OAuth. Os escopos especificam quais dados você está solicitando ao Google. Dados mais confidenciais podem exigir escopos específicos. Consulte a documentação do provedor para determinar quais escopos são necessários para seu aplicativo.
Versão 9 para a Web

Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');auth_google_provider_scopes.js
```
Versão 8 para a Web
```
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');google-signin.js
```

Opcional: localize o fluxo de autenticação. É possível especificar uma linguagem ou usar a linguagem padrão do dispositivo:

Versão 9 para a Web

import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();auth_set_language_code.js

Versão 8 para a Web

firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js

Opcional: especifique outros parâmetros de OAuth personalizados. Eles são específicos do Google e costumam ser usados para personalizar a experiência de autenticação. Não é possível transmitir parâmetros reservados pelo OAuth ou pelo Identity Platform.

Versão 9 para a Web

provider.setCustomParameters({
  'login_hint': 'user@example.com'
});auth_google_provider_params.js

Versão 8 para a Web

provider.setCustomParameters({
  'login_hint': 'user@example.com'
});google-signin.js

Use o objeto do provedor do Google para fazer login do usuário. É possível abrir uma janela pop-up ou redirecionar a página atual. O redirecionamento é mais fácil para usuários em dispositivos móveis.

Para mostrar um pop-up, chame signInWithPopup():

Versão 9 para a Web

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);
    // ...
  });auth_google_signin_popup.js

Versão 8 para a Web

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;
    // ...
  });google-signin.js

Para redirecionar a página, primeiro chame signInWithRedirect().

Siga as práticas recomendadas ao usar signInWithRedirect, linkWithRedirect ou reauthenticateWithRedirect.

Versão 9 para a Web

import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);auth_signin_redirect.js

Versão 8 para a Web

firebase.auth().signInWithRedirect(provider);index.js

Em seguida, recupere o token do Google chamando getRedirectResult() quando sua página for carregada:

Versão 9 para a Web

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);
    // ...
  });auth_google_signin_redirect_result.js

Versão 8 para a Web

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;
    // ...
  });google-signin.js

Quando você tiver um token de acesso, poderá usá-lo para chamar a API do Google. Exemplo:

REST

curl -H "Authorization: Bearer [TOKEN]" https://www.googleapis.com/oauth2/v2/userinfo

Como fazer login manual dos usuários

Se você não quiser usar o SDK do cliente, também poderá processar o fluxo de login manualmente:

Integre a autenticação do Google ao seu app seguindo as etapas na documentação do desenvolvedor.
Faça o login do usuário com o Google usando o fluxo implementado na etapa anterior.

Troque o token que o Google recebeu por uma credencial do Identity Platform:

Versão 9 para a Web

import { GoogleAuthProvider } from "firebase/auth";

const credential = GoogleAuthProvider.credential(idToken);auth_google_provider_credential.js

Versão 8 para a Web

var credential = firebase.auth.GoogleAuthProvider.credential(idToken);google-signin.js

Use a credencial para fazer login do usuário com o Identity Platform:

Versão 9 para a Web

import { getAuth, signInWithCredential } from "firebase/auth";

// Sign in with the credential from the user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in
    // ...
  })
  .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;
    // ...
  });auth_signin_credential.js

Versão 8 para a Web

// Sign in with the credential from the user.
firebase.auth()
  .signInWithCredential(credential)
  .then((result) => {
    // Signed in
    // ...
  })
  .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;
    // ...
  });index.js

A seguir

Saiba mais sobre os usuários do Identity Platform.
Faça login dos usuários com outros provedores de identidade.