Ajouter facilement une connexion à votre application Web avec FirebaseUI

FirebaseUI est une bibliothèque basée sur le SDK Firebase Authentication qui fournit des flux d'interface utilisateur prêts à l'emploi à utiliser dans votre application. FirebaseUI offre les avantages suivants :

  • Plusieurs fournisseurs : flux de connexion pour l'adresse e-mail/le mot de passe, le lien envoyé par e-mail, l'authentification par téléphone, Google, Facebook, Twitter et GitHub.
  • Association de comptes : flux permettant d'associer en toute sécurité des comptes utilisateur entre différents fournisseurs d'identité.
  • Personnalisation : remplacez les styles CSS de FirebaseUI pour répondre aux exigences de votre application. De plus, comme FirebaseUI est Open Source, vous pouvez créer un fork du projet et le personnaliser exactement selon vos besoins.
  • Inscription en un clic et connexion automatique : intégration automatique à l'inscription en un clic pour une connexion rapide sur plusieurs appareils.
  • Interface utilisateur localisée : internationalisation pour plus de 40 langues.
  • Mise à niveau des utilisateurs anonymes : possibilité de mettre à niveau les utilisateurs anonymes via la connexion/l'inscription. Pour en savoir plus, consultez la section Mise à niveau des utilisateurs anonymes.

Avant de commencer

  1. Ajoutez Firebase Authentication à votre application Web, en vous assurant d'utiliser l'API avec espace de noms v9 ou version ultérieure (et non l'API modulaire ; voir la barre latérale ci-dessus).

  2. Incluez FirebaseUI à l'aide de l'une des options suivantes :

    • CDN

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

      <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" />

    • 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');

    • Composant Bower

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

      $ bower install firebaseui --save

      Incluez les fichiers requis dans votre code HTML si votre serveur HTTP diffuse 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 des 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, accédez à Sécurité > Authentification.

  2. Dans l'onglet Méthode de connexion, activez le fournisseur de connexion Adresse e-mail/Mot de passe.

  3. Ajoutez l'ID du fournisseur d'e-mails à la liste des signInOptions de FirebaseUI.

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

  4. Facultatif : Vous pouvez configurer EmailAuthProvider pour exiger de l'utilisateur qu'il saisisse un nom à afficher (la valeur par défaut est true).

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

  1. Dans la console Firebase, accédez à Sécurité > Authentification.

  2. Dans l'onglet Méthode de connexion, activez le fournisseur de connexion Adresse e-mail/Mot de passe. Notez que la connexion par adresse e-mail/mot de passe doit être activée pour utiliser la connexion par lien envoyé par e-mail.

  3. Dans la même section, activez le fournisseur de connexion Lien envoyé par e-mail (connexion sans mot de passe).

  4. Cliquez sur Enregistrer.

  5. Ajoutez l'ID du fournisseur d'e-mails à la liste des signInOptions de FirebaseUI, ainsi que le signInMethod du lien envoyé par e-mail.

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

  6. Lorsque vous affichez l'interface utilisateur de connexion de manière conditionnelle (pertinent pour les applications à une seule page), utilisez ui.isPendingRedirect() pour détecter si l'URL correspond à une connexion par lien envoyé par e-mail et si l'interface utilisateur doit être affichée pour terminer la 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);
}

  7. Facultatif : Vous pouvez configurer EmailAuthProvider pour la connexion par lien envoyé par e-mail afin d' autoriser ou d'empêcher l'utilisateur de se connecter sur plusieurs appareils.

    Vous pouvez définir un rappel emailLinkSignIn facultatif pour renvoyer la firebase.auth.ActionCodeSettings configuration à utiliser lors de l'envoi du lien. Cela vous permet de spécifier comment gérer le lien, un lien dynamique personnalisé, un état supplémentaire dans le lien profond, etc. Si aucune valeur n'est fournie, l'URL actuelle est utilisée et un flux Web uniquement est déclenché.

    La connexion par lien envoyé par e-mail dans FirebaseUI-Web est compatible avec FirebaseUI-Android et FirebaseUI-iOS . Un utilisateur qui démarre le flux à partir de FirebaseUI-Android peut ouvrir le lien et se connecter avec FirebaseUI-Web. Et inversement.

    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, accédez à Sécurité > Authentification.

  2. Dans l'onglet Méthode de connexion, activez la connexion du fournisseur OAuth spécifié. Assurez-vous que l'ID client et le code secret OAuth correspondants sont également spécifiés.

  3. Si vous ne l'avez pas déjà fait, autorisez le domaine de votre application :

    1. Dans la console Firebase, accédez à l'onglet Sécurité > Authentification > Paramètres.

    2. Dans la section Domaines autorisés, cliquez sur Ajouter un domaine, puis ajoutez votre domaine.

  4. Ajoutez l'ID du fournisseur OAuth à la liste des signInOptions de 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...
});

  5. Facultatif : Pour spécifier des autorisations personnalisées ou des paramètres OAuth personnalisés par fournisseur, vous pouvez transmettre un objet au lieu de la valeur du fournisseur uniquement :

    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, accédez à Sécurité > Authentification.

  2. Dans l'onglet Méthode de connexion, activez le fournisseur de connexion Téléphone.

  3. Si vous ne l'avez pas déjà fait, autorisez le domaine de votre application :

    1. Dans la console Firebase, accédez à l'onglet Sécurité> Authentification > Paramètres.

    2. Dans la section Domaines autorisés, cliquez sur Ajouter un domaine, puis ajoutez votre domaine.

  4. Ajoutez l'ID du fournisseur de numéros de téléphone à la liste des signInOptions de FirebaseUI.

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

  5. Facultatif : Vous pouvez configurer PhoneAuthProvider avec des paramètres reCAPTCHA personnalisés, que reCAPTCHA soit visible ou invisible (la valeur par défaut est "normal"). Pour en savoir plus, consultez la documentation de l'API reCAPTCHA.

    Vous pouvez également définir le pays à sélectionner par défaut dans le champ de saisie du numéro de téléphone. Pour obtenir la liste complète des codes, consultez la liste des codes de pays compatibles. Si aucune valeur n'est spécifiée, le champ de saisie du numéro de téléphone sera défini par défaut sur les États-Unis (+1).

    Les options suivantes sont actuellement compatibles.

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

