Autentica con Twitter en JavaScript

Puedes permitir que tus usuarios se autentiquen con Firebase mediante sus cuentas de Twitter si integras la autenticación de Twitter en tu app. Puedes hacerlo si usas el SDK de Firebase para ejecutar el flujo de acceso o si ejecutas el flujo de OAuth de Twitter de forma manual y pasas el token de acceso y el secreto resultantes a Firebase.

Antes de comenzar

Agrega Firebase al proyecto de JavaScript.
En Firebase console, abre la sección Auth.
En la pestaña Método de acceso, habilita el proveedor Twitter.
Agrega a la configuración del proveedor la clave de API y el secreto de API de la consola para desarrolladores del proveedor:
1. Registra tu app como una aplicación de desarrollador en Twitter y obtén la clave de API y el secreto de API de OAuth correspondientes.
2. Asegúrate de que tu URI de redireccionamiento de OAuth de Firebase (p. ej., my-app-12345.firebaseapp.com/__/auth/handler) esté configurado como URL de devolución de llamada de autorización en la página de configuración de tu app en Twitter.
Haz clic en Guardar.

Maneja el flujo de acceso con el SDK de Firebase

Si estás compilando una app web, la manera más fácil de autenticar a tus usuarios en Firebase con sus cuentas de Twitter es administrar el flujo de acceso con el SDK de Firebase JavaScript. Si deseas autenticar a un usuario en Node.js o en cualquier otro entorno que no sea de un navegador, debes manejar el flujo de acceso de forma manual.

Para manejar el flujo de acceso con el SDK de Firebase JavaScript, sigue estos pasos:

