Catch up on everthing we announced at this year's Firebase Summit. Learn more

Ajoutez facilement une connexion à votre application Web avec FirebaseUI

FirebaseUI est une bibliothèque construite au - dessus du SDK d' authentification Firebase qui fournit des flux UI drop-in pour une utilisation dans votre application. FirebaseUI offre les avantages suivants :

  • Les fournisseurs multiples - inscription dans les flux pour le courrier électronique / mot de passe, lien e - mail, l' authentification de téléphone, Google, Facebook, Twitter et signe en GitHub.
  • Compte Linking - flux en toute sécurité des comptes utilisateurs lien entre les fournisseurs d'identité.
  • Personnalisation - remplacement des styles CSS de FirebaseUI pour répondre à vos besoins d'applications. De plus, comme FirebaseUI est open source, vous pouvez bifurquer le projet et le personnaliser exactement selon vos besoins.
  • Un robinet de connexion et la connexion automatique - intégration automatique avec inscription d' un robinet pour la connexion en coupe dispositif rapide.
  • UI Localisée - l' internationalisation depuis plus de 40 langues .
  • Mise à niveau des utilisateurs anonymes - possibilité de mettre à jour les utilisateurs anonymes par le biais de connexion / inscription. Pour plus d' informations, visitez la mise à niveau section des utilisateurs anonymes .

Avant que tu commences

  1. Ajouter Firebase authentification à votre application Web .

  2. Incluez FirebaseUI via l'une des options suivantes :

    1. CDN

      Incluez le script et le fichier CSS suivants dans la balise <head> de votre page, sous l'extrait d'initialisation de la console Firebase :

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

      Installez FirebaseUI et ses dépendances via npm à l'aide de la commande suivante :

      $ npm install firebaseui --save
      

      require les modules suivants dans vos fichiers source:

      var firebase = require('firebase');
      var firebaseui = require('firebaseui');
      
    3. Composant de tonnelle

      Installez FirebaseUI et ses dépendances via Bower à l'aide de la commande suivante :

      $ bower install firebaseui --save
      

      Inclure les fichiers requis dans votre code HTML, si votre serveur HTTP sert les fichiers dans bower_components/ :

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

Initialiser FirebaseUI

Après avoir importé le SDK, initialisez l'interface utilisateur d'authentification.

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

Configurer des méthodes de connexion

Avant de pouvoir utiliser Firebase pour connecter les utilisateurs, vous devez activer et configurer les méthodes de connexion que vous souhaitez prendre en charge.

Adresse e-mail et mot de passe

  1. Dans la console Firebase , ouvrez la section d'authentification et activer l' authentification par e - mail et mot de passe.

  2. Ajoutez l'ID de fournisseur de messagerie à la liste des FirebaseUI signInOptions .

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        firebase.auth.EmailAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  3. En option: Le EmailAuthProvider peut être configuré pour demander à l'utilisateur d'entrer un nom d'affichage (par défaut à true ).

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        {
          provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
          requireDisplayName: false
        }
      ]
    });
    
  1. Dans la console Firebase , ouvrez la section d' authentification. Sur l'onglet Connexion méthode, activez le fournisseur Email / mot de passe. Notez que la connexion par e-mail/mot de passe doit être activée pour utiliser la connexion par lien de messagerie.

  2. Dans la même section, activer la connexion méthode lien e - mail (connexion passwordless) et cliquez sur Enregistrer.

  3. Ajoutez l'ID de fournisseur de messagerie à la liste des FirebaseUI signInOptions ainsi que le lien e - mail 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. Lors du rendu de la connexion dans l' interface utilisateur conditionnelle (pertinentes pour les applications d' une seule page), utilisez ui.isPendingRedirect() pour détecter si l'URL correspond à un signe-en avec un lien e - mail et les besoins de l' interface utilisateur à rendre à complète connexion.

    // 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. En option: Le EmailAuthProvider pour le lien e - mail de connexion peut être configuré pour autoriser ou bloquer l'utilisateur de terminer la connexion dans le dispositif cross.

    Une option emailLinkSignIn rappel peut être définie pour renvoyer la firebase.auth.ActionCodeSettings configuration à utiliser lors de l' envoi du lien. Cela permet de spécifier comment le lien peut être géré, un lien dynamique personnalisé, un état supplémentaire dans le lien profond, etc. Lorsqu'elle n'est pas fournie, l'URL actuelle est utilisée et un flux Web uniquement est déclenché.

    Email lien de connexion dans FirebaseUI-web est compatible avec FirebaseUI Android et FirebaseUI iOS où un utilisateur à partir du flux de FirebaseUI Android peut ouvrir le lien et complet de connexion avec FirebaseUI Web. Il en est de même pour le flux inverse.

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

Fournisseurs OAuth (Google, Facebook, Twitter et GitHub)

  1. Dans la console Firebase , ouvrez la section d' authentification et activer la connexion au fournisseur de OAuth spécifié. Assurez-vous que l'ID client et le secret OAuth correspondants sont également spécifiés.

  2. Toujours dans la section d' authentification, assurez - vous que le domaine où votre page de connexion sera rendu est également ajouté à la liste des domaines autorisés.

  3. Ajoutez l'ID de fournisseur OAuth à la liste des 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. Facultatif: Pour spécifier des étendues personnalisées ou paramètres OAuth personnalisés par fournisseur, vous pouvez passer un objet au lieu de simplement la valeur du fournisseur:

    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.
      ]
    });
    