Se connecter

Pour lancer le flux de connexion FirebaseUI, initialisez l'instance FirebaseUI en transmettant l'instance Auth sous-jacente.

// 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 compatibles et personnalisations de l'interface utilisateur, ainsi que 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, affichez l'interface d'authentification FirebaseUI :

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

Mise à niveau des utilisateurs anonymes

Activer la mise à niveau des utilisateurs anonymes

Lorsqu'un utilisateur anonyme se connecte ou s'inscrit avec un compte permanent, vous devez vous assurer qu'il peut continuer ce qu'il faisait avant de s'inscrire. Pour ce faire, définissez simplement autoUpgradeAnonymousUsers sur true lorsque vous configurez l'interface utilisateur de connexion (cette option est désactivée par défaut).

Gérer les conflits de fusion lors de la mise à niveau des utilisateurs anonymes

Dans certains cas, un utilisateur, initialement connecté de manière anonyme, tente de passer à un utilisateur Firebase existant. Étant donné qu'un utilisateur existant ne peut pas être associé à un autre utilisateur existant, FirebaseUI déclenche le rappel signInFailure avec un code d'erreur firebaseui/anonymous-upgrade-merge-conflict lorsque cela se produit. L'objet d'erreur contient également les identifiants permanents. La connexion avec les identifiants permanents doit être déclenchée dans le rappel pour terminer la connexion. Avant de pouvoir terminer la 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. L'exemple ci-dessous montre comment ce flux fonctionne.

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

Étapes suivantes

  • Pour en savoir plus sur l'utilisation et la personnalisation de FirebaseUI, consultez le fichier README.
  • Si vous rencontrez un problème dans FirebaseUI et que vous souhaitez le signaler, utilisez l' Issue Tracker GitHub.