Como fazer login de usuários com o Twitter

Este documento mostra como usar o Identity Platform para fazer login de usuários com o Twitter.

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

Para configurar o Twitter como um provedor de identidade:

  1. Acesse a página Provedores do Identity Platform no Console do Cloud.

    Acessar a página "Provedores do Identity Platform"

  2. Clique em Adicionar um provedor.

  3. Selecione Twitter na lista.

  4. Digite o ID do aplicativo e o secret do aplicativo do Twitter. Se você ainda não tiver um ID e um secret, poderá conseguir na página Aplicativos do Twitter.

  5. Configure o URI listado em Configurar o Twitter como um URI de redirecionamento OAuth válido para seu aplicativo do Twitter.

  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 Save.

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

  1. Crie uma instância do objeto de provedor do Twitter:

    JavaScript

    var provider = new firebase.auth.TwitterAuthProvider();
  1. Opcional: localize o fluxo de autenticação. É possível especificar uma linguagem ou usar a linguagem padrão do dispositivo:

    JavaScript

    firebase.auth().languageCode = 'fr_FR';
    // To apply the default browser preference instead of
    // explicitly setting it.
    // firebase.auth().useDeviceLanguage();
    
  2. Opcional: especifique outros parâmetros de OAuth personalizados. Eles são específicos para o Twitter e normalmente são usados para personalizar a experiência de autenticação.

    JavaScript

    provider.setCustomParameters({
      'lang': 'es'
    });
    

    Não é possível transmitir parâmetros reservados pelo OAuth ou pelo Identity Platform.

  3. Use o objeto do provedor do Twitter para fazer login do usuário. É possível abrir uma janela pop-up ou redirecionar a página atual. O redirecionamento é mais fácil para usuários em dispositivos móveis.

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

    JavaScript

    firebase.auth().signInWithPopup(provider).then(function(result) {
      // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
      // You can use these server side with your app's credentials to access the Twitter API.
      var token = result.credential.accessToken;
      var secret = result.credential.secret;
      // The signed-in user info.
      var user = result.user;
      // ...
    }).catch(function(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():

    JavaScript

    firebase.auth().signInWithRedirect(provider);

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

    JavaScript

    firebase.auth().getRedirectResult().then(function(result) {
      if (result.credential) {
        // This gives you a the Twitter OAuth 1.0 Access Token and Secret.
        // You can use these server side with your app's credentials to access the Twitter API.
        var token = result.credential.accessToken;
        var secret = result.credential.secret;
        // ...
      }
      // The signed-in user info.
      var user = result.user;
    }).catch(function(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 Twitter. Exemplo:

REST

curl --request POST
  --url 'https://api.twitter.com/1.1/statuses/update.json?status=Hello%20world'
  --header 'authorization: OAuth oauth_consumer_key="CONSUMER_API_KEY",
  oauth_nonce="OAUTH_NONCE", oauth_signature="OAUTH_SIGNATURE",
  oauth_signature_method="HMAC-SHA1", oauth_timestamp="OAUTH_TIMESTAMP",
  oauth_token="ACCESS_TOKEN", oauth_version="1.0"'

Como fazer login manual dos usuários

Se você não quiser usar o SDK do cliente, também poderá processar o fluxo de login manualmente:

  1. Integre a autenticação do Twitter ao seu aplicativo seguindo as etapas na documentação do desenvolvedor.

  2. Faça login no usuário com o Twitter usando o fluxo que você implementou na etapa anterior.

  3. Troque o token que você recebeu do Twitter por uma credencial do Identity Platform:

    var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
    
  4. Use a credencial para fazer login do usuário com o Identity Platform:

    firebase.auth().signInWithCredential(credential).catch(function(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;
      // ...
    });
    

A seguir