Esta página se ha traducido con Cloud Translation API.

Autenticar usando Twitter en JavaScript

Puedes permitir que tus usuarios se autentiquen con Firebase usando sus cuentas de Twitter integrando la autenticación de Twitter en tu aplicación. Puede integrar la autenticación de Twitter utilizando el SDK de Firebase para llevar a cabo el flujo de inicio de sesión o realizando el flujo de Twitter OAuth manualmente y pasando el token de acceso resultante y el secreto a Firebase.

Antes de que empieces

Agrega Firebase a tu proyecto de JavaScript .
En Firebase console , abre la sección Auth .
En la pestaña Método de inicio de sesión , habilite el proveedor de Twitter .
Agregue la clave API y el secreto API desde la consola de desarrollador de ese proveedor a la configuración del proveedor:
1. Registre su aplicación como aplicación de desarrollador en Twitter y obtenga la clave API de OAuth y el secreto de API de su aplicación.
2. Asegúrese de que su URI de redireccionamiento de Firebase OAuth (por ejemplo, my-app-12345.firebaseapp.com/__/auth/handler ) esté configurado como su URL de devolución de llamada de autorización en la página de configuración de su aplicación en la configuración de su aplicación de Twitter .
Clic en Guardar .

Maneja el flujo de inicio de sesión con el SDK de Firebase

Si está creando una aplicación web, la forma más sencilla de autenticar a sus usuarios con Firebase utilizando sus cuentas de Twitter es manejar el flujo de inicio de sesión con el SDK de JavaScript de Firebase. (Si desea autenticar a un usuario en Node.js u otro entorno que no sea un navegador, debe controlar el flujo de inicio de sesión manualmente).

Para manejar el flujo de inicio de sesión con el SDK de JavaScript de Firebase, sigue estos pasos:

