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

Autenticar usando o Twitter em JavaScript

Você pode permitir que seus usuários se autentiquem com o Firebase usando suas contas do Twitter integrando a autenticação do Twitter ao seu aplicativo. Você pode integrar a autenticação do Twitter usando o SDK do Firebase para executar o fluxo de login ou executando o fluxo OAuth do Twitter manualmente e passando o token de acesso e o segredo resultantes para o Firebase.

Antes de você começar

  1. Adicione o Firebase ao seu projeto JavaScript .
  2. No console do Firebase , abra a seção Auth .
  3. Na guia Método de login , habilite o provedor do Twitter .
  4. Adicione a chave de API e o segredo de API do console do desenvolvedor desse provedor à configuração do provedor:
    1. Registre seu aplicativo como um aplicativo de desenvolvedor no Twitter e obtenha a chave de API OAuth e o segredo de API do seu aplicativo.
    2. Certifique-se de que seu URI de redirecionamento Firebase OAuth (por exemplo my-app-12345.firebaseapp.com/__/auth/handler ) esteja definido como seu URL de retorno de chamada de autorização na página de configurações do aplicativo no config do aplicativo do Twitter .
  5. Clique em Salvar .

Lide com o fluxo de login com o Firebase SDK

Se você estiver criando um aplicativo da Web, a maneira mais fácil de autenticar seus usuários com o Firebase usando suas contas do Twitter é lidar com o fluxo de login com o Firebase JavaScript SDK. (Se você deseja autenticar um usuário no Node.js ou outro ambiente sem navegador, deve manipular o fluxo de login manualmente.)

Para lidar com o fluxo de login com o Firebase JavaScript SDK, siga estas etapas:

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

    Web version 9

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

    Web version 8

    var provider = new firebase.auth.TwitterAuthProvider();
  2. Opcional : para localizar o fluxo OAuth do provedor para o idioma preferido do usuário sem passar explicitamente os parâmetros OAuth customizados relevantes, atualize o código do idioma na instância Auth antes de iniciar o fluxo OAuth. Por 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();
  3. Opcional : especifique parâmetros de provedor OAuth customizados adicionais que você deseja enviar com a solicitação OAuth. Para adicionar um parâmetro personalizado, chame setCustomParameters no provedor inicializado com um objeto contendo a chave conforme especificado pela documentação do provedor OAuth e o valor correspondente. Por exemplo:

    Web version 9

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

    Web version 8

    provider.setCustomParameters({
      'lang': 'es'
    });
    Os parâmetros OAuth obrigatórios reservados não são permitidos e serão ignorados. Consulte a referência do provedor de autenticação para obter mais detalhes.
  4. Autentique-se com o Firebase usando o objeto de provedor do Twitter. Você pode solicitar que seus usuários façam login com suas contas do Twitter abrindo uma janela pop-up ou redirecionando para a página de login. O método de redirecionamento é preferido em dispositivos móveis.
    • Para entrar com uma janela pop-up, chame signInWithPopup :

      Web version 9

      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;
          // IdP data available using getAdditionalUserInfo(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.customData.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.credentialFromError(error);
          // ...
        });

      Web version 8

      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;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
        }).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;
          // ...
        });
      Observe também que você pode recuperar o token OAuth do provedor do Twitter, que pode ser usado para buscar dados adicionais usando as APIs do Twitter.

      Também é aqui que você pode detectar e manipular erros. Para obter uma lista de códigos de erro, consulte os Documentos de referência de autenticação .

    • Para fazer login redirecionando para a página de login, chame signInWithRedirect : Siga as práticas recomendadas ao usar `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 OAuth do provedor do Twitter chamando getRedirectResult quando a página for carregada:

      Web version 9

      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;
          // IdP data available using getAdditionalUserInfo(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.customData.email;
          // The AuthCredential type that was used.
          const credential = TwitterAuthProvider.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 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;
          // IdP data available in result.additionalUserInfo.profile.
            // ...
        }).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 é aqui que você pode detectar e manipular erros. Para obter uma lista de códigos de erro, consulte os Documentos de referência de autenticação .

Lidar com o fluxo de login manualmente

Você também pode autenticar com o Firebase usando uma conta do Twitter manipulando o fluxo de login chamando os endpoints OAuth do Twitter:

  1. Integre a autenticação do Twitter em seu aplicativo seguindo a documentação do desenvolvedor . Ao final do fluxo de login do Twitter, você receberá um token de acesso OAuth e um segredo OAuth.
  2. Se precisar entrar em um aplicativo Node.js, envie o token de acesso OAuth e o segredo OAuth para o aplicativo Node.js.
  3. Depois que um usuário fizer login com sucesso no Twitter, troque o token de acesso OAuth e o segredo OAuth por uma credencial do Firebase:
    var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
    
  4. Autentique-se com o Firebase usando a credencial do Firebase:

    Web version 9

    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.customData.email;
        // The AuthCredential type that was used.
        const credential = FacebookAuthProvider.credentialFromError(error);
        // ...
      });

    Web version 8

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

Autenticar com o Firebase em uma extensão do Chrome

Se você estiver criando um aplicativo de extensão do Chrome, deverá adicionar seu ID de extensão do Chrome:

  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 operações pop-up ( signInWithPopup , linkWithPopup e reauthenticateWithPopup ) estão disponíveis para extensões do Chrome, pois as extensões do Chrome não podem usar redirecionamentos HTTP. Você deve chamar esses métodos a partir de um script de página em segundo plano em vez de um pop-up de ação do navegador, pois o pop-up de autenticação cancelará o pop-up de ação do navegador. Os métodos popup só podem ser usados ​​em extensões usando o Manifest V2 . O Manifest V3 mais recente permite apenas scripts em segundo plano na forma de service workers, que não podem executar as operações pop-up.

No arquivo de manifesto de sua extensão do Chrome, certifique-se de adicionar o URL https://apis.google.com à lista de permissões content_security_policy .

Próximos passos

Depois que um usuário faz login pela primeira vez, uma nova conta de usuário é criada e vinculada às credenciais — ou seja, nome de usuário e senha, número de telefone ou informações do provedor de autenticação — com as quais o usuário fez login. Essa nova conta é armazenada como parte do seu projeto do Firebase e pode ser usada para identificar um usuário em todos os aplicativos do seu projeto, independentemente de como o usuário faz login.

  • Em seus aplicativos, a maneira recomendada de saber o status de autenticação de seu usuário é definir um observador no objeto Auth . Você pode obter as informações básicas do perfil do User no objeto Usuário. Consulte Gerenciar usuários .

  • Nas regras de segurança do Firebase Realtime Database e Cloud Storage , você pode obter o ID de usuário exclusivo do usuário conectado a partir da variável de auth e usá-lo para controlar quais dados um usuário pode acessar.

Você pode permitir que os usuários façam login em seu aplicativo usando vários provedores de autenticação vinculando as credenciais do provedor de autenticação a uma conta de usuário existente.

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