Autenticazione tramite Twitter in JavaScript

Puoi consentire ai tuoi utenti di eseguire l'autenticazione con Firebase utilizzando i loro account Twitter integrando l'autenticazione Twitter nella tua app. Puoi integrare Twitter l'autenticazione utilizzando l'SDK Firebase per eseguire il flusso di accesso, oppure eseguendo manualmente il flusso OAuth di Twitter e trasmettendo il risultato token di accesso e secret di Firebase.

Prima di iniziare

  1. Aggiungi Firebase al tuo progetto JavaScript.
  2. Nella console Firebase, apri la sezione Autorizzazione.
  3. Nella scheda Metodo di accesso, attiva il provider Twitter.
  4. Aggiungi la chiave API e l'API secret dalla console per gli sviluppatori del fornitore in questione configurazione del provider:
    1. Registra la tua app come applicazione per sviluppatori su Twitter e ottieni la chiave API e il token segreto API della tua app.
    2. Assicurati che l'URI di reindirizzamento OAuth di Firebase (ad es. my-app-12345.firebaseapp.com/__/auth/handler) sia impostato come URL di callback di autorizzazione nella pagina delle impostazioni dell'app sul tuo Configurazione dell'app Twitter.
  5. Fai clic su Salva.

Gestire il flusso di accesso con l'SDK Firebase

Se stai creando un'app web, il modo più semplice per autenticare gli utenti con Firebase utilizzando i loro account Twitter è gestire il flusso di accesso con l'SDK Firebase JavaScript. (se vuoi autenticare un utente in Node.js o altro ambiente diverso dal browser, devi gestire il flusso di accesso manualmente.

Per gestire il flusso di accesso con l'SDK Firebase JavaScript, segui questi passaggi: passaggi:

  1. Crea un'istanza dell'oggetto provider Twitter:
    WebWeb
    import { TwitterAuthProvider } from "firebase/auth";
    
    const provider = new TwitterAuthProvider();
    var provider = new firebase.auth.TwitterAuthProvider();
  2. (Facoltativo) Per localizzare il flusso OAuth del provider nelle preferenze dell'utente senza trasmettere esplicitamente i parametri OAuth personalizzati pertinenti, aggiornala sull'istanza Auth prima di avviare il flusso OAuth. Ad esempio:
    WebWeb
    import { getAuth } from "firebase/auth";
    
    const auth = getAuth();
    auth.languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // auth.useDeviceLanguage();
    firebase.auth().languageCode = 'it';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
  3. Facoltativo: specifica ulteriori parametri personalizzati del provider OAuth che vuoi inviare con la richiesta OAuth. Per aggiungere un parametro personalizzato, richiama setCustomParameters sul provider inizializzato con un oggetto contenente la chiave come specificato nella documentazione del provider OAuth e dal valore corrispondente. Ad esempio:
    WebWeb
    provider.setCustomParameters({
      'lang': 'es'
    });
    provider.setCustomParameters({
      'lang': 'es'
    });
    I parametri OAuth obbligatori riservati non sono consentiti e verranno ignorati. Per ulteriori dettagli, consulta le informazioni di riferimento sul fornitore di servizi di autenticazione.
  4. Esegui l'autenticazione con Firebase utilizzando l'oggetto del provider Twitter. Puoi agli utenti di accedere con i propri account Twitter aprendo un o reindirizzando alla pagina di accesso. Il metodo di reindirizzamento è preferito sui dispositivi mobili.
    • Per accedere con una finestra popup, chiama signInWithPopup:
      WebWeb
      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);
          // ...
        });
      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;
          // ...
        });
      Tieni inoltre presente che puoi recuperare il token OAuth del provider Twitter, che può essere utilizzato per recuperare dati aggiuntivi utilizzando le API Twitter.

      Qui puoi anche rilevare e gestire gli errori. Per un elenco dei codici di errore, consulta la documentazione di riferimento per l'autenticazione.

    • Per accedere reindirizzando alla pagina di accesso, chiama signInWithRedirect: Segui le best practice quando utilizzi "signInWithRedirect".
      WebWeb
      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);
      firebase.auth().signInWithRedirect(provider);
      Quindi, puoi anche recuperare il token OAuth del provider di Twitter chiamando getRedirectResult quando viene caricata la pagina:
      WebWeb
      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);
          // ...
        });
      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;
          // ...
        });
      Qui puoi anche individuare e gestire gli errori. Per un elenco dei codici di errore, consulta la documentazione di riferimento per le autorizzazioni.

