Aggiungi facilmente l'accesso alla tua app web con FirebaseUI

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

  • Più fornitori: flussi di accesso per email/password, link email, autenticazione telefonica, accesso a Google, Facebook, Twitter e GitHub.
  • Collegamento dell'account: flussi per collegare in sicurezza gli account utente tra i diversi account. di Google Cloud.
  • Personalizzazione: sostituisci gli stili CSS di FirebaseUI in modo che corrispondano all'app i tuoi requisiti. Inoltre, poiché FirebaseUI è open source, puoi eseguire il fork del progetto e personalizzarlo esattamente in base alle tue esigenze.
  • Registrazione con un tocco e accesso automatico: integrazione automatica con Registrazione con un tocco per un accesso cross-device rapido.
  • UI localizzata: internazionalizzazione per oltre 40 lingua.
  • Upgrade degli utenti anonimi: possibilità di eseguire l'upgrade degli utenti anonimi tramite accesso/registrazione. Per ulteriori informazioni, leggi l'articolo Upgrade degli utenti anonimi .
di Gemini Advanced.

Prima di iniziare

  1. Aggiungi Firebase Authentication alla tua applicazione web, verificando di utilizzare la versione 9 compat (consigliata) o l'SDK precedente (consulta barra laterale in alto).

  2. Includi l'interfaccia utente di Firebase utilizzando una delle seguenti opzioni:

    1. CDN

      Includi il seguente script e file CSS nella sezione <head> tag di della tua pagina, sotto lo snippet di inizializzazione della console 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 utilizzando quanto segue :

      $ 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 relative dipendenze tramite Bower utilizzando il seguente comando:

      $ bower install firebaseui --save

      Includi i file richiesti nel codice HTML, se il server HTTP pubblica 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, inizializza l'interfaccia utente Auth.

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

Configura i metodi di accesso

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

Indirizzo email e password

  1. Nella console Firebase, apri la sezione Autenticazione e attiva l'autenticazione basata su email e password.

  2. Aggiungi l'ID del provider email 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 in modo da richiedere all'utente per inserire un nome visualizzato (il valore predefinito è true).

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

  1. Nella console Firebase, apri la sezione Autenticazione. Il giorno Nella scheda Metodo di accesso, attiva il provider Email/Password. Tieni presente che per utilizzare l'accesso tramite link email è necessario attivare l'accesso tramite email/password.

  2. Nella stessa sezione, attiva l'accesso Invia email tramite link (accesso senza password). e fai clic su Salva.

  3. Aggiungi l'ID provider email all'elenco di FirebaseUI signInOptions insieme al link email 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 esegui il rendering dell'interfaccia utente di accesso in modo condizionale (pertinente per le app a pagina singola), utilizza ui.isPendingRedirect() per rilevare se l'URL corrisponde a un accesso con link email e se l'interfaccia utente deve essere visualizzata 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: il EmailAuthProvider per l'accesso tramite link via email può essere configurate per consentire o impedire all'utente di completare l'accesso cross-device.

    È possibile definire un callback emailLinkSignIn facoltativo per restituire il valore firebase.auth.ActionCodeSettings configurazione da utilizzare per l'invio del link. Ciò consente di specificare come può essere gestito il collegamento, link dinamico personalizzato, stato aggiuntivo nel link diretto e così via. Se non viene fornito, viene utilizzato l'URL corrente e viene attivato solo il flusso.

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

    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 attiva all'accesso del provider OAuth specificato. Assicurati che il token OAuth sono specificati anche l'ID client e il secret.

  2. Sempre nella sezione Autenticazione, assicurati che il dominio in cui la pagina di accesso viene aggiunta anche all'elenco dei domini autorizzati.

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

    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 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 attiva l'accesso con numero di telefono.

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

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

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

  4. Facoltativo: PhoneAuthProvider può essere configurato con reCAPTCHA personalizzato se reCAPTCHA è visibile o invisibile (il valore predefinito è normale). Consulta le Documentazione sull'API reCAPTCHA per ulteriori dettagli.

    È anche possibile impostare il paese predefinito da selezionare nell'inserimento del numero di telefono. Per un elenco completo dei codici, consulta l'elenco dei codici paese supportati. Se non specificato, il numero di telefono inserito verrà impostato automaticamente su Stati Uniti. (+1).

    Al momento 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'
    }
  ]
});

Accedi

Per avviare il flusso di accesso di 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à visualizzato il 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>

Specifica la configurazione FirebaseUI (provider supportati e personalizzazioni dell'interfaccia utente) nonché i callback di successo e così via).

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, esegui il rendering dell'interfaccia FirebaseUI Auth:

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

Aggiornamento degli utenti anonimi

Abilitazione dell'upgrade degli utenti anonimi

Quando un utente anonimo accede o si registra con un account permanente, vuoi per assicurarsi che l'utente possa continuare le attività che stava svolgendo prima di registrarsi. Per farlo, è sufficiente impostare autoUpgradeAnonymousUsers su true durante la configurazione L'interfaccia utente di accesso (questa opzione è disattivata per impostazione predefinita).

Gestione dei conflitti di unione degli upgrade degli utenti anonimi

A volte, un utente, inizialmente connesso in modo anonimo, tenta di eseguire l'upgrade a un utente Firebase esistente. Dato che 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 errore conterrà anche la credenziale permanente. Accedi con per completare l'accesso deve essere attivata la credenziale permanente nel callback. Prima di poter completare l'accesso tramite auth.signInWithCredential(error.credential), devi salvare l'anonimo i dati dell'utente ed eliminare l'utente anonimo. Al termine dell'accesso, copia i dati all'utente non anonimo. Un esempio di seguito illustra come questo del flusso di lavoro.

// 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);
    }
  }
});

Passaggi successivi

  • Per ulteriori informazioni sull'utilizzo e sulla personalizzazione di FirebaseUI, visita il LEGGIMI.
  • Se rilevi un problema in FirebaseUI e vuoi segnalarlo, utilizza la Tracker dei problemi GitHub.