Autenticar usando GitHub com JavaScript

Você pode permitir que seus usuários se autentiquem no Firebase usando suas contas do GitHub integrando a autenticação do GitHub ao seu aplicativo. Você pode integrar a autenticação do GitHub usando o SDK do Firebase para realizar o fluxo de login ou executando o fluxo do GitHub OAuth 2.0 manualmente e passando o token de acesso resultante para o Firebase.

Antes de você começar

  1. Adicione o Firebase ao seu projeto JavaScript .
  2. No console do Firebase , abra a seção Auth .
  3. Na guia Método de login , habilite o provedor GitHub .
  4. Adicione o ID do cliente e o segredo do cliente do console do desenvolvedor desse provedor à configuração do provedor:
    1. Registre seu aplicativo como um aplicativo de desenvolvedor no GitHub e obtenha o Client ID e o Client Secret do OAuth 2.0 do seu aplicativo.
    2. Certifique-se de que seu URI de redirecionamento do Firebase OAuth (por exemplo, my-app-12345.firebaseapp.com/__/auth/handler ) esteja definido como seu URL de retorno de chamada de autorização na página de configurações do seu aplicativo no config do seu aplicativo GitHub .
  5. Clique em Salvar .

Lidar com o fluxo de login com o SDK do Firebase

Se você estiver criando um aplicativo da Web, a maneira mais fácil de autenticar seus usuários no Firebase usando suas contas do GitHub é gerenciar o fluxo de login com o SDK JavaScript do Firebase. (Se quiser autenticar um usuário no Node.js ou em outro ambiente que não seja de navegador, você deverá manipular o fluxo de login manualmente.)

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

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

    Web modular API

    import { GithubAuthProvider } from "firebase/auth";
    
    const provider = new GithubAuthProvider();

    Web namespaced API

    var provider = new firebase.auth.GithubAuthProvider();
  2. Opcional : Especifique escopos adicionais do OAuth 2.0 que você deseja solicitar do provedor de autenticação. Para adicionar um escopo, chame addScope . Por exemplo:

    Web modular API

    provider.addScope('repo');

    Web namespaced API

    provider.addScope('repo');
    Consulte a documentação do provedor de autenticação .
  3. Opcional : Especifique parâmetros adicionais do provedor OAuth customizado que você deseja enviar com a solicitação OAuth. Para adicionar um parâmetro personalizado, chame setCustomParameters no provedor inicializado com um objeto contendo a chave conforme especificado na documentação do provedor OAuth e o valor correspondente. Por exemplo:

    Web modular API

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

    Web namespaced API

    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    Parâmetros OAuth obrigatórios reservados não são permitidos e serão ignorados. Consulte a referência do provedor de autenticação para obter mais detalhes.
  4. Autentique-se com o Firebase usando o objeto do provedor GitHub. Você pode solicitar que seus usuários façam login com suas contas do GitHub abrindo uma janela pop-up ou redirecionando para a página de login. O método de redirecionamento é preferido em dispositivos móveis.
    • Para fazer login com uma janela pop-up, chame signInWithPopup :

      Web modular API

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

      Web namespaced API

      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;
          // ...
        });
      Observe também que você pode recuperar o token OAuth do provedor GitHub, que pode ser usado para buscar dados adicionais usando as APIs do GitHub.

      É aqui também que você pode detectar e tratar erros. Para obter uma lista de códigos de erro, consulte os documentos de referência de autenticação .

    • Para fazer login redirecionando para a página de login, chame signInWithRedirect : siga as práticas recomendadas ao usar `signInWithRedirect`.

      Web modular API

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Web namespaced API

      firebase.auth().signInWithRedirect(provider);
      Em seguida, você também pode recuperar o token OAuth do provedor GitHub chamando getRedirectResult quando sua página for carregada:

      Web modular API

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

      Web namespaced API

      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;
          // ...
        });
      É aqui também que você pode detectar e tratar erros. Para obter uma lista de códigos de erro, consulte os documentos de referência de autenticação .

Lidar com o fluxo de login manualmente

Você também pode autenticar com o Firebase usando uma conta GitHub manipulando o fluxo de login chamando os endpoints GitHub OAuth 2.0:

  1. Integre a autenticação do GitHub ao seu aplicativo seguindo a documentação do desenvolvedor . Ao final do fluxo de login do GitHub, você receberá um token de acesso do OAuth 2.0.
  2. Se precisar fazer login em um aplicativo Node.js, envie o token de acesso OAuth para o aplicativo Node.js.
  3. Depois que um usuário fizer login no GitHub, troque o token de acesso do OAuth 2.0 por uma credencial do Firebase:

    Web modular API

    import { GithubAuthProvider } from "firebase/auth";
    
    const credential = GithubAuthProvider.credential(token);

    Web namespaced API

    var credential = firebase.auth.GithubAuthProvider.credential(token);
  4. Autentique-se com o Firebase usando a credencial do Firebase:

    Web modular API

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

    Web namespaced API

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

Autenticar com Firebase em uma extensão do Chrome

Se você estiver criando um aplicativo de extensão do Chrome, deverá adicionar o ID da extensão do Chrome:

  1. Abra seu projeto no console do Firebase .
  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 operações pop-up ( signInWithPopup , linkWithPopup e reauthenticateWithPopup ) estão disponíveis para extensões do Chrome, pois as extensões do Chrome não podem usar redirecionamentos HTTP. Você deve chamar esses métodos a partir de um script de página em segundo plano, em vez de um pop-up de ação do navegador, pois o pop-up de autenticação cancelará o pop-up de ação do navegador. Os métodos popup só podem ser usados ​​em extensões que utilizam Manifest V2 . O Manifest V3 mais recente permite apenas scripts em segundo plano na forma de service workers, que não podem executar operações pop-up.

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

Próximos passos

Depois que um usuário faz login pela primeira vez, uma nova conta de usuário é criada e vinculada às credenciais (ou seja, nome de usuário e senha, número de telefone ou informações do provedor de autenticação) com as quais o usuário fez login. Essa nova conta é armazenada como parte do seu projeto do Firebase e pode ser usada para identificar um usuário em todos os aplicativos do seu projeto, independentemente de como o usuário faz login.

  • Em seus aplicativos, a maneira recomendada de saber o status de autenticação do seu usuário é definir um observador no objeto Auth . Você pode então obter as informações básicas do perfil do usuário no objeto User . Consulte Gerenciar usuários .

  • Nas regras de segurança do Firebase Realtime Database e do Cloud Storage , você pode obter o ID de usuário exclusivo do usuário conectado na variável auth e usá-lo para controlar quais dados um usuário pode acessar.

Você pode permitir que os usuários façam login no seu aplicativo usando vários provedores de autenticação vinculando as credenciais do provedor de autenticação a uma conta de usuário existente.

Para desconectar um usuário, chame signOut :

Web modular API

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

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

Web namespaced API

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