Autentica mediante Twitter en JavaScript

Para permitir que los usuarios se autentiquen con Firebase mediante sus cuentas de Twitter, integra la autenticación de Twitter a la app. Para integrar la autenticación con Twitter, puedes usar el SDK de Firebase para ejecutar el flujo de acceso o ejecutar el flujo de OAuth de Twitter de forma manual y pasar el token de acceso y el secreto resultantes a Firebase.

Antes de comenzar

  1. Agrega Firebase a tu proyecto de JavaScript.
  2. Registra tu app como una aplicación de desarrollador en Twitter y obtén la clave de API y el secreto de API correspondientes.
  3. Habilita el acceso a través de Twitter:
    1. En Firebase console, abre la sección Auth.
    2. En la pestaña Método de acceso, habilita el método de acceso Twitter y especifica la clave de API y el secreto de API que obtuviste de Twitter.
    3. Luego, 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 en la página de configuración de la app, en la configuración de tu app de Twitter.

Maneja el flujo de acceso con el SDK de Firebase

Si estás creando una app web, la manera más fácil de autenticar a tus usuarios con Firebase mediante sus cuentas de Twitter es administrar el flujo de acceso con el SDK de Firebase para JavaScript. (Si deseas autenticar a un usuario en Node.js o algún otro entorno que no sea de un navegador, debes manejar el flujo de acceso manualmente).

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

  1. Crea una instancia del objeto proveedor de Twitter:
    var provider = new firebase.auth.TwitterAuthProvider();
    
  2. Opcional: Para ajustar el OAuth del proveedor según su idioma de preferencia sin pasar de forma explícita los parámetros OAuth personalizados relevantes, actualiza el código de idioma en la instancia Auth antes de iniciar el flujo de OAuth. Por ejemplo:
    firebase.auth().languageCode = 'pt';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
    
  3. Opcional: Especifica los parámetros personalizados adicionales del proveedor de OAuth que deseas 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:
    provider.setCustomParameters({
      'lang': 'es'
    });
    
    No se permiten los parámetros de OAuth necesarios reservados y se ignorarán. Consulta la referencia del proveedor de autenticación para obtener más información.
  4. 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 ofrecer acceso con una ventana emergente, llama a signInWithPopup:
      firebase.auth().signInWithPopup(provider).then(function(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.
        var token = result.credential.accessToken;
        var secret = result.credential.secret;
        // The signed-in user info.
        var user = result.user;
        // ...
      }).catch(function(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;
        // ...
      });
      
      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:
      firebase.auth().signInWithRedirect(provider);
      
      Luego, para recuperar el token de OAuth del proveedor de Twitter, puedes llamar a getRedirectResult cuando tu página carga:
      firebase.auth().getRedirectResult().then(function(result) {
        if (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 = result.credential.accessToken;
          var secret = result.credential.secret;
          // ...
        }
        // The signed-in user info.
        var user = result.user;
      }).catch(function(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 puedes detectar y resolver errores. Para obtener una lista de códigos de error, consulta los documentos de referencia de autenticació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 para administrar el flujo de acceso:

  1. Integra la autenticación de Twitter en tu app según las instrucciones de la documentación para programadores. Al final del flujo de acceso de Twitter, recibirás un token de acceso y un secreto de OAuth.
  2. Si necesitas acceder en una aplicación de Node.js, envía el token de acceso y el secreto de OAuth a la aplicación de Node.js.
  3. 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);
    
  4. Usa la credencial de Firebase para autenticar con Firebase:
    firebase.auth().signInAndRetrieveDataWithCredential(credential).catch(function(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;
      // ...
    });

Autentica con Firebase en una extensión de Chrome

Si estás compilando una app de extensión de Chrome, debes incluir en la lista blanca el ID de extensión de Chrome:

  1. Abre tu proyecto en Firebase console.
  2. En la sección Authentication, abre la página Método de acceso.
  3. Agrega un URI como el siguiente a la lista de dominios autorizados:
    chrome-extension://CHROME_EXTENSION_ID

Solo las operaciones con elementos emergentes (signInWithPopup y linkWithPopup) 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 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.

Asegúrate de incluir la URL https://apis.google.com en la lista blanca content_security_policy en tu archivo de manifiesto de la extensión de Chrome.

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 usó para acceder. Esta cuenta nueva se almacena como parte del proyecto de Firebase y puede usarse para identificar a un usuario en todas las apps del proyecto, sin importar el método de acceso que se use.

  • En las apps, para conocer el estado de autenticación del usuario, te recomendamos configurar un observador en el objeto Auth. Puedes obtener la información básica de perfil del usuario a partir del objeto User. Consulta Cómo administrar usuarios.

  • En las reglas de seguridad de Firebase Realtime Database y Cloud Storage, puedes obtener el ID del usuario único que accedió a partir de la variable auth y usarlo para controlar a qué datos podrá acceder.

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

Para salir de la sesión de un usuario, llama a signOut de la siguiente manera:

firebase.auth().signOut().then(function() {
  // Sign-out successful.
}).catch(function(error) {
  // An error happened.
});

Enviar comentarios sobre…

¿Necesitas ayuda? Visita nuestra página de asistencia.