Questa pagina è stata tradotta dall'API Cloud Translation.
Switch to English

Autentica utilizzando Twitter in JavaScript

Puoi consentire ai tuoi utenti di autenticarsi con Firebase utilizzando i loro account Twitter integrando l'autenticazione di Twitter nella tua app. Puoi integrare l'autenticazione di Twitter utilizzando l'SDK Firebase per eseguire il flusso di accesso oppure eseguendo manualmente il flusso OAuth di Twitter e passando il token di accesso e il segreto risultante a Firebase.

Prima di iniziare

  1. Aggiungi Firebase al tuo progetto JavaScript .
  2. Nella console Firebase , apri la sezione Auth .
  3. Nella scheda Metodo di accesso , abilita il provider Twitter .
  4. Aggiungi la chiave API e il segreto API dalla console per sviluppatori di quel provider alla configurazione del provider:
    1. Registra la tua app come applicazione per sviluppatori su Twitter e ottieni la chiave API OAuth e il 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 richiamata di autorizzazione nella pagina delle impostazioni dell'app nella configurazione dell'app Twitter .
  5. Fare clic su Salva .

Gestisci il flusso di accesso con l'SDK Firebase

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

Per gestire il flusso di accesso con Firebase JavaScript SDK, procedi nel seguente modo:

  1. Crea un'istanza dell'oggetto provider di Twitter:
    var provider = new firebase.auth.TwitterAuthProvider();
    
  2. Facoltativo : per localizzare il flusso OAuth del provider nella lingua preferita dell'utente senza passare esplicitamente i parametri OAuth personalizzati pertinenti, aggiorna il codice della lingua sull'istanza di Auth prima di avviare il flusso OAuth. Ad esempio:
    firebase.auth().languageCode = 'pt';
    // To apply the default browser preference instead of explicitly setting it.
    // firebase.auth().useDeviceLanguage();
    
  3. Facoltativo : specifica parametri aggiuntivi del provider OAuth personalizzati che desideri inviare con la richiesta OAuth. Per aggiungere un parametro personalizzato, chiama setCustomParameters sul provider inizializzato con un oggetto contenente la chiave come specificato dalla documentazione del provider OAuth e il valore corrispondente. Ad esempio:
    provider.setCustomParameters({
      'lang': 'es'
    });
    
    I parametri OAuth obbligatori riservati non sono consentiti e verranno ignorati. Vedere il riferimento del provider di autenticazione per ulteriori dettagli.
  4. Autenticati con Firebase utilizzando l'oggetto provider di Twitter. Puoi chiedere ai tuoi utenti di accedere con i loro account Twitter aprendo una finestra pop-up o reindirizzando alla pagina di accesso. Il metodo di reindirizzamento è preferito sui dispositivi mobili.
    • Per accedere con una finestra pop-up, chiama 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;
        // ...
      });
      
      Notare inoltre che è possibile recuperare il token OAuth del provider di Twitter che può essere utilizzato per recuperare dati aggiuntivi utilizzando le API di Twitter.

      Qui è anche possibile rilevare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata ai documenti di riferimento per l'autenticazione .

    • Per accedere reindirizzando alla pagina di accesso, chiama signInWithRedirect :
      firebase.auth().signInWithRedirect(provider);
      
      Quindi, puoi anche recuperare il token OAuth del provider Twitter chiamando getRedirectResult quando la tua pagina viene caricata:
      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;
        // ...
      });
      
      Qui è anche possibile rilevare e gestire gli errori. Per un elenco dei codici di errore, dai un'occhiata ai documenti di riferimento per l'autenticazione .

Gestisci 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 dello sviluppatore . Alla fine 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 il token di accesso OAuth e il segreto OAuth all'applicazione Node.js.
  3. Dopo che un utente si è registrato correttamente con Twitter, scambia il token di accesso OAuth e il segreto OAuth con una credenziale Firebase:
    var credential = firebase.auth.TwitterAuthProvider.credential(token, secret);
    
  4. Autenticati con Firebase utilizzando la credenziale Firebase:
    firebase.auth().signInWithCredential(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 in un'estensione di Chrome

Se stai creando un'app di estensione di Chrome, devi inserire nella whitelist l'ID dell'estensione di Chrome:

  1. Apri il tuo progetto nella console Firebase .
  2. Nella sezione Autenticazione , apri la pagina Metodo di accesso .
  3. Aggiungi un URI come il seguente all'elenco dei domini autorizzati:
    chrome-extension://CHROME_EXTENSION_ID

Solo le operazioni popup ( signInWithPopup e linkWithPopup ) sono disponibili per le estensioni di Chrome, poiché le estensioni di Chrome non possono utilizzare reindirizzamenti HTTP. È necessario chiamare questi metodi da uno script in background piuttosto che da un popup di azione del browser, poiché il popup di autenticazione annullerà il popup di azione del browser.

Nel file manifest dell'estensione di Chrome assicurati di aggiungere l'URL https://apis.google.com alla whitelist content_security_policy .

Prossimi passi

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

  • Nelle tue app, il modo consigliato per conoscere lo stato di autenticazione del tuo utente è impostare un osservatore sull'oggetto Auth . È quindi possibile ottenere le informazioni sul profilo di base User dall'oggetto User . Vedi Gestisci utenti .

  • Nelle regole di sicurezza Firebase Realtime Database e Cloud Storage, puoi ottenere l'ID utente univoco dell'utente connesso dalla variabile auth e utilizzarlo per controllare i dati a cui un utente può accedere.

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

Per disconnettere un utente, chiama signOut :

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