Como fazer login de usuários com o Facebook

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

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

Para configurar o Facebook como um provedor de identidade:

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

    Acessar a página "Provedores de identidade"

  2. Clique em Adicionar um provedor.

  3. Selecione Facebook na lista.

  4. Insira o ID e o secret do app do Facebook. Se você ainda não tiver um ID e um secret, consiga um na página do Facebook para desenvolvedores.

  5. Configure o URI listado em Configurar Facebook como um URI de redirecionamento OAuth válido para seu aplicativo do Facebook. Se você tiver configurado um domínio personalizado no Identity Platform, atualize o URI de redirecionamento na configuração do aplicativo do Facebook para usar o domínio personalizado em vez do domínio padrão. Por exemplo, altere 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 Salvar.

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

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

    JavaScript 

    var provider = new firebase.auth.FacebookAuthProvider();

  2. Opcional: adicione escopos do OAuth. Os escopos especificam quais dados você está solicitando do Facebook. Dados mais confidenciais podem exigir escopos específicos. Consulte a documentação do provedor para determinar quais escopos são necessários para seu aplicativo.

    JavaScript 

    provider.addScope('user_birthday');

  3. Opcional: localize o fluxo de autenticação. É possível especificar uma linguagem ou usar a linguagem padrão do dispositivo:

    JavaScript 

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();

  4. Opcional: especifique outros parâmetros de OAuth personalizados. Eles são específicos do Facebook e geralmente 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.

    JavaScript 

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

  5. Use o objeto do provedor do Facebook 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 de dispositivos móveis.

    Para mostrar um pop-up, chame signInWithPopup():

    JavaScript 

    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;

    // ...
  });

    Para redirecionar a página, primeiro chame signInWithRedirect().

    Siga as práticas recomendadas ao usar signInWithRedirect, linkWithRedirect ou reauthenticateWithRedirect.

    JavaScript 

    firebase.auth().signInWithRedirect(provider);

    Em seguida, recupere o token do Facebook chamando getRedirectResult() quando a página for carregada:

    JavaScript 

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

Quando você tiver um token de acesso, poderá usá-lo para chamar a API do Facebook. Exemplo:

REST

curl "https://graph.facebook.com/me?fields=id,name&access_token=[TOKEN]"

Como fazer login manual dos usuários

Se não quiser usar o SDK do cliente, também é possível processar o fluxo de login manualmente.

Esse método de login também oferece suporte ao login do Facebook para jogos como um IdP. O Identity Platform não oferece suporte à implementação manual do login do Facebook para jogos. Ele só aceita os tokens para trocar credenciais do Identity Platform.

  1. Integre o login do Facebook ou do Facebook para a autenticação de jogos ao seu app seguindo as etapas descritas na documentação do desenvolvedor:

  2. Faça o login do usuário com o login do Facebook ou do Facebook para jogos usando o fluxo implementado na etapa anterior.

  3. Troque o token que você receber do login do Facebook ou do Facebook para Jogos por uma credencial do Identity Platform:

    JavaScript 

    var credential = firebase.auth.FacebookAuthProvider.credential(accessToken);

  4. Use a credencial para fazer login do usuário com o Identity Platform:

    JavaScript 

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

A seguir