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

Adicione o Firebase ao seu projeto em JavaScript.
No Console do Firebase, abra a seção Auth.
Na guia Método de login, ative o provedor Twitter.
Adicione a chave de API e a chave secreta da API do console de desenvolvimento do provedor à configuração dele:
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.
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:

Crie uma instância do objeto de provedor do Twitter:
API modular da Web

Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.
```
import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();auth_twitter_provider_create.js
```
API com namespace da Web
```
var provider = new firebase.auth.TwitterAuthProvider();twitter.js
```
Opcional: para localizar o fluxo de OAuth do provedor para o idioma preferido do usuário sem transmitir 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. Exemplo:
API modular da Web

Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.
```
import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();auth_set_language_code.js
```
API com namespace da Web
```
firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js
```
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:
API modular da Web

Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.
```
provider.setCustomParameters({
  'lang': 'es'
});auth_twitter_provider_params.js
```
API com namespace da Web
```
provider.setCustomParameters({
  'lang': 'es'
});twitter.js
```
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.

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:

API modular da 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;
    // 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);
    // ...
  });auth_twitter_signin_popup.js

API com namespace da 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;
    // 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;
    // ...
  });twitter.js

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 é aqui que você identifica e corrige erros. Para conferir 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: siga as práticas recomendadas ao usar "signInWithRedirect".

API modular da Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);auth_signin_redirect.js

API com namespace da Web

firebase.auth().signInWithRedirect(provider);index.js

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

API modular da 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;
    // 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);
    // ...
  });auth_twitter_signin_redirect_result.js

API com namespace da 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;
    // 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;
    // ...
  });twitter.js

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

Tratamento de erros account-exists-with-different-credential

Se você ativou a configuração Uma conta por endereço de e-mail no Console do Firebase, quando um usuário tentar se conectar a um provedor (como o Twitter) com um e-mail que já existe em outro provedor de usuário do Firebase (como o Google), o erro auth/account-exists-with-different-credential será exibido com um objeto AuthCredential (token e chave secreta OAuth do Twitter). Para concluir o login no provedor pretendido, primeiro o usuário deverá fazer login no provedor existente (Google) e, então, vinculá-lo ao AuthCredential anterior (token e chave secreta de OAuth do Twitter).

Se você usar signInWithPopup, poderá corrigir erros auth/account-exists-with-different-credential utilizando código, como o do exemplo a seguir:


// Step 1.
// User tries to sign in to Twitter.
auth.signInWithPopup(new firebase.auth.TwitterAuthProvider()).catch(function(error) {
  // An error happened.
  if (error.code === 'auth/account-exists-with-different-credential') {
    // Step 2.
    // User's email already exists.
    // The pending Twitter credential.
    var pendingCred = error.credential;
    // The provider account's email address.
    var email = error.email;
    // Get sign-in methods for this email.
    auth.fetchSignInMethodsForEmail(email).then(function(methods) {
      // Step 3.
      // If the user has several sign-in methods,
      // the first method in the list will be the "recommended" method to use.
      if (methods[0] === 'password') {
        // Asks the user their password.
        // In real scenario, you should handle this asynchronously.
        var password = promptUserForPassword(); // TODO: implement promptUserForPassword.
        auth.signInWithEmailAndPassword(email, password).then(function(result) {
          // Step 4a.
          return result.user.linkWithCredential(pendingCred);
        }).then(function() {
          // Twitter account successfully linked to the existing Firebase user.
          goToApp();
        });
        return;
      }
      // All the other cases are external providers.
      // Construct provider object for that provider.
      // TODO: implement getProviderForProviderId.
      var provider = getProviderForProviderId(methods[0]);
      // At this point, you should let the user know that they already have an account
      // but with a different provider, and let them validate the fact they want to
      // sign in with this provider.
      // Sign in to provider. Note: browsers usually block popup triggered asynchronously,
      // so in real scenario you should ask the user to click on a "continue" button
      // that will trigger the signInWithPopup.
      auth.signInWithPopup(provider).then(function(result) {
        // Remember that the user may have signed in with an account that has a different email
        // address than the first one. This can happen as Firebase doesn't control the provider's
        // sign in flow and the user is free to login using whichever account they own.
        // Step 4b.
        // Link to Twitter credential.
        // As we have access to the pending credential, we can directly call the link method.
        result.user.linkAndRetrieveDataWithCredential(pendingCred).then(function(usercred) {
          // Twitter account successfully linked to the existing Firebase user.
          goToApp();
        });
      });
    });
  }
});

Modo de redirecionamento

A correção desse erro é similar no modo de redirecionamento. No entanto, nele, as credenciais pendentes devem ser armazenadas em cache entre os redirecionamentos das páginas usando, por exemplo, o armazenamento de sessã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 para os endpoints do OAuth do Twitter:

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

Use a credencial do Firebase para fazer a autenticação:

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

API com namespace da 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;
    // ...
  });facebook.js

Autenticar com 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:

Abra seu projeto no Console do Firebase.
Na seção Autenticação, abra a página Método de login.
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 HTTP. Chame esses métodos usando um script de 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.

Ao criar o projeto, o Firebase vai provisionar um subdomínio exclusivo para ele: https://my-app-12345.firebaseapp.com.

Esse subdomínio também será usado como mecanismo de redirecionamento para o login do OAuth. Esse domínio precisaria ter permissão para todos os provedores OAuth com suporte. No entanto, isso significa que os usuários podem ver esse domínio ao entrarem no Twitter, antes de serem redirecionados para o aplicativo: Prossiga para: https://my-app-12345.firebaseapp.com

Para evitar a exibição do subdomínio, configure um domínio personalizado com o Firebase Hosting:

Siga as etapas de 1 a 3 em Configurar o domínio para o Hosting. Quando você verifica a propriedade do domínio, o Hosting provisiona um certificado SSL para o domínio personalizado.
Adicione o domínio personalizado à lista de domínios autorizados no Console do Firebase: auth.custom.domain.com.
Na página de configuração do OAuth ou no console do desenvolvedor do Twitter, coloque na lista de permissões o URL da página de redirecionamento, que ficará acessível no seu domínio personalizado: https://auth.custom.domain.com/__/auth/handler.

Ao inicializar a biblioteca do JavaScript, especifique seu domínio personalizado com o campo authDomain:

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

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 uma pessoa 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:

API modular da Web

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

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

API com namespace da Web

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

Autenticar usando o Twitter em JavaScript

Antes de começar

Processar o fluxo de login com o SDK do Firebase

API modular da Web

API com namespace da Web

API modular da Web

API com namespace da Web

API modular da Web

API com namespace da Web

API modular da Web

API com namespace da Web

API modular da Web

API com namespace da Web

API modular da Web

API com namespace da Web

Tratamento de erros account-exists-with-different-credential

Modo de pop-up

Modo de redirecionamento

Processar o fluxo de login manualmente

API modular da Web

API com namespace da Web

Autenticar com Firebase em uma extensão do Chrome

Personalizar o domínio de redirecionamento para o login do Twitter

Próximas etapas

API modular da Web

API com namespace da Web