Aggiungi facilmente l'accesso alla tua app Web con FirebaseUI

FirebaseUI è una libreria basata su Firebase Authentication SDK che fornisce flussi di interfaccia utente drop-in da utilizzare nella tua app. FirebaseUI offre i seguenti vantaggi:

  • Più provider : flussi di accesso per e-mail/password, collegamento e-mail, autenticazione del telefono, accesso a Google, Facebook, Twitter e GitHub.
  • Collegamento degli account : flussi per collegare in modo sicuro gli account utente tra i provider di identità.
  • Personalizzazione : sovrascrivi gli stili CSS di FirebaseUI per soddisfare i requisiti della tua app. Inoltre, poiché FirebaseUI è open source, puoi eseguire il fork del progetto e personalizzarlo esattamente in base alle tue esigenze.
  • Iscrizione con un tocco e accesso automatico: integrazione automatica con la registrazione con un tocco per un rapido accesso cross-device.
  • Internazionalizzazione dell'interfaccia utente localizzata per oltre 40 lingue .
  • Aggiornamento degli utenti anonimi : possibilità di aggiornare gli utenti anonimi tramite l'accesso/registrazione. Per ulteriori informazioni, visita la sezione Aggiornamento degli utenti anonimi .

Prima di iniziare

  1. Aggiungi l'autenticazione Firebase alla tua applicazione web , assicurandoti di utilizzare la compatibilità v9 (consigliata) o l'SDK precedente (vedi barra laterale sopra).

  2. Includi FirebaseUI tramite una delle seguenti opzioni:

    1. CDN

      Includi lo script e il file CSS seguenti nel tag <head> della tua pagina, sotto lo snippet di inizializzazione dalla console di Firebase:

      <script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />

    2. Modulo npm

      Installa FirebaseUI e le sue dipendenze tramite npm usando il comando seguente:

      $ npm install firebaseui --save

      require i seguenti moduli all'interno dei file di origine:

      var firebase = require('firebase');
var firebaseui = require('firebaseui');

    3. Componente Bower

      Installa FirebaseUI e le sue dipendenze tramite Bower usando il comando seguente:

      $ bower install firebaseui --save

      Includi i file richiesti nel tuo HTML, se il tuo server HTTP serve i file all'interno di bower_components/ :

      <script src="bower_components/firebaseui/dist/firebaseui.js"></script>
<link type="text/css" rel="stylesheet" href="bower_components/firebaseui/dist/firebaseui.css" />

Inizializza FirebaseUI

Dopo aver importato l'SDK, inizializzare l'interfaccia utente di Auth.

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

Imposta i metodi di accesso

Prima di poter utilizzare Firebase per accedere agli utenti, devi abilitare e configurare i metodi di accesso che desideri supportare.

Indirizzo e-mail e password

  1. Nella console Firebase , apri la sezione Autenticazione e abilita l'autenticazione tramite e-mail e password.

  2. Aggiungi l'ID del provider di posta elettronica all'elenco di FirebaseUI signInOptions .

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.EmailAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  3. Facoltativo : EmailAuthProvider può essere configurato per richiedere all'utente di immettere un nome visualizzato (predefinito su true ).

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      requireDisplayName: false
    }
  ]
});

  1. Nella console Firebase , apri la sezione Autenticazione . Nella scheda Metodo di accesso, abilitare il provider di posta elettronica/password . Tieni presente che l'accesso tramite e-mail/password deve essere abilitato per utilizzare l'accesso tramite collegamento e-mail.

  2. Nella stessa sezione, abilita il metodo di accesso tramite collegamento e-mail (accesso senza password) e fai clic su Salva .

  3. Aggiungi l'ID del provider di posta elettronica all'elenco di FirebaseUI signInOptions insieme al collegamento di posta elettronica signInMethod .

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD
    }
  ],
  // Other config options...
});

  4. Quando si esegue il rendering dell'interfaccia utente di accesso in modo condizionale (rilevante per le app a pagina singola), utilizzare ui.isPendingRedirect() per rilevare se l'URL corrisponde a un accesso con collegamento e-mail e se è necessario eseguire il rendering dell'interfaccia utente per completare l'accesso.

    // Is there an email link sign-in?
