Como fazer login de usuários com o GitHub

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

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 GitHub como um provedor

Para configurar o GitHub como provedor de identidade:

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

    Acessar a página "Provedores do Identity Platform"

  2. Clique em Adicionar um provedor.

  3. Selecione GitHub na lista.

  4. Digite o ID do cliente e a chave secreta do cliente do GitHub. Se você ainda não tem um ID e um secret, pode receber um consultando a página Aplicativos do GitHub.

  5. Configure o URI listado em Configurar o GitHub como um URI de redirecionamento do OAuth válido para seu app do GitHub. Se você configurou um domínio personalizado na Plataforma de identidade, atualize o URI de redirecionamento na configuração do app do GitHub para usar o domínio personalizado em vez do padrão. Por exemplo, mude https://myproject.firebaseapp.com/__/auth/handler para https://auth.myownpersonaldomain.com/__/auth/handler.

  6. 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.

  7. 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.

  8. Clique em Save.

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

  1. Crie uma instância do objeto provedor do GitHub:

    Versão 9 para a Web

    import { GithubAuthProvider } from "firebase/auth";

const provider = new GithubAuthProvider();
    auth_github_provider_create.js

    Versão 8 para a Web

    var provider = new firebase.auth.GithubAuthProvider();
    github.js

  1. Opcional: adicione escopos do OAuth. Os escopos especificam quais dados você está solicitando do GitHub. Dados mais confidenciais podem exigir escopos específicos. Consulte a documentação para determinar os escopos de que o app precisa.

    Versão 9 para a Web

    provider.addScope('repo');
    auth_github_provider_scopes.js

    Versão 8 para a Web

    provider.addScope('repo');
    github.js

  1. 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

  2. Opcional: especifique outros parâmetros de OAuth personalizados. Eles são específicos do GitHub e normalmente são 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({
  'allow_signup': 'false'
});
auth_github_provider_params.js

Versão 8 para a Web

provider.setCustomParameters({
  'allow_signup': 'false'
});
github.js

  1. Use o objeto de provedor do GitHub para fazer login do usuário. Você pode 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, GithubAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a GitHub Access Token. You can use it to access the GitHub API.
    const credential = GithubAuthProvider.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 = GithubAuthProvider.credentialFromError(error);
    // ...
  });
    auth_github_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 GitHub Access Token. You can use it to access the GitHub 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;
    // ...
  });
    github.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 GitHub chamando getRedirectResult() quando a página for carregada:

    Versão 9 para a Web

    import { getAuth, getRedirectResult, GithubAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    const credential = GithubAuthProvider.credentialFromResult(result);
    if (credential) {
      // This gives you a GitHub Access Token. You can use it to access the GitHub API.
      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 = GithubAuthProvider.credentialFromError(error);
    // ...
  });
    auth_github_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 GitHub Access Token. You can use it to access the GitHub 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;
    // ...
  });
    github.js

Depois de ter um token de acesso, você pode usá-lo para chamar a API do GitHub. Exemplo:

REST

curl -H "Authorization: Bearer [TOKEN]" https://api.github.com/gists/starred

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:

  1. Integre a autenticação do GitHub no seu app ao seguir as etapas na documentação do desenvolvedor.

  2. Faça login do usuário com o GitHub usando o fluxo implementado na etapa anterior.

  3. Troque o token que você recebeu do GitHub por uma credencial do Identity Platform:

    Versão 9 para a Web

    import { GithubAuthProvider } from "firebase/auth";

const credential = GithubAuthProvider.credential(token);
    auth_github_provider_credential.js

    Versão 8 para a Web

    var credential = firebase.auth.GithubAuthProvider.credential(token);
    github.js

  4. 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