Se usó la API de Cloud Translation para traducir esta página.

Permitir que los usuarios accedan con Twitter

En este documento se muestra cómo usar Identity Platform para que los usuarios accedan con Twitter.

Antes de comenzar

En este instructivo, se supone que ya habilitaste Identity Platform y que tienes una aplicación web básica escrita con HTML y JavaScript. Consulta la Guía de inicio rápido para aprender a hacer esto.

Configura Twitter como proveedor

Para configurar Twitter como un proveedor de identidad, haz lo siguiente:

Ve a la página Proveedores de identidad en la consola de Google Cloud.

Ir a la página Proveedores de identidad
Haz clic en Agregar un proveedor.
Selecciona Twitter de la lista.
Ingresa el ID de la aplicación de Twitter y el secreto de la aplicación. Si si aún no tienes un ID ni un secreto, puedes obtener uno en Apps de Twitter .
Configura el URI que aparece en Configurar Twitter como un OAuth válido. URI de redireccionamiento para tu app de Twitter. Si configuraste un dominio personalizado en Identity Platform, Actualiza el URI de redireccionamiento en la configuración de tu app de Twitter para usar el dominio personalizado en su lugar del dominio predeterminado. Por ejemplo, cambia https://myproject.firebaseapp.com/__/auth/handler a https://auth.myownpersonaldomain.com/__/auth/handler
Para registrar los dominios de tu app, haz clic en Agregar dominio en Dominios autorizados. Para fines de desarrollo, localhost ya está habilitado de forma predeterminada.
En Configura tu aplicación, haz clic en Detalles de la configuración. Copia el fragmento en el código de tu app para inicializar el SDK de cliente de Identity Platform.
Haga clic en Save.

Acceso de los usuarios con el SDK de cliente

Crea una instancia del objeto proveedor de Twitter:
Web versión 9

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
```
Web versión 8
```
var provider = new firebase.auth.TwitterAuthProvider();twitter.js
```

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

Web versión 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

Web versión 8

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

Opcional: Especifica parámetros personalizados de OAuth adicionales. Estos son específicos de Twitter y, por lo general, se usan para personalizar la experiencia de autenticación. No puedes pasar parámetros reservados por OAuth o Identity Platform.

Web versión 9

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

Web versión 8

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

Usa el objeto del proveedor de Twitter para permitir que el usuario acceda. Puedes abrir una ventana emergente o redireccionar la página actual. El redireccionamiento es más sencillo para los usuarios de dispositivos móviles.

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

Web versión 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

Web versión 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 redireccionar la página, primero llama a signInWithRedirect().

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

Web versión 9

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

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

Web versión 8

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

Luego, llama a getRedirectResult() cuando tu página cargue para recuperar el token de Twitter:

Web versión 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

Web versión 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, puedes 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"'

Permite que los usuarios accedan de forma manual

Si no deseas usar el SDK de cliente, también puedes manejar el flujo de acceso manualmente:

Para integrar la autenticación de Twitter en tu app, sigue los pasos de su documentación para desarrolladores.
Permite que el usuario acceda a Twitter mediante el flujo que implementaste en el paso anterior.
Intercambia el token que recibes de Twitter por una credencial de Identity Platform:
Web versión 9

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 credential = TwitterAuthProvider.credential(accessToken, secret);auth_twitter_provider_credential.js
```
Web versión 8
```
var credential = firebase.auth.TwitterAuthProvider.credential(accessToken, secret);twitter.js
```

Usa la credencial para que el usuario acceda con Identity Platform:

Web versión 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

Web versión 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

¿Qué sigue?

Obtén más información sobre los usuarios de Identity Platform.
Permite que los usuarios accedan con otros proveedores de identidad.