Crea una instancia del objeto de proveedor de Twitter:
API modular web

Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.
```
import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();auth_twitter_provider_create.js
```
API con espacio de nombres web
```
var provider = new firebase.auth.TwitterAuthProvider();twitter.js
```
Opcional: Para ajustar el flujo de OAuth del proveedor según el idioma de preferencia del usuario sin pasar de forma explícita los parámetros OAuth personalizados pertinentes, actualiza el código de idioma en la instancia Auth antes de iniciar el flujo de OAuth. Por ejemplo:
API modular web

Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.
```
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 con espacio de nombres web
```
firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js
```
Opcional: Especifica los parámetros personalizados adicionales del proveedor de OAuth que quieres enviar junto con la solicitud de OAuth. Para agregar un parámetro personalizado, llama a setCustomParameters en el proveedor inicializado con un objeto que contenga la clave que se indica en la documentación del proveedor de OAuth y su valor correspondiente. Por ejemplo:
API modular web

Obtén más información sobre la API modular web que admite la eliminación de código no utilizado y realiza la actualización desde la API con espacio de nombres.
```
provider.setCustomParameters({
  'lang': 'es'
});auth_twitter_provider_params.js
```
API con espacio de nombres web
```
provider.setCustomParameters({
  'lang': 'es'
});twitter.js
```
No se permiten los parámetros de OAuth necesarios reservados y se omitirán. Consulta la referencia del proveedor de autenticación para obtener más información.

Autentica con Firebase y con el objeto de proveedor de Twitter. Para que tus usuarios accedan con sus cuentas de Twitter, puedes abrir una ventana emergente o redireccionarlos a la página de acceso. En dispositivos móviles, se prefiere el método de redireccionamiento.

Para acceder con una ventana emergente, llama a signInWithPopup:

API modular 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 con espacio de nombres 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

Además, ten en cuenta que puedes recuperar el token de OAuth del proveedor de Twitter que se puede usar para recuperar datos adicionales con las API de Twitter.

Aquí también puedes detectar y resolver errores. Para obtener una lista de códigos de error, consulta los documentos de referencia de autenticación.

Para acceder mediante el redireccionamiento a la página de acceso, llama a signInWithRedirect: Sigue las prácticas recomendadas cuando uses “signInWithRedirect”.

API modular web

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

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

API con espacio de nombres web

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

Luego, para recuperar el token de OAuth del proveedor de Twitter, puedes llamar a getRedirectResult cuando cargue tu página:

API modular 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 con espacio de nombres 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

Aquí también puedes detectar y resolver errores. Para obtener una lista de códigos de error, consulta los documentos de referencia de autenticación.

Maneja errores de cuentas que ya existen con otras credenciales

Si habilitaste el parámetro de configuración Una cuenta por dirección de correo electrónico en Firebase console, aparecerá el error auth/account-exists-with-different-credential junto con un objeto AuthCredential (el token y el secreto de OAuth de Twitter) cuando un usuario trate de acceder a un proveedor (como Twitter) con un correo electrónico que ya está vinculado al proveedor de otro usuario de Firebase (como Google). Para completar el acceso al proveedor deseado, el usuario debe acceder primero al proveedor existente (Google) y, luego, establecer el vínculo a la AuthCredential anterior (el token y el secreto de OAuth de Twitter).

Si usas signInWithPopup, puedes manejar los errores auth/account-exists-with-different-credential con un código como el siguiente:


// 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 redireccionamiento

Este error se maneja de manera similar en el modo de redireccionamiento, con la diferencia de que la credencial pendiente debe almacenarse en la caché entre las acciones de redireccionamiento de páginas (por ejemplo, mediante almacenamiento de sesión).

Maneja el flujo de acceso de manera manual

También puedes autenticar con Firebase mediante una cuenta de Twitter. Para esto, debes llamar a los extremos de OAuth de Twitter a fin de administrar el flujo de acceso:

Sigue las indicaciones que aparecen en la documentación para desarrolladores a fin de integrar la autenticación de Twitter en la app. Al final del flujo de acceso de Twitter, recibirás un secreto y un token de acceso de OAuth.
Si necesitas acceder en una aplicación de Node.js, envía el token de acceso y el secreto de OAuth a la app de Node.js.
Una vez que un usuario acceda de forma correcta con Twitter, intercambia el token de acceso de OAuth y el secreto de OAuth por una credencial de Firebase:
```
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
```

Usa la credencial de Firebase para autenticar con Firebase:

API modular 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 con espacio de nombres 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

Autentica con Firebase en una extensión de Chrome

Si desarrollas una app de extensión de Chrome, debes agregar el ID de la extensión de Chrome:

Abre tu proyecto en Firebase console.
En la sección Authentication, abre la página Sign-in method.
Agrega un URI como el siguiente a la lista de dominios autorizados:
```
chrome-extension://CHROME_EXTENSION_ID
```

Solo las operaciones con ventanas emergentes (signInWithPopup, linkWithPopup y reauthenticateWithPopup) están disponibles para las extensiones de Chrome, ya que estas no pueden usar redireccionamientos HTTP. Deberías llamar a estos métodos desde una página de secuencia de comandos en segundo plano en lugar de una ventana emergente de acción en el navegador, ya que la ventana emergente de autenticación cancela la de acción del navegador. Los métodos de ventana emergente solo se pueden usar en extensiones con Manifest V2. El Manifest V3 más reciente solo permite secuencias de comandos en segundo plano en forma de service workers, que no pueden realizar operaciones de ventana emergente.

En el archivo de manifiesto de tu extensión de Chrome, asegúrate de agregar la URL https://apis.google.com a la lista de entidades permitidas content_security_policy.

Cuando crees un proyecto, Firebase le otorgará un subdominio único: https://my-app-12345.firebaseapp.com.

También se usará como mecanismo de redireccionamiento para el acceso con OAuth. Todos los proveedores de OAuth admitidos deberían permitir el dominio. Sin embargo, es posible que los usuarios vean ese dominio cuando accedan a Twitter antes de que se los redireccione a la aplicación; p. ej.: Continuar a https://my-app-12345.firebaseapp.com.

Para evitar que se muestre el subdominio, puedes configurar un dominio personalizado con Firebase Hosting de la siguiente manera:

Sigue los pasos 1 a 3 de Configura tu dominio para Hosting. Cuando verificas la propiedad de tu dominio, Hosting aprovisiona un certificado SSL para el dominio personalizado.
Agrega tu dominio personalizado a la lista de dominios autorizados en Firebase console: auth.custom.domain.com.
En la consola para desarrolladores de Twitter o en la página de configuración de OAuth, incluye en la lista de entidades permitidas la URL de la página de redireccionamiento a la que se podrá acceder en tu dominio personalizado: https://auth.custom.domain.com/__/auth/handler.

Cuando inicialices la biblioteca JavaScript, especifica el dominio personalizado en el 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óximos pasos

Cuando un usuario accede por primera vez, se crea una cuenta de usuario nueva y se la vincula con las credenciales (el nombre de usuario y la contraseña, el número de teléfono o la información del proveedor de autenticación) que el usuario utilizó para acceder. Esta cuenta nueva se almacena como parte de tu proyecto de Firebase y se puede usar para identificar a un usuario en todas las apps del proyecto, sin importar cómo acceda.

En tus apps, para conocer el estado de autenticación del usuario, te recomendamos configurar un observador en el objeto Auth. Luego podrás obtener la información de perfil básica del usuario a partir del objeto User. Consulta Administra usuarios en Firebase.
En tus reglas de seguridad de Firebase Realtime Database y Cloud Storage, a partir de la variable auth, puedes obtener el ID del usuario único que accedió y usarlo para controlar a qué datos podrá acceder.

Para permitir que los usuarios accedan a la app con varios proveedores de autenticación, puedes vincular las credenciales de estos proveedores con una cuenta de usuario existente.

Para hacer que un usuario salga de la sesión, llama a signOut de la siguiente manera:

API modular 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 con espacio de nombres web

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

Autentica con Twitter en JavaScript

Antes de comenzar

Maneja el flujo de acceso con el SDK de Firebase

API modular web

API con espacio de nombres web

API modular web

API con espacio de nombres web

API modular web

API con espacio de nombres web

API modular web

API con espacio de nombres web

API modular web

API con espacio de nombres web

API modular web

API con espacio de nombres web

Maneja errores de cuentas que ya existen con otras credenciales

Modo de ventanas emergentes

Modo de redireccionamiento

Maneja el flujo de acceso de manera manual

API modular web

API con espacio de nombres web

Autentica con Firebase en una extensión de Chrome

Personaliza el dominio de redireccionamiento para el acceso con Twitter

Próximos pasos

API modular web

API con espacio de nombres web