Numéro de téléphone

  1. Dans la console Firebase , ouvrez la section d'authentification et activer la connexion numéro de téléphone.

  2. Assurez-vous que le domaine sur lequel votre page de connexion sera affichée est également ajouté à la liste des domaines autorisés.

  3. Ajoutez le numéro de téléphone fournisseur ID à la liste des FirebaseUI signInOptions .

    ui.start('#firebaseui-auth-container', {
      signInOptions: [
        firebase.auth.PhoneAuthProvider.PROVIDER_ID
      ],
      // Other config options...
    });
    
  4. En option: Le PhoneAuthProvider peut être configuré avec des paramètres personnalisés reCAPTCHA si reCAPTCHA est visible ou invisible (par défaut à la normale). Reportez - vous à l' API reCAPTCHA docs pour plus de détails.

    Le pays par défaut à sélectionner dans la saisie du numéro de téléphone peut également être défini. Reportez - vous à la liste des codes de pays pris en charge pour la liste complète des codes. S'il n'est pas spécifié, le numéro de téléphone saisi sera par défaut aux États-Unis (+1).

    Les options suivantes sont actuellement prises en charge.

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

S'identifier

Pour lancer le signe FirebaseUI en flux, initialiser l'instance FirebaseUI en passant sous - jacent Auth exemple.

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

Définissez l'élément HTML dans lequel le widget de connexion FirebaseUI sera affiché.

<!-- 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>

Spécifiez la configuration FirebaseUI (fournisseurs pris en charge et personnalisations de l'interface utilisateur ainsi que les rappels de réussite, etc.).

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>'
};

Enfin, rendez l'interface FirebaseUI Auth :

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

Mise à niveau des utilisateurs anonymes

Activation de la mise à niveau des utilisateurs anonymes

Lorsqu'un utilisateur anonyme se connecte ou s'inscrit avec un compte permanent, vous voulez être sûr que l'utilisateur peut continuer avec ce qu'il faisait avant de s'inscrire. Pour ce faire, tout simplement mis autoUpgradeAnonymousUsers à true lorsque vous configurez le signe dans l' interface utilisateur (cette option est désactivée par défaut).

Gestion des conflits de fusion de mise à niveau d'utilisateurs anonymes

Il existe des cas où un utilisateur, initialement connecté de manière anonyme, essaie de passer à un utilisateur Firebase existant. Étant donné qu'un utilisateur existant ne peut pas être lié à un autre utilisateur existant, FirebaseUI déclenche le signInFailure rappel avec un code d'erreur firebaseui/anonymous-upgrade-merge-conflict à firebaseui/anonymous-upgrade-merge-conflict lorsque le produit au- dessus. L'objet d'erreur contiendra également les informations d'identification permanentes. La connexion avec les informations d'identification permanentes doit être déclenchée dans le rappel pour terminer la connexion. Avant peut être complété de connexion via auth.signInWithCredential(error.credential) , vous devez enregistrer les données de l'utilisateur anonyme et supprimer l'utilisateur anonyme. Ensuite, une fois la connexion terminée, copiez les données vers l'utilisateur non anonyme. Un exemple ci-dessous illustre le fonctionnement de ce flux.

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

Prochaines étapes

  • Pour plus d' informations sur l' utilisation et la personnalisation FirebaseUI, visitez le README .
  • Si vous trouvez un problème dans FirebaseUI et que vous souhaitez signaler, utilisez le suivi des problèmes GitHub .