Ir para o console

Autenticar usando o Twitter no JavaScript

Os usuários podem fazer a autenticação no Firebase com a conta do Twitter. Basta integrar essa conta ao app. Você pode integrar a autenticação do Twitter ao usar o SDK do Firebase para executar o fluxo de login ou ao executar o fluxo de OAuth do Twitter manualmente e transmitir o token de acesso e o segredo resultantes para o Firebase.

Antes de começar

  1. Adicione o Firebase ao seu projeto do JavaScript.
  2. Registre o app como aplicativo de desenvolvedor no Twitter e receba a chave de API e a chave secreta da API.
  3. Ative o login do Twitter:
    1. No Console do Firebase, abra a seção Auth.
    2. Na guia Método de login, ative o método de login do Twitter e especifique a chave de API e a chave secreta da API recebidas do Twitter.
    3. Em seguida, defina o URI de redirecionamento de OAuth do Firebase, por exemplo, my-app-12345.firebaseapp.com/__/auth/handler, como o URL de retorno de chamada na página de configurações do app do Twitter.

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 você 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 de provedor do Twitter:
    var provider = new firebase.auth.TwitterAuthProvider();
  2. Opcional: para localizar o fluxo OAuth do provedor para a linguagem preferida 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. Por exemplo:
    firebase.auth().languageCode = 'pt';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
    
  3. Opcional: especifique outros parâmetros personalizados do provedor de OAuth que você 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:
    provider.setCustomParameters({
      'lang': 'es'
    });
    
    Os parâmetros de OAuth reservados 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 de provedor do Twitter para a autenticação no Firebase. Você pode solicitar que os usuários façam login nas contas do Twitter deles em uma nova 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:
      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;
        // ...
      });
      Observe que você também pode recuperar o token de OAuth do provedor do Twitter, que pode ser usado para acessar dados adicionais usando as APIs do Twitter.

      Também é nesse local que você poderá identificar e solucionar erros. Para ver uma lista de códigos de erro, consulte os Documentos de referência de autenticação.

    • Para redirecionar os usuários para a página de login, chame signInWithRedirect:
      firebase.auth().signInWithRedirect(provider);
      Em seguida, você também pode recuperar o token de OAuth do provedor do Twitter. Basta chamar getRedirectResult quando sua página carregar:
      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;
        // ...
      });
      Também é nesse local que você poderá identificar e solucionar 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

Você também pode usar uma conta do Twitter para a autenticação no Firebase. Basta processar o fluxo de login com uma chamada dos pontos de extremidade do OAuth do Twitter:

  1. Para integrar a autenticação do Twitter ao seu app, siga as instruções da documentação do desenvolvedor. No final do fluxo de login do Twitter, você receberá um token de acesso e um segredo OAuth.
  2. Se você precisar fazer login em um aplicativo Node.js, envie o token de acesso e o segredo OAuth para o aplicativo Node.js.
  3. Depois que um usuário se conectar com o Twitter, troque o token de acesso e o segredo OAuth por uma credencial do Firebase:
    var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
    
  4. Use a credencial do Firebase para fazer a autenticação:
    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;
      // ...
    });

Autenticar com Firebase em uma Extensão do Chrome

Se você estiver criando um app de Extensão do Chrome, coloque o código da extensão na lista de permissões:

  1. Abra seu projeto no Firebase console.
  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 e linkWithPopup) estão disponíveis para as Extensões do Chrome. Isso ocorre porque as extensões não podem usar redirecionamentos HTTP. Chame esses métodos a partir de um script em segundo plano porque, se usar o pop-up de ação do navegador, ele será cancelado pelo pop-up de autenticação.

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 é 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. Ela pode ser usada para identificar um usuário em todos os apps do projeto, independentemente do método de login usado.

  • Nos seus apps, a maneira recomendada para descobrir o status de autenticação do usuário é definir um observador no objeto Auth. Você pode coletar as informações básicas do 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 usar a variável auth para encontrar o código exclusivo do usuário conectado. Use essa informação para controlar os dados que os usuários podem 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:

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