if (ui.isPendingRedirect()) {
  ui.start('#firebaseui-auth-container', uiConfig);
}
// This can also be done via:
if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
  ui.start('#firebaseui-auth-container', uiConfig);
}

  5. Facoltativo : EmailAuthProvider per l'accesso tramite collegamento e-mail può essere configurato per consentire o impedire all'utente di completare l'accesso tra dispositivi.

    È possibile definire un callback emailLinkSignIn opzionale per restituire la configurazione firebase.auth.ActionCodeSettings da utilizzare quando si invia il collegamento. Ciò offre la possibilità di specificare come gestire il collegamento, un collegamento dinamico personalizzato, uno stato aggiuntivo nel collegamento diretto e così via. Quando non viene fornito, viene utilizzato l'URL corrente e viene attivato un flusso solo Web.

    L'accesso tramite collegamento e-mail in FirebaseUI-web è compatibile con FirebaseUI-Android e FirebaseUI-iOS in cui un utente che avvia il flusso da FirebaseUI-Android può aprire il collegamento e completare l'accesso con FirebaseUI-web. Lo stesso vale per il flusso opposto.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
      signInMethod: firebase.auth.EmailAuthProvider.EMAIL_LINK_SIGN_IN_METHOD,
      // Allow the user the ability to complete sign-in cross device,
      // including the mobile apps specified in the ActionCodeSettings
      // object below.
      forceSameDevice: false,
      // Used to define the optional firebase.auth.ActionCodeSettings if
      // additional state needs to be passed along request and whether to open
      // the link in a mobile app if it is installed.
      emailLinkSignIn: function() {
        return {
          // Additional state showPromo=1234 can be retrieved from URL on
          // sign-in completion in signInSuccess callback by checking
          // window.location.href.
          url: 'https://www.example.com/completeSignIn?showPromo=1234',
          // Custom FDL domain.
          dynamicLinkDomain: 'example.page.link',
          // Always true for email link sign-in.
          handleCodeInApp: true,
          // Whether to handle link in iOS app if installed.
          iOS: {
            bundleId: 'com.example.ios'
          },
          // Whether to handle link in Android app if opened in an Android
          // device.
          android: {
            packageName: 'com.example.android',
            installApp: true,
            minimumVersion: '12'
          }
        };
      }
    }
  ]
});

Provider OAuth (Google, Facebook, Twitter e GitHub)

  1. Nella console Firebase , apri la sezione Autenticazione e abilita l'accesso del provider OAuth specificato. Assicurati che siano specificati anche l'ID client OAuth e il segreto corrispondenti.

  2. Inoltre, nella sezione Autenticazione , assicurati che anche il dominio in cui verrà visualizzata la tua pagina di accesso sia aggiunto all'elenco dei domini autorizzati.

  3. Aggiungi l'ID del provider OAuth all'elenco di signInOptions di FirebaseUI .

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    // List of OAuth providers supported.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  4. Facoltativo : per specificare ambiti personalizzati o parametri OAuth personalizzati per provider, puoi passare un oggetto anziché solo il valore del provider:

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      scopes: [
        'https://www.googleapis.com/auth/contacts.readonly'
      ],
      customParameters: {
        // Forces account selection even when one account
        // is available.
        prompt: 'select_account'
      }
    },
    {
      provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      scopes: [
        'public_profile',
        'email',
        'user_likes',
        'user_friends'
      ],
      customParameters: {
        // Forces password re-entry.
        auth_type: 'reauthenticate'
      }
    },
    firebase.auth.TwitterAuthProvider.PROVIDER_ID, // Twitter does not support scopes.
    firebase.auth.EmailAuthProvider.PROVIDER_ID // Other providers don't need to be given as object.
  ]
});

Numero di telefono

  1. Nella console Firebase , apri la sezione Autenticazione e abilita l'accesso con il numero di telefono.

  2. Assicurati che anche il dominio in cui verrà visualizzata la tua pagina di accesso sia aggiunto all'elenco dei domini autorizzati.

  3. Aggiungi l'ID del provider del numero di telefono all'elenco di FirebaseUI signInOptions .

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Other config options...
});

  4. Opzionale : PhoneAuthProvider può essere configurato con parametri reCAPTCHA personalizzati indipendentemente dal fatto che reCAPTCHA sia visibile o invisibile (predefinito su normale). Fare riferimento ai documenti dell'API reCAPTCHA per maggiori dettagli.

    È anche possibile impostare il paese predefinito da selezionare nell'inserimento del numero di telefono. Fare riferimento all'elenco dei codici paese supportati per l'elenco completo dei codici. Se non specificato, il numero di telefono immesso sarà predefinito per gli Stati Uniti (+1).

    Attualmente sono supportate le seguenti opzioni.

    ui.start('#firebaseui-auth-container', {
  signInOptions: [
    {
      provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
      recaptchaParameters: {
        type: 'image', // 'audio'
        size: 'normal', // 'invisible' or 'compact'
        badge: 'bottomleft' //' bottomright' or 'inline' applies to invisible.
      },
      defaultCountry: 'GB', // Set default country to the United Kingdom (+44).
      // For prefilling the national number, set defaultNationNumber.
      // This will only be observed if only phone Auth provider is used since
      // for multiple providers, the NASCAR screen will always render first
      // with a 'sign in with phone number' button.
      defaultNationalNumber: '1234567890',
      // You can also pass the full phone number string instead of the
      // 'defaultCountry' and 'defaultNationalNumber'. However, in this case,
      // the first country ID that matches the country code will be used to
      // populate the country selector. So for countries that share the same
      // country code, the selected country may not be the expected one.
      // In that case, pass the 'defaultCountry' instead to ensure the exact
      // country is selected. The 'defaultCountry' and 'defaultNationaNumber'
      // will always have higher priority than 'loginHint' which will be ignored
      // in their favor. In this case, the default country will be 'GB' even
      // though 'loginHint' specified the country code as '+1'.
      loginHint: '+11234567890'
    }
  ]
});

