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

Autenticar usando o login do Facebook com JavaScript

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Permita que os usuários se autentiquem com o Firebase usando contas do Facebook. Basta integrar o login da rede social ao seu app com o SDK do Firebase para realizar o fluxo de login ou passar o token de acesso resultante para o Firebase manualmente.

Antes de começar

  1. Adicione o Firebase ao seu projeto do JavaScript.
  2. No site Facebook for Developers, acesse o ID e o secret do app.
  3. Ative o login do Facebook:
    1. No Console do Firebase, abra a seção Auth.
    2. Na guia Método de login, ative o método de login pelo Facebook e especifique o ID e o secret do app recebidos do Facebook.
    3. Em seguida, verifique se o URI de redirecionamento do OAuth (por exemplo, my-app-12345.firebaseapp.com/__/auth/handler) está listado como um dos URIs de redirecionamento do OAuth na página de configurações do app Facebook. No site Facebook for Developers, acesse Product Settings > Facebook Login.

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 Twitter é processando o fluxo de login com o SDK para JavaScript do Firebase. 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 Facebook:

    Web version 9

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

    Web version 8

    var provider = new firebase.auth.FacebookAuthProvider();
  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:

    Web version 9

    provider.addScope('user_birthday');

    Web version 8

    provider.addScope('user_birthday');
    Consulte a documentação do provedor de autenticação.
  3. Opcional: para localizar o fluxo de OAuth do provedor para o idioma preferido do usuário sem passar explicitamente os parâmetros de OAuth personalizados relevantes, atualize o código do idioma na instância de Auth antes de iniciar o fluxo de OAuth. Exemplo:

    Web version 9

    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();

    Web version 8

    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  4. 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 version 9

    provider.setCustomParameters({
      'display': 'popup'
    });

    Web version 8

    provider.setCustomParameters({
      'display': 'popup'
    });
    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 mais detalhes.
  5. Faça a autenticação com o Firebase usando o objeto de provedor do Facebook. Você pode solicitar que os usuários façam login com a conta deles do Facebook por meio de uma janela pop-up ou redirecionando-os à página de login do provedor. O método de redirecionamento é recomendável para dispositivos móveis.
    • Para fazer login com uma janela pop-up, chame signInWithPopup:

      Web version 9

      import { getAuth, signInWithPopup, FacebookAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((result) => {
          // The signed-in user info.
          const user = result.user;
      
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          const credential = FacebookAuthProvider.credentialFromResult(result);
          const accessToken = credential.accessToken;
      
          // ...
        })
        .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 = FacebookAuthProvider.credentialFromError(error);
      
          // ...
        });

      Web version 8

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = result.credential;
      
          // The signed-in user info.
          var user = result.user;
      
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          var accessToken = credential.accessToken;
      
          // ...
        })
        .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;
      
          // ...
        });
      Além disso, é possível recuperar o token de OAuth do provedor do Facebook, que pode ser usado para recuperar outros dados por meio das APIs do Facebook.

      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.

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

      Web version 9

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

      Web version 8

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

      Web version 9

      import { getAuth, getRedirectResult, FacebookAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((result) => {
          // This gives you a Facebook Access Token. You can use it to access the Facebook API.
          const credential = FacebookAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
      
          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.customData.email;
          // AuthCredential type that was used.
          const credential = FacebookAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = result.credential;
      
            // This gives you a Facebook Access Token. You can use it to access the Facebook 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.

Autenticar com 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 um script de 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, você pode conseguir 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:

Web version 9

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

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

Web version 8

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