Autenticar usando o GitHub com JavaScript

Integre a autenticação do GitHub ao seu app para permitir que os usuários usem contas do GitHub para fazer a autenticação no Firebase. É possível integrar a autenticação do GitHub usando o SDK do Firebase para fazer o fluxo de login ou executando o fluxo do OAuth 2.0 do GitHub manualmente e transferindo o token de acesso resultante para o Firebase.

Antes de começar

Adicione o Firebase ao seu projeto em JavaScript.
No console do Firebase, abra a seção Autenticação.
Na guia Método de login, ative o provedor GitHub.
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 consiga o ID 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 callback de autorização na página de configurações do app no GitHub.
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:

Crie uma instância do objeto provedor do GitHub:

Web

import { GithubAuthProvider } from "firebase/auth";

const provider = new GithubAuthProvider();auth_github_provider_create.js

Web

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

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:
Web

Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.
```
provider.addScope('repo');auth_github_provider_scopes.js
```
Web
```
provider.addScope('repo');github.js
```
Consulte a documentação do provedor de autenticação.
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:
Web

Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.
```
provider.setCustomParameters({
  'allow_signup': 'false'
});auth_github_provider_params.js
```
Web
```
provider.setCustomParameters({
  'allow_signup': 'false'
});github.js
```
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.

Use o objeto do provedor do GitHub para a autenticação no Firebase. É possível 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:

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

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

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

Web

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

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

Web

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

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

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

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

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.

Tratamento de erros account-exists-with-different-credential

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 GitHub) com um e-mail que já existe em outro provedor de usuário do Firebase (como o Google), o erro auth/account-exists-with-different-credential será exibido com um objeto AuthCredential (token de acesso do GitHub). Para concluir o login no provedor pretendido, primeiro o usuário precisa fazer login no provedor atual (Google) e depois vinculá-lo ao AuthCredential anterior (token de acesso do GitHub).

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,
  GitHubAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using GitHub.
  let result = await signInWithPopup(getAuth(), new GitHubAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending GitHub 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 GitHub 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

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

Processar o fluxo de login manualmente

Você também pode fazer a autenticação no Firebase com uma conta do GitHub. Para isso, processe o fluxo de login chamando endpoints do OAuth 2.0 do GitHub:

Integre a autenticação do GitHub ao seu app seguindo 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.
Se você precisar fazer login em um aplicativo Node.js, envie o token de acesso do OAuth para o aplicativo Node.js.
Depois que um usuário fizer login com o GitHub, troque o token de acesso do OAuth 2.0 por uma credencial do Firebase:
Web

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

const credential = GithubAuthProvider.credential(token);auth_github_provider_credential.js
```
Web
```
var credential = firebase.auth.GithubAuthProvider.credential(token);github.js
```

Use a credencial do Firebase para fazer a autenticação:

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

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

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 provisionará um subdomínio exclusivo (https://my-app-12345.firebaseapp.com) no momento da criação do projeto.

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

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

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.
Adicione o domínio personalizado à lista de domínios autorizados no console do Firebase: auth.custom.domain.com.
Na página de configuração do OAuth ou no console do desenvolvedor do GitHub, 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.

Ao inicializar a biblioteca de JavaScript, especifique seu domínio personalizado com o campo authDomain:

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
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:

Web

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

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

Web

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

Autenticar usando o GitHub com JavaScript

Antes de começar

Processar o fluxo de login com o SDK do Firebase

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Tratamento de erros account-exists-with-different-credential

Modo pop-up

Modo de redirecionamento

Processar o fluxo de login manualmente

Web

Web

Web

Web

Autenticar com Firebase em uma extensão do Chrome

Como personalizar o domínio de redirecionamento para o login do GitHub

Próximas etapas

Web

Web