Google se compromete a impulsar la igualdad racial para las comunidades afrodescendientes. Obtén información al respecto.

Autenticarse usando Twitter en JavaScript

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

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

Antes de que empieces

  1. Agregue Firebase a su proyecto de JavaScript .
  2. En Firebase console , abra la sección Auth .
  3. En la pestaña Método de inicio de sesión , habilite el proveedor de Twitter .
  4. Agregue la clave de API y el secreto de API de 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 de API de OAuth y el secreto de API de su aplicación.
    2. Asegúrese de que su URI de redirección de OAuth de Firebase (p. ej. my-app-12345.firebaseapp.com/__/auth/handler ) esté configurada 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 .
  5. Haga clic en Guardar .

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

Si está creando una aplicación web, la forma más fácil de autenticar a sus usuarios con Firebase usando sus cuentas de Twitter es manejar el flujo de inicio de sesión con Firebase JavaScript SDK. (Si desea autenticar a un usuario en Node.js u otro entorno sin navegador, debe manejar 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:

  1. Cree una instancia del objeto de proveedor de 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 el flujo de OAuth del proveedor al idioma preferido del usuario sin pasar explícitamente los parámetros de OAuth personalizados relevantes, actualice el código de idioma en la instancia de Auth antes de iniciar el flujo de OAuth. Por ejemplo:

    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 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 como se especifica en la documentación del proveedor de OAuth y el valor correspondiente. Por ejemplo:

    Web version 9

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

    Web version 8

    provider.setCustomParameters({
      'lang': 'es'
    });
    Los parámetros OAuth obligatorios reservados no están permitidos y se ignorarán. Consulte la referencia del proveedor de autenticación para obtener más detalles.
  4. Autenticarse con Firebase mediante el objeto del 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, llama a 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;
          // ...
        }).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;
          // ...
        }).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;
          // ...
        });
      También tenga en cuenta que puede recuperar el token de OAuth del proveedor de Twitter, que se puede usar para obtener datos adicionales mediante las API de Twitter.

      Aquí también es donde puede 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 :

      Web version 9

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

      Web version 8

      firebase.auth().signInWithRedirect(provider);
      Luego, también puede recuperar el token OAuth del proveedor de Twitter llamando a getRedirectResult cuando se carga su página:

      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;
        }).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;
        }).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;
          // ...
        });
      Aquí también es donde puede detectar y manejar errores. Para obtener una lista de códigos de error, consulte los Documentos de referencia de autenticación.

Manejar el flujo de inicio de sesión manualmente

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

  1. 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.
  2. Si necesita iniciar sesión en una aplicación de Node.js, envíe el token de acceso de OAuth y el secreto de OAuth a la aplicación de Node.js.
  3. Después de que un usuario inicie sesión con éxito 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);
    
  4. Autenticarse con Firebase usando la credencial de 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;
        // ...
      });

Autenticarse con Firebase en una extensión de Chrome

Si está creando una aplicación de extensión de Chrome, debe agregar su ID de extensión de Chrome:

  1. Abra su proyecto en la consola de Firebase .
  2. En la sección Autenticación , abra la página Método de inicio de sesión .
  3. Agregue un URI como el siguiente a la lista de dominios autorizados:
    chrome-extension://CHROME_EXTENSION_ID

Solo las operaciones emergentes ( signInWithPopup , linkWithPopup y reauthenticateWithPopup ) están disponibles para las extensiones de Chrome, ya que las extensiones de Chrome no pueden usar redireccionamientos HTTP. Debe llamar a estos métodos desde un script de página de fondo en lugar de una ventana emergente de acción del navegador, ya que la ventana emergente de autenticación cancelará la ventana emergente de acción del navegador. Los métodos emergentes solo se pueden usar en extensiones que usan Manifest V2 . El Manifest V3 más nuevo solo permite scripts en segundo plano en forma de trabajadores de servicio, que no pueden realizar las operaciones emergentes en absoluto.

En el archivo de manifiesto de su extensión de Chrome, asegúrese de agregar la URL https://apis.google.com a la lista de permitidos content_security_policy .

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 establecer un observador en el objeto Auth . A continuación, puede obtener la información básica del perfil del User del objeto Usuario. Consulte Administrar usuarios .

  • En sus Reglas de seguridad de Firebase Realtime Database y Cloud Storage, puede obtener el ID de usuario único del usuario que inició sesión 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 varios 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 a 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.
});