Catch up on everything we announced at this year's Firebase Summit. Learn more

Autenticar usando o Twitter em JavaScript

Permita que os usuários se autentiquem com o Firebase usando contas do Twitter ao integrar a autenticação do Twitter ao seu app. Integre a autenticação do Twitter usando o SDK do Firebase para realizar o fluxo de login ou executando manualmente o fluxo do OAuth do Twitter e enviando o token de acesso e o secret resultantes ao Firebase.

Antes de começar

  1. Adicione o Firebase ao seu projeto em JavaScript.
  2. No Console do Firebase, abra a seção Auth.
  3. Na guia Método de login, ative o provedor Twitter.
  4. Adicione a chave de API e a chave secreta da API do console de desenvolvimento do provedor à configuração correspondente:
    1. Registre o app como um aplicativo de desenvolvedor no Twitter e receba a chave de API e a chave secreta da API do OAuth 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 retorno de chamada de autorização na página de configurações do app no Twitter.
  5. 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 Twitter é 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:

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

    Versão 9 para a Web

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

    Versão 8 para a Web

    var provider = new firebase.auth.TwitterAuthProvider();
  2. Opcional: para localizar o fluxo de OAuth do provedor no idioma preferido do usuário sem transmitir explicitamente os parâmetros de OAuth personalizados e relevantes, atualize o código do idioma na instância de Auth antes de iniciar o fluxo de OAuth. Exemplo:

    Versão 9 para a Web

    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();

    Versão 8 para a Web

    firebase.auth().languageCode = 'it';
    // 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 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:

    Versão 9 para a Web

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

    Versão 8 para a Web

    provider.setCustomParameters({
      'lang': 'es'
    });
    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.
  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:

      Versão 9 para a Web

      import { getAuth, signInWithPopup, TwitterAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      signInWithPopup(auth, provider)
        .then((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.
          const credential = TwitterAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          const secret = credential.secret;
      
          // The signed-in user info.
          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.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      Versão 8 para a Web

      firebase
        .auth()
        .signInWithPopup(provider)
        .then((result) => {
          /** @type {firebase.auth.OAuthCredential} */
          var credential = 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 = credential.accessToken;
          var secret = credential.secret;
      
          // 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 é possível recuperar o token de OAuth do provedor do Twitter, que pode ser usado para buscar dados adicionais usando as APIs do Twitter.

      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:

      Versão 9 para a Web

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

      Versão 8 para a Web

      firebase.auth().signInWithRedirect(provider);
      Em seguida, também é possível recuperar o token de OAuth do provedor do Twitter. Basta chamar getRedirectResult quando sua página carregar:

      Versão 9 para a Web

      import { getAuth, getRedirectResult, TwitterAuthProvider } from "firebase/auth";
      
      const auth = getAuth();
      getRedirectResult(auth)
        .then((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.
          const credential = TwitterAuthProvider.credentialFromResult(result);
          const token = credential.accessToken;
          const secret = credential.secret;
          // ...
      
          // The signed-in user info.
          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.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      Versão 8 para a Web

      firebase.auth()
        .getRedirectResult()
        .then((result) => {
          if (result.credential) {
            /** @type {firebase.auth.OAuthCredential} */
            var credential = 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 = credential.accessToken;
            var secret = credential.secret;
            // ...
          }
      
          // 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.

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 endpoints 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 uma chave secreta OAuth.
  2. Se você precisar fazer login em um aplicativo Node.js, envie o token de acesso e a chave secreta OAuth para o aplicativo Node.js.
  3. Depois que um usuário se conectar com o Twitter, troque o token de acesso e chave secreta 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:

    Versão 9 para a Web

    import { getAuth, signInWithCredential, FacebookAuthProvider } from "firebase/auth";
    
    // Sign in with the credential from the Facebook user.
    const auth = getAuth();
    signInWithCredential(auth, credential)
      .then((result) => {
        // Signed in
        const credential = FacebookAuthProvider.credentialFromResult(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.email;
        // The AuthCredential type that was used.
        const credential = FacebookAuthProvider.credentialFromError(error);
        // ...
      });

    Versão 8 para a Web

    // Sign in with the credential from the Facebook user.
    firebase.auth().signInWithCredential(credential)
      .then((result) => {
        // Signed in
        var credential = result.credential;
        // ...
      })
      .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;
        // ...
      });

Fazer autenticação com o 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 uma 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, é possível receber 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:

Versão 9 para a Web

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

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

Versão 8 para a Web

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