O Google tem o compromisso de promover a igualdade racial para as comunidades negras. Saiba como.

Autenticar usando o GitHub com JavaScript

Permita que os usuários se autentiquem com o Firebase usando suas contas do GitHub integrando a autenticação do GitHub ao seu app. É possível 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 começar

  1. Adicione o Firebase ao seu projeto em JavaScript.
  2. No Console do Firebase, abra a seção Autenticação.
  3. Na guia Método de login, ative o provedor GitHub.
  4. Adicione o ID do cliente e a chave secreta do cliente do console de desenvolvimento do provedor à configuração correspondente:
    1. Registre o app como um aplicativo de desenvolvedor no GitHub e receba o ID do cliente e a chave secreta do cliente do OAuth 2.0 do app.
    2. Em seguida, verifique se o URI de redirecionamento do OAuth do Firebase (por exemplo, my-app-12345.firebaseapp.com/__/auth/handler), está definido como o URL de retorno de chamada de autorização na página de configurações do app no GitHub (em inglês).
  5. 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 GitHub é 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 GitHub:

    Versão 9 para a Web

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

    Versão 8 para a Web

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

    Versão 9 para a Web

    provider.addScope('repo');

    Versão 8 para a Web

    provider.addScope('repo');
    Consulte a documentação do provedor de autenticação.
  3. Opcional: especifique outros parâmetros personalizados do provedor de OAuth que você quer 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:

    Versão 9 para a Web

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

    Versão 8 para a Web

    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    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.
  4. Use o objeto do provedor do GitHub para a autenticação no Firebase. Você pode solicitar que os usuários façam login nas contas do GitHub deles em uma janela pop-up ou com redirecionamento para a página de login. O método de redirecionamento é recomendável para dispositivos móveis.
    • Para fazer login com uma janela 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;
          // ...
        }).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 AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });

      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;
          // ...
        }).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 GitHub, que pode ser usado para buscar outros dados usando as APIs do GitHub.

      Também é nesse local que você identifica e corrige erros. Para uma lista de códigos de erro, confira a Documentação de referência de autenticação.

    • Para redirecionar os usuários à página de login, chame signInWithRedirect:

      Versão 9 para a Web

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

      Versão 8 para a Web

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

      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;
        }).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 AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });

      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;
        }).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 é nesse local que você identifica e corrige erros. Para ver uma lista de códigos de erro, consulte os Documentos de referência de autenticação.

Processar o fluxo de login manualmente

É possível também fazer a autenticação no Firebase com uma conta do GitHub fazendo o processamento do fluxo de login ao chamar endpoints do OAuth 2.0 do GitHub:

  1. Integre a autenticação do GitHub no seu app ao seguir as instruções na documentação do desenvolvedor (em inglês). No final do fluxo de login do GitHub, você recebe um token de acesso do OAuth 2.0.
  2. Se você precisar fazer login em um aplicativo Node.js, envie o token de acesso do OAuth para o aplicativo Node.js.
  3. Depois que um usuário fizer login com o GitHub, troque o token de acesso do OAuth 2.0 por uma credencial do Firebase:

    Versão 9 para a Web

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

    Versão 8 para a Web

    var credential = firebase.auth.GithubAuthProvider.credential(token);
  4. Use a credencial do Firebase para fazer a autenticação:

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

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

Fazer autenticação com o Firebase em uma extensão do Chrome

Se você está criando um app de extensão do Chrome, é necessário adicionar o ID da extensão:

  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 as operações pop-up (signInWithPopup, linkWithPopup e reauthenticateWithPopup) estão disponíveis para as extensões do Chrome. Isso ocorre porque as extensões não podem usar redirecionamentos de HTTP. Chame esses métodos usando uma página em segundo plano porque, se usar o pop-up de ação do navegador, ele será cancelado pelo pop-up de autenticação. Os métodos pop-up só podem ser usados em extensões que usam o Manifest V2. O Manifest V3 mais recente só permite scripts em segundo plano na forma de service workers, que não podem realizar as operações pop-up.

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 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 do Firebase Realtime Database e do Cloud Storage, é possível receber o ID exclusivo do usuário conectado da variável auth e usar esse ID 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:

Versão 9 para a Web

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

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

Versão 8 para a Web

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