Cree una instancia del objeto proveedor de Twitter:
Web modular API
Obtenga más información sobre la API web modular que se puede sacudir en árbol y actualice desde la API con espacio de nombres.
```
import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();auth_twitter_provider_create.js
```
Web namespaced API
```
var provider = new firebase.auth.TwitterAuthProvider();twitter.js
```
Opcional : para localizar el flujo de OAuth del proveedor al idioma preferido del usuario sin pasar explícitamente los parámetros personalizados de OAuth relevantes, actualice el código de idioma en la instancia de Auth antes de iniciar el flujo de OAuth. Por ejemplo:
Web modular API
Obtenga más información sobre la API web modular que se puede sacudir en árbol y actualice 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
```
Web namespaced API
```
firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js
```
Opcional : especifique parámetros de proveedor de OAuth personalizados adicionales que desee enviar con la solicitud de OAuth. Para agregar un parámetro personalizado, llame a setCustomParameters en el proveedor inicializado con un objeto que contenga la clave especificada en la documentación del proveedor de OAuth y el valor correspondiente. Por ejemplo:
Web modular API
Obtenga más información sobre la API web modular que se puede sacudir en árbol y actualice desde la API con espacio de nombres.
```
provider.setCustomParameters({
  'lang': 'es'
});auth_twitter_provider_params.js
```
Web namespaced API
```
provider.setCustomParameters({
  'lang': 'es'
});twitter.js
```
Los parámetros OAuth requeridos reservados no están permitidos y se ignorarán. Consulte la referencia del proveedor de autenticación para obtener más detalles.

Autenticarse con Firebase utilizando el objeto proveedor de Twitter. Puede solicitar a sus usuarios que inicien sesión con sus cuentas de Twitter abriendo una ventana emergente o redirigiéndolos a la página de inicio de sesión. Se prefiere el método de redireccionamiento en dispositivos móviles.

Para iniciar sesión con una ventana emergente, llame signInWithPopup :

Web modular API

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

Web namespaced API

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

Tenga en cuenta también que puede recuperar el token OAuth del proveedor de Twitter que se puede utilizar para obtener datos adicionales mediante las API de Twitter.

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

Para iniciar sesión redirigiendo a la página de inicio de sesión, llame a signInWithRedirect : siga las mejores prácticas al usar `signInWithRedirect`.

Web modular API

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

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

Web namespaced API

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

Luego, también puedes recuperar el token OAuth del proveedor de Twitter llamando getRedirectResult cuando se carga tu página:

Web modular API

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

Web namespaced API

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 es donde puedes detectar y manejar errores. Para obtener una lista de códigos de error, consulte los documentos de referencia de autenticación .

Manejo de errores de cuenta-existe-con-credencial-diferente

Si habilitó la configuración Una cuenta por dirección de correo electrónico en Firebase console , cuando un usuario intenta iniciar sesión en un proveedor (como Twitter) con un correo electrónico que ya existe para el proveedor de otro usuario de Firebase (como Google), aparecerá el error. auth/account-exists-with-different-credential se lanza junto con un objeto AuthCredential (token y secreto de Twitter oauth). Para completar el inicio de sesión con el proveedor deseado, el usuario debe iniciar sesión primero con el proveedor existente (Google) y luego vincularse a la anterior AuthCredential (token y secreto de Twitter oauth).

Si usa signInWithPopup , puede manejar errores auth/account-exists-with-different-credential con código como el siguiente ejemplo:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  TwitterAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Twitter.
  let result = await signInWithPopup(getAuth(), new TwitterAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Twitter credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Twitter credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

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 caché entre redireccionamientos de página (por ejemplo, usando el almacenamiento de sesión).

Manejar el flujo de inicio de sesión manualmente

También puedes autenticarte con Firebase usando una cuenta de Twitter manejando el flujo de inicio de sesión llamando a los puntos finales de OAuth de Twitter:

Integre la autenticación de Twitter en su aplicación siguiendo la documentación del desarrollador . Al final del flujo de inicio de sesión de Twitter, recibirá un token de acceso de OAuth y un secreto de OAuth.
Si necesita iniciar sesión en una aplicación Node.js, envíe el token de acceso de OAuth y el secreto de OAuth a la aplicación Node.js.
Después de que un usuario inicie sesión correctamente en Twitter, intercambie el token de acceso de OAuth y el secreto de OAuth por una credencial de Firebase:
```
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
```

Autenticarse con Firebase usando la credencial de Firebase:

Web modular API

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

Web namespaced API

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

Autenticarse con Firebase en una extensión de Chrome

Si está creando una aplicación de extensión de Chrome, consulte la guía Documentos fuera de pantalla .

Al crear el proyecto, Firebase proporcionará un subdominio único para su proyecto: https://my-app-12345.firebaseapp.com .

Esto también se utilizará como mecanismo de redireccionamiento para el inicio de sesión de OAuth. Ese dominio deberá estar permitido para todos los proveedores de OAuth admitidos. Sin embargo, esto significa que los usuarios pueden ver ese dominio al iniciar sesión en Twitter antes de redirigir nuevamente a la aplicación: Continúe en: https://my-app-12345.firebaseapp.com .

Para evitar mostrar su subdominio, puede configurar un dominio personalizado con Firebase Hosting:

Siga los pasos del 1 al 3 en Configure su dominio para Hosting . Cuando verifica la propiedad de su dominio, Hosting proporciona un certificado SSL para su dominio personalizado.
Agregue su dominio personalizado a la lista de dominios autorizados en Firebase console : auth.custom.domain.com .
En la consola de desarrollador de Twitter o en la página de configuración de OAuth, incluya en la lista blanca la URL de la página de redireccionamiento, a la que podrá acceder en su dominio personalizado: https://auth.custom.domain.com/__/auth/handler .

Cuando inicialice la biblioteca JavaScript, especifique su dominio personalizado con 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

Después de que un usuario inicia sesión por primera vez, se crea una nueva cuenta de usuario y se vincula a las credenciales (es decir, el nombre de usuario y la contraseña, el número de teléfono o la información del proveedor de autenticación) con las que el usuario inició sesión. Esta nueva cuenta se almacena como parte de su proyecto de Firebase y se puede usar para identificar a un usuario en cada aplicación de su proyecto, independientemente de cómo inicie sesión el usuario.

En sus aplicaciones, la forma recomendada de conocer el estado de autenticación de su usuario es configurar un observador en el objeto Auth . Luego puede obtener la información básica del perfil del usuario desde el objeto User . Consulte Administrar usuarios .
En las reglas de seguridad de Firebase Realtime Database y Cloud Storage, puede obtener el ID de usuario único del usuario que inició sesión a partir de la variable auth y usarlo para controlar a qué datos puede acceder un usuario.

Puede permitir que los usuarios inicien sesión en su aplicación utilizando múltiples proveedores de autenticación vinculando las credenciales del proveedor de autenticación a una cuenta de usuario existente.

Para cerrar la sesión de un usuario, llame signOut :

Web modular API

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

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

Web namespaced API

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

Antes de que empieces

Agrega Firebase a tu proyecto de JavaScript .
En Firebase console , abre la sección Auth .
En la pestaña Método de inicio de sesión , habilite el proveedor de Twitter .
Agregue la clave API y el secreto API desde la consola de desarrollador de ese proveedor a la configuración del proveedor:
1. Registre su aplicación como aplicación de desarrollador en Twitter y obtenga la clave API de OAuth y el secreto de API de su aplicación.
2. Asegúrese de que su URI de redireccionamiento de Firebase OAuth (por ejemplo, my-app-12345.firebaseapp.com/__/auth/handler ) esté configurado como su URL de devolución de llamada de autorización en la página de configuración de su aplicación en la configuración de su aplicación de Twitter .
Clic en Guardar .

Maneja el flujo de inicio de sesión con el SDK de Firebase

Para manejar el flujo de inicio de sesión con el SDK de JavaScript de Firebase, sigue estos pasos:

Cree una instancia del objeto proveedor de Twitter:
Web modular API
Obtenga más información sobre la API web modular que se puede sacudir en árbol y actualice desde la API con espacio de nombres.
```
import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();auth_twitter_provider_create.js
```
Web namespaced API
```
var provider = new firebase.auth.TwitterAuthProvider();twitter.js
```
Opcional : para localizar el flujo de OAuth del proveedor al idioma preferido del usuario sin pasar explícitamente los parámetros personalizados de OAuth relevantes, actualice el código de idioma en la instancia de Auth antes de iniciar el flujo de OAuth. Por ejemplo:
Web modular API
Obtenga más información sobre la API web modular que se puede sacudir en árbol y actualice 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
```
Web namespaced API
```
firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js
```
Opcional : especifique parámetros de proveedor de OAuth personalizados adicionales que desee enviar con la solicitud de OAuth. Para agregar un parámetro personalizado, llame a setCustomParameters en el proveedor inicializado con un objeto que contenga la clave especificada en la documentación del proveedor de OAuth y el valor correspondiente. Por ejemplo:
Web modular API
Obtenga más información sobre la API web modular que se puede sacudir en árbol y actualice desde la API con espacio de nombres.
```
provider.setCustomParameters({
  'lang': 'es'
});auth_twitter_provider_params.js
```
Web namespaced API
```
provider.setCustomParameters({
  'lang': 'es'
});twitter.js
```
Los parámetros OAuth requeridos reservados no están permitidos y se ignorarán. Consulte la referencia del proveedor de autenticación para obtener más detalles.

Para iniciar sesión con una ventana emergente, llame signInWithPopup :

Web modular API

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

Web namespaced API

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

Tenga en cuenta también que puede recuperar el token OAuth del proveedor de Twitter que se puede utilizar para obtener datos adicionales mediante las API de Twitter.

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

Para iniciar sesión redirigiendo a la página de inicio de sesión, llame a signInWithRedirect : siga las mejores prácticas al usar `signInWithRedirect`.

Web modular API

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

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

Web namespaced API

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

Luego, también puedes recuperar el token OAuth del proveedor de Twitter llamando getRedirectResult cuando se carga tu página:

Web modular API

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

Web namespaced API

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 es donde puedes detectar y manejar errores. Para obtener una lista de códigos de error, consulte los documentos de referencia de autenticación .

Manejo de errores de cuenta-existe-con-credencial-diferente

Si usa signInWithPopup , puede manejar errores auth/account-exists-with-different-credential con código como el siguiente ejemplo:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  TwitterAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Twitter.
  let result = await signInWithPopup(getAuth(), new TwitterAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Twitter credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Twitter credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

Modo de redireccionamiento

Manejar el flujo de inicio de sesión manualmente

También puedes autenticarte con Firebase usando una cuenta de Twitter manejando el flujo de inicio de sesión llamando a los puntos finales de OAuth de Twitter:

Integre la autenticación de Twitter en su aplicación siguiendo la documentación del desarrollador . Al final del flujo de inicio de sesión de Twitter, recibirá un token de acceso de OAuth y un secreto de OAuth.
Si necesita iniciar sesión en una aplicación Node.js, envíe el token de acceso de OAuth y el secreto de OAuth a la aplicación Node.js.
Después de que un usuario inicie sesión correctamente en Twitter, intercambie el token de acceso de OAuth y el secreto de OAuth por una credencial de Firebase:
```
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
```

Autenticarse con Firebase usando la credencial de Firebase:

Web modular API

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

Web namespaced API

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

Autenticarse con Firebase en una extensión de Chrome

Si está creando una aplicación de extensión de Chrome, consulte la guía Documentos fuera de pantalla .

Al crear el proyecto, Firebase proporcionará un subdominio único para su proyecto: https://my-app-12345.firebaseapp.com .

Para evitar mostrar su subdominio, puede configurar un dominio personalizado con Firebase Hosting:

Siga los pasos del 1 al 3 en Configure su dominio para Hosting . Cuando verifica la propiedad de su dominio, Hosting proporciona un certificado SSL para su dominio personalizado.
Agregue su dominio personalizado a la lista de dominios autorizados en Firebase console : auth.custom.domain.com .
En la consola de desarrollador de Twitter o en la página de configuración de OAuth, incluya en la lista blanca la URL de la página de redireccionamiento, a la que podrá acceder en su dominio personalizado: https://auth.custom.domain.com/__/auth/handler .

Cuando inicialice la biblioteca JavaScript, especifique su dominio personalizado con 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

En sus aplicaciones, la forma recomendada de conocer el estado de autenticación de su usuario es configurar un observador en el objeto Auth . Luego puede obtener la información básica del perfil del usuario desde el objeto User . Consulte Administrar usuarios .
En las reglas de seguridad de Firebase Realtime Database y Cloud Storage, puede obtener el ID de usuario único del usuario que inició sesión a partir de la variable auth y usarlo para controlar a qué datos puede acceder un usuario.

Para cerrar la sesión de un usuario, llame signOut :

Web modular API

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

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

Web namespaced API

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

Antes de que empieces

Agrega Firebase a tu proyecto de JavaScript .
En Firebase console , abre la sección Auth .
En la pestaña Método de inicio de sesión , habilite el proveedor de Twitter .
Agregue la clave API y el secreto API desde la consola de desarrollador de ese proveedor a la configuración del proveedor:
1. Registre su aplicación como aplicación de desarrollador en Twitter y obtenga la clave API de OAuth y el secreto de API de su aplicación.
2. Asegúrese de que su URI de redireccionamiento de Firebase OAuth (por ejemplo, my-app-12345.firebaseapp.com/__/auth/handler ) esté configurado como su URL de devolución de llamada de autorización en la página de configuración de su aplicación en la configuración de su aplicación de Twitter .
Clic en Guardar .

Maneja el flujo de inicio de sesión con el SDK de Firebase

Para manejar el flujo de inicio de sesión con el SDK de JavaScript de Firebase, sigue estos pasos:

Cree una instancia del objeto proveedor de Twitter:
Web modular API
Obtenga más información sobre la API web modular que se puede sacudir en árbol y actualice desde la API con espacio de nombres.
```
import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();auth_twitter_provider_create.js
```
Web namespaced API
```
var provider = new firebase.auth.TwitterAuthProvider();twitter.js
```
Opcional : para localizar el flujo de OAuth del proveedor al idioma preferido del usuario sin pasar explícitamente los parámetros personalizados de OAuth relevantes, actualice el código de idioma en la instancia de Auth antes de iniciar el flujo de OAuth. Por ejemplo:
Web modular API
Obtenga más información sobre la API web modular que se puede sacudir en árbol y actualice 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
```
Web namespaced API
```
firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();index.js
```
Opcional : especifique parámetros de proveedor de OAuth personalizados adicionales que desee enviar con la solicitud de OAuth. Para agregar un parámetro personalizado, llame a setCustomParameters en el proveedor inicializado con un objeto que contenga la clave especificada en la documentación del proveedor de OAuth y el valor correspondiente. Por ejemplo:
Web modular API
Obtenga más información sobre la API web modular que se puede sacudir en árbol y actualice desde la API con espacio de nombres.
```
provider.setCustomParameters({
  'lang': 'es'
});auth_twitter_provider_params.js
```
Web namespaced API
```
provider.setCustomParameters({
  'lang': 'es'
});twitter.js
```
Los parámetros OAuth requeridos reservados no están permitidos y se ignorarán. Consulte la referencia del proveedor de autenticación para obtener más detalles.

Para iniciar sesión con una ventana emergente, llame signInWithPopup :

Web modular API

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

Web namespaced API

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

Tenga en cuenta también que puede recuperar el token OAuth del proveedor de Twitter que se puede utilizar para obtener datos adicionales mediante las API de Twitter.

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

Para iniciar sesión redirigiendo a la página de inicio de sesión, llame a signInWithRedirect : siga las mejores prácticas al usar `signInWithRedirect`.

Web modular API

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

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

Web namespaced API

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

Luego, también puedes recuperar el token OAuth del proveedor de Twitter llamando getRedirectResult cuando se carga tu página:

Web modular API

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

Web namespaced API

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 es donde puedes detectar y manejar errores. Para obtener una lista de códigos de error, consulte los documentos de referencia de autenticación .

Manejo de errores de cuenta-existe-con-credencial-diferente

Si usa signInWithPopup , puede manejar errores auth/account-exists-with-different-credential con código como el siguiente ejemplo:

import {
  getAuth,
  linkWithCredential,
  signInWithPopup,
  TwitterAuthProvider,
} from "firebase/auth";

try {
  // Step 1: User tries to sign in using Twitter.
  let result = await signInWithPopup(getAuth(), new TwitterAuthProvider());
} catch (error) {
  // Step 2: User's email already exists.
  if (error.code === "auth/account-exists-with-different-credential") {
    // The pending Twitter credential.
    let pendingCred = error.credential;

    // Step 3: Save the pending credential in temporary storage,

    // Step 4: Let the user know that they already have an account
    // but with a different provider, and let them choose another
    // sign-in method.
  }
}

// ...

try {
  // Step 5: Sign the user in using their chosen method.
  let result = await signInWithPopup(getAuth(), userSelectedProvider);

  // Step 6: Link to the Twitter credential.
  // TODO: implement `retrievePendingCred` for your app.
  let pendingCred = retrievePendingCred();

  if (pendingCred !== null) {
    // As you have access to the pending credential, you can directly call the
    // link method.
    let user = await linkWithCredential(result.user, pendingCred);
  }

  // Step 7: Continue to app.
} catch (error) {
  // ...
}

Modo de redireccionamiento

Manejar el flujo de inicio de sesión manualmente

También puedes autenticarte con Firebase usando una cuenta de Twitter manejando el flujo de inicio de sesión llamando a los puntos finales de OAuth de Twitter:

Integre la autenticación de Twitter en su aplicación siguiendo la documentación del desarrollador . Al final del flujo de inicio de sesión de Twitter, recibirá un token de acceso de OAuth y un secreto de OAuth.
Si necesita iniciar sesión en una aplicación Node.js, envíe el token de acceso de OAuth y el secreto de OAuth a la aplicación Node.js.
Después de que un usuario inicie sesión correctamente en Twitter, intercambie el token de acceso de OAuth y el secreto de OAuth por una credencial de Firebase:
```
var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
```

Autenticarse con Firebase usando la credencial de Firebase:

Web modular API

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

Web namespaced API

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

Autenticarse con Firebase en una extensión de Chrome

Si está creando una aplicación de extensión de Chrome, consulte la guía Documentos fuera de pantalla .

Al crear el proyecto, Firebase proporcionará un subdominio único para su proyecto: https://my-app-12345.firebaseapp.com .

Para evitar mostrar su subdominio, puede configurar un dominio personalizado con Firebase Hosting:

Siga los pasos del 1 al 3 en Configure su dominio para Hosting . Cuando verifica la propiedad de su dominio, Hosting proporciona un certificado SSL para su dominio personalizado.
Agregue su dominio personalizado a la lista de dominios autorizados en Firebase console : auth.custom.domain.com .
En la consola de desarrollador de Twitter o en la página de configuración de OAuth, incluya en la lista blanca la URL de la página de redireccionamiento, a la que podrá acceder en su dominio personalizado: https://auth.custom.domain.com/__/auth/handler .

Cuando inicialice la biblioteca JavaScript, especifique su dominio personalizado con 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

En sus aplicaciones, la forma recomendada de conocer el estado de autenticación de su usuario es configurar un observador en el objeto Auth . Luego puede obtener la información básica del perfil del usuario desde el objeto User . Consulte Administrar usuarios .
En las reglas de seguridad de Firebase Realtime Database y Cloud Storage, puede obtener el ID de usuario único del usuario que inició sesión a partir de la variable auth y usarlo para controlar a qué datos puede acceder un usuario.

Para cerrar la sesión de un usuario, llame signOut :

Web modular API

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

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

Web namespaced API

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

Autenticar usando Twitter en JavaScript

Antes de que empieces

Maneja el flujo de inicio de sesión con el SDK de Firebase

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Manejo de errores de cuenta-existe-con-credencial-diferente

Modo emergente

Modo de redireccionamiento

Manejar el flujo de inicio de sesión manualmente

Web modular API

Web namespaced API

Autenticarse con Firebase en una extensión de Chrome

Personalización del dominio de redireccionamiento para el inicio de sesión en Twitter

Próximos pasos

Web modular API

Web namespaced API

Antes de que empieces

Maneja el flujo de inicio de sesión con el SDK de Firebase

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Manejo de errores de cuenta-existe-con-credencial-diferente

Modo emergente

Modo de redireccionamiento

Manejar el flujo de inicio de sesión manualmente

Web modular API

Web namespaced API

Autenticarse con Firebase en una extensión de Chrome

Personalización del dominio de redireccionamiento para el inicio de sesión en Twitter

Próximos pasos

Web modular API

Web namespaced API

Antes de que empieces

Maneja el flujo de inicio de sesión con el SDK de Firebase

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Manejo de errores de cuenta-existe-con-credencial-diferente

Modo emergente

Modo de redireccionamiento

Manejar el flujo de inicio de sesión manualmente

Web modular API

Web namespaced API

Autenticarse con Firebase en una extensión de Chrome

Personalización del dominio de redireccionamiento para el inicio de sesión en Twitter

Próximos pasos

Web modular API

Web namespaced API