Se hai attivato l'impostazione Un account per indirizzo email nella console Firebase, quando un utente tenta di accedere a un provider (ad esempio Twitter) con un indirizzo email che esiste già per il provider di un altro utente Firebase (ad esempio Google), viene generato l'errore auth/account-exists-with-different-credential insieme a un oggetto AuthCredential (token e segreto OAuth di Twitter). Per completare l'accesso al fornitore scelto, l'utente deve prima accedere al fornitore esistente (Google) e poi eseguire il collegamento all'AuthCredential precedente (token e segreto OAuth di Twitter).

Se utilizzi signInWithPopup, puoi gestire gli errori auth/account-exists-with-different-credential con un codice come nell'esempio seguente:

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) {
  // ...
}

Modalità di reindirizzamento

Questo errore viene gestito in modo simile nella modalità di reindirizzamento, con la differenza che il valore la credenziale deve essere memorizzata nella cache tra reindirizzamenti di pagina (ad esempio, usando la memoria di sessione).

Gestire manualmente il flusso di accesso

Puoi anche autenticarti con Firebase utilizzando un account Twitter gestendo il flusso di accesso chiamando gli endpoint OAuth di Twitter:

  1. Integra l'autenticazione di Twitter nella tua app seguendo la documentazione per gli sviluppatori. Al termine del flusso di accesso a Twitter, riceverai un token di accesso OAuth e un segreto OAuth.
  2. Se devi accedere a un'applicazione Node.js, invia l'accesso OAuth e il secret OAuth all'applicazione Node.js.
  3. Dopo che un utente ha eseguito l'accesso con Twitter, scambia l'accesso OAuth token e secret OAuth per una credenziale Firebase:
    var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
  4. Esegui l'autenticazione con Firebase utilizzando la credenziale Firebase:
    WebWeb
    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);
        // ...
      });
    // 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;
        // ...
      });

Esegui l'autenticazione con Firebase in un'estensione di Chrome

Se stai sviluppando un'app di estensione di Chrome, consulta la Guida ai documenti fuori schermo.

Al momento della creazione del progetto, Firebase eseguirà il provisioning di un sottodominio univoco per il progetto: https://my-app-12345.firebaseapp.com.

Verrà utilizzato anche come meccanismo di reindirizzamento per l'accesso OAuth. Questo dominio deve essere consentito per tutti i fornitori OAuth supportati. Tuttavia, gli utenti potrebbero notare che dominio durante l'accesso a Twitter prima di reindirizzare all'applicazione: Continua su: https://my-app-12345.firebaseapp.com.

Per evitare la visualizzazione del sottodominio, puoi configurare un dominio personalizzato con Firebase Hosting:

  1. Segui i passaggi da 1 a 3 in Configurare il dominio per Hosting. Quando esegui la verifica la proprietà del dominio, Hosting esegue il provisioning di un certificato SSL per il tuo dominio personalizzato.
  2. Aggiungi il tuo dominio personalizzato all'elenco dei domini autorizzati nella Console Firebase: auth.custom.domain.com.
  3. Nella console per gli sviluppatori di Twitter o nella pagina di configurazione di OAuth, autorizza l'URL della pagina di reindirizzamento. che saranno accessibili sul tuo dominio personalizzato: https://auth.custom.domain.com/__/auth/handler.
  4. Quando inizializza la libreria JavaScript, specifica il dominio personalizzato con il Campo authDomain:
    var config = {
      apiKey: '...',
      // Changed from 'PROJECT_ID.firebaseapp.com'.
      authDomain: 'auth.custom.domain.com',
      databaseURL: 'https://PROJECT_ID.firebaseio.com',
      projectId: 'PROJECT_ID',
      storageBucket: 'PROJECT_ID.firebasestorage.app',
      messagingSenderId: 'SENDER_ID'
    };
    firebase.initializeApp(config);

Passaggi successivi

Dopo che un utente ha eseguito l'accesso per la prima volta, viene creato un nuovo account utente e collegato alle credenziali, ovvero nome utente e password, numero di telefono o informazioni del fornitore di autenticazione, con cui l'utente ha eseguito l'accesso. Questo nuovo viene archiviato come parte del progetto Firebase e può essere utilizzato per identificare a un utente in ogni app del progetto, a prescindere da come esegue l'accesso.

  • Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione dell'utente è impostare un osservatore sull'oggetto Auth. Puoi quindi ottenere l'input dell'utente informazioni di base del profilo dall'oggetto User. Consulta: Gestisci utenti.

  • In Firebase Realtime Database e Cloud Storage Regole di sicurezza, puoi ottieni l'ID utente unico dell'utente che ha eseguito l'accesso dalla variabile auth e usarli per controllare i dati a cui un utente può accedere.

Puoi consentire agli utenti di accedere alla tua app utilizzando più autenticazioni collegando le credenziali del provider di autenticazione a un a un account utente esistente.

Per scollegare un utente, chiama signOut:

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

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