Inicio de sesión de usuarios con Twitter

En este documento se explica cómo usar Identity Platform para iniciar sesión con Twitter.

Antes de empezar

En este tutorial se da por hecho que ya has habilitado Identity Platform y que tienes una aplicación web básica escrita en HTML y JavaScript. Consulta la guía de inicio rápido para saber cómo hacerlo.

Configurar Twitter como proveedor

Para configurar Twitter como proveedor de identidades, sigue estos pasos:

  1. Ve a la página Proveedores de identidades de la consola de Google Cloud .

    Ir a la página Proveedores de identidades

  2. Haz clic en Add A Provider (Añadir proveedor).

  3. Selecciona Twitter en la lista.

  4. Introduce el ID de aplicación y el secreto de aplicación de Twitter. Si aún no tienes un ID y un secreto, puedes obtenerlos en la página Aplicaciones de Twitter.

  5. Configura el URI que aparece en Configurar Twitter como un URI de redirección de OAuth válido para tu aplicación de Twitter. Si has configurado un dominio personalizado en Identity Platform, actualiza el URI de redirección en la configuración de tu aplicación de Twitter para que use el dominio personalizado en lugar del dominio predeterminado. Por ejemplo, cambia https://myproject.firebaseapp.com/__/auth/handler por https://auth.myownpersonaldomain.com/__/auth/handler.

  6. Para registrar los dominios de tu aplicación, haz clic en Añadir dominio en Dominios autorizados. Para las actividades de desarrollo, localhost ya está habilitado de forma predeterminada.

  7. En Configura tu aplicación, haz clic en Detalles de la configuración. Copia el fragmento en el código de tu aplicación para inicializar el SDK de cliente de Identity Platform.

  8. Haz clic en Guardar.

Inicio de sesión de usuarios con el SDK de cliente

  1. Crea una instancia del objeto de proveedor de Twitter:

    Versión web 9

    import { TwitterAuthProvider } from "firebase/auth";

const provider = new TwitterAuthProvider();
    auth_twitter_provider_create.js

    Versión web 8

    var provider = new firebase.auth.TwitterAuthProvider();
    twitter.js

  2. Opcional: Localiza el flujo de autenticación. Puedes especificar un idioma o usar el idioma predeterminado del dispositivo:

    Versión web 9

    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

    Versión web 8

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js

  3. Opcional: especifica parámetros de OAuth personalizados adicionales. Son específicas de Twitter y se suelen usar para personalizar la experiencia de autenticación. No puedes transferir parámetros reservados por OAuth o Identity Platform.

    Versión web 9

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

    Versión web 8

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

  4. Usa el objeto del proveedor de Twitter para iniciar la sesión del usuario. Puedes abrir una ventana emergente o redirigir la página actual. La redirección es más sencilla para los usuarios de dispositivos móviles.

    Para mostrar una ventana emergente, llama a signInWithPopup():

    Versión web 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;
    // 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

    Versión web 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;
    // 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

    Para redirigir la página, primero llama a signInWithRedirect().

    Sigue las prácticas recomendadas cuando uses signInWithRedirect, linkWithRedirect o reauthenticateWithRedirect.

    Versión web 9

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

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

    Versión web 8

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

    A continuación, recupera el token de Twitter llamando a getRedirectResult() cuando se cargue tu página:

    Versión web 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;
    // 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

    Versión web 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;
    // 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

Una vez que tengas un token de acceso, podrás usarlo para llamar a la API de Twitter. Por ejemplo:

REST

curl --request POST
  --url 'https://api.twitter.com/1.1/statuses/update.json?status=Hello%20world'
  --header 'authorization: OAuth oauth_consumer_key="CONSUMER_API_KEY",
  oauth_nonce="OAUTH_NONCE", oauth_signature="OAUTH_SIGNATURE",
  oauth_signature_method="HMAC-SHA1", oauth_timestamp="OAUTH_TIMESTAMP",
  oauth_token="ACCESS_TOKEN", oauth_version="1.0"'

Inicio de sesión de usuarios de forma manual

Si no quieres usar el SDK de cliente, también puedes gestionar el flujo de inicio de sesión manualmente:

  1. Integra la autenticación de Twitter en tu aplicación siguiendo los pasos que se indican en su documentación para desarrolladores.

  2. Inicia la sesión del usuario con Twitter mediante el flujo que has implementado en el paso anterior.

  3. Intercambia el token que recibas de Twitter por una credencial de Identity Platform:

    Versión web 9

    import { TwitterAuthProvider } from "firebase/auth";

const credential = TwitterAuthProvider.credential(accessToken, secret);
    auth_twitter_provider_credential.js

    Versión web 8

    var credential = firebase.auth.TwitterAuthProvider.credential(accessToken, secret);
    twitter.js

  4. Usa la credencial para iniciar la sesión del usuario con Identity Platform:

    Versión web 9

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

// Sign in with the credential from the user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in 
    // ...
  })
  .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;
    // ...
  });
    auth_signin_credential.js

    Versión web 8

    // Sign in with the credential from the user.
firebase.auth()
  .signInWithCredential(credential)
  .then((result) => {
    // Signed in 
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // ...
  });
    index.js

Siguientes pasos