Registrazione

Per avviare il flusso di accesso FirebaseUI, inizializza l'istanza FirebaseUI passando l'istanza Auth sottostante.

// Initialize the FirebaseUI Widget using Firebase.
var ui = new firebaseui.auth.AuthUI(firebase.auth());

Definisci l'elemento HTML in cui verrà eseguito il rendering del widget di accesso FirebaseUI.

<!-- The surrounding HTML is left untouched by FirebaseUI.
     Your app may use that space for branding, controls and other customizations.-->
<h1>Welcome to My Awesome App</h1>
<div id="firebaseui-auth-container"></div>
<div id="loader">Loading...</div>

Specificare la configurazione FirebaseUI (fornitori supportati e personalizzazioni dell'interfaccia utente, nonché callback di successo, ecc.).

var uiConfig = {
  callbacks: {
    signInSuccessWithAuthResult: function(authResult, redirectUrl) {
      // User successfully signed in.
      // Return type determines whether we continue the redirect automatically
      // or whether we leave that to developer to handle.
      return true;
    },
    uiShown: function() {
      // The widget is rendered.
      // Hide the loader.
      document.getElementById('loader').style.display = 'none';
    }
  },
  // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
  signInFlow: 'popup',
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    // Leave the lines as is for the providers you want to offer your users.
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    firebase.auth.GithubAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  // Terms of service url.
  tosUrl: '<your-tos-url>',
  // Privacy policy url.
  privacyPolicyUrl: '<your-privacy-policy-url>'
};

Infine, renderizza l'interfaccia FirebaseUI Auth:

// The start method will wait until the DOM is loaded.
ui.start('#firebaseui-auth-container', uiConfig);

Aggiornamento utenti anonimi

Abilitazione dell'aggiornamento utente anonimo

Quando un utente anonimo accede o si registra con un account permanente, vuoi essere sicuro che l'utente possa continuare con ciò che stava facendo prima di registrarsi. Per farlo, imposta semplicemente autoUpgradeAnonymousUsers su true quando configuri l'interfaccia utente di accesso (questa opzione è disabilitata per impostazione predefinita).

Gestione dei conflitti di unione degli aggiornamenti degli utenti anonimi

Ci sono casi in cui un utente, inizialmente registrato in modo anonimo, tenta di eseguire l'aggiornamento a un utente Firebase esistente. Poiché un utente esistente non può essere collegato a un altro utente esistente, FirebaseUI attiverà il callback signInFailure con un codice di errore firebaseui/anonymous-upgrade-merge-conflict quando si verifica quanto sopra. L'oggetto di errore conterrà anche la credenziale permanente. L'accesso con le credenziali permanenti deve essere attivato nella richiamata per completare l'accesso. Prima che l'accesso possa essere completato tramite auth.signInWithCredential(error.credential) , è necessario salvare i dati dell'utente anonimo ed eliminare l'utente anonimo. Quindi, dopo il completamento dell'accesso, copia i dati sull'utente non anonimo. Un esempio di seguito illustra come funzionerebbe questo flusso.

// Temp variable to hold the anonymous user data if needed.
var data = null;
// Hold a reference to the anonymous current user.
var anonymousUser = firebase.auth().currentUser;
ui.start('#firebaseui-auth-container', {
  // Whether to upgrade anonymous users should be explicitly provided.
  // The user must already be signed in anonymously before FirebaseUI is
  // rendered.
  autoUpgradeAnonymousUsers: true,
  signInSuccessUrl: '<url-to-redirect-to-on-success>',
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    firebase.auth.EmailAuthProvider.PROVIDER_ID,
    firebase.auth.PhoneAuthProvider.PROVIDER_ID
  ],
  callbacks: {
    // signInFailure callback must be provided to handle merge conflicts which
    // occur when an existing credential is linked to an anonymous user.
    signInFailure: function(error) {
      // For merge conflicts, the error.code will be
      // 'firebaseui/anonymous-upgrade-merge-conflict'.
      if (error.code != 'firebaseui/anonymous-upgrade-merge-conflict') {
        return Promise.resolve();
      }
      // The credential the user tried to sign in with.
      var cred = error.credential;
      // Copy data from anonymous user to permanent user and delete anonymous
      // user.
      // ...
      // Finish sign-in after data is copied.
      return firebase.auth().signInWithCredential(cred);
    }
  }
});

Prossimi passi

  • Per ulteriori informazioni sull'utilizzo e la personalizzazione di FirebaseUI, visita il README .
  • Se trovi un problema in FirebaseUI e desideri segnalarlo, utilizza il tracker dei problemi di GitHub .