Ajouter facilement une connexion à votre application Web avec FirebaseUI

FirebaseUI est une bibliothèque basée sur en haut du SDK Firebase Authentication, qui fournit des flux d'interface utilisateur intégrés à utiliser dans votre application. FirebaseUI offre les avantages suivants:

  • Fournisseurs multiples : procédures de connexion par adresse e-mail/mot de passe, lien de messagerie et numéro de téléphone Google Cloud, ainsi que la connexion à Google, Facebook, Twitter et GitHub.
  • Association de comptes : procédure permettant d'associer de façon sécurisée les comptes utilisateur dans toutes les identités fournisseurs de services cloud.
  • Personnalisation : remplacez les styles CSS de FirebaseUI pour qu'ils correspondent à votre application. exigences. De plus, comme FirebaseUI est Open Source, vous pouvez dupliquer projet et de le personnaliser exactement en fonction de vos besoins.
  • Inscription en un seul geste et connexion automatique : intégration automatique avec S'inscrire d'un simple geste pour une connexion inter-appareil rapide.
  • Interface utilisateur localisée : internationalisation pour les utilisateurs de plus de 40 ans langues.
  • Mettre à niveau les utilisateurs anonymes : possibilité de mettre à niveau les utilisateurs anonymes via la connexion/l'inscription. Pour plus d'informations, consultez la page Mettre à niveau les utilisateurs anonymes .

Avant de commencer

  1. Ajoutez Firebase Authentication à votre application Web, en vous assurant d'utiliser la compatibilité avec la version 9 (recommandée) ou une version antérieure du SDK (voir la barre latérale ci-dessus).

  2. Incluez FirebaseUI en utilisant l'une des options suivantes:

    1. 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 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. Module npm

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

      $ npm install firebaseui --save

      Utilisez require pour les modules suivants dans vos fichiers sources:

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

    3. Composant Bower

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

      $ bower install firebaseui --save

      Incluez les fichiers requis dans votre code HTML, si votre serveur HTTP diffuse le 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'UI 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 connecter des utilisateurs à l'aide de Firebase, vous devez activer et configurer le 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 Authentification et activez l'option l'authentification par e-mail et mot de passe.

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

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

  3. Facultatif: EmailAuthProvider peut être configuré pour exiger que l'utilisateur pour saisir un nom à afficher (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 Authentification. Le l'onglet Mode de connexion, activez le fournisseur Adresse e-mail/Mot de passe. Remarque la connexion par e-mail/mot de passe doit être activée pour utiliser la connexion par lien par e-mail.

  2. Dans la même section, activez la méthode de connexion Lien envoyé par e-mail (connexion sans mot de passe), puis cliquez sur Enregistrer.

  3. Ajoutez l'ID du fournisseur de messagerie à la liste de FirebaseUI signInOptions avec avec le lien vers l'adresse 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 de l'affichage de l'interface utilisateur de connexion de manière conditionnelle (pour les applications monopages), Utilisez ui.isPendingRedirect() pour détecter si l'URL correspond à une page de connexion avec un lien vers une adresse e-mail et l'UI doit être affiché pour finaliser 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);
}

  5. Facultatif: La valeur EmailAuthProvider pour la connexion via un lien envoyé par e-mail peut être configuré pour autoriser ou empêcher l'utilisateur de se connecter sur plusieurs appareils.

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

    La connexion par lien par e-mail dans FirebaseUI-web est compatible avec Interface utilisateur Firebase (Android) et Interface utilisateur Firebase-iOS Un utilisateur qui lance le flux depuis FirebaseUI-Android peut ouvrir le lien et connectez-vous avec FirebaseUI-web. Il en va 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 Authentification et activez l'option la connexion au fournisseur OAuth spécifié. Assurez-vous que l'ID client et le secret OAuth correspondants sont également spécifiés.

  2. Dans la section Authentification également, vérifiez que le domaine sur lequel se trouve votre la page de connexion affichée est également ajoutée à la liste des domaines autorisés.

  3. Ajoutez l'ID du fournisseur OAuth à la liste de 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 champs d'application personnalisés ou des paramètres OAuth personnalisés par vous pouvez transmettre 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 Authentification et activez l'option connexion via un 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 l'ID du fournisseur de numéro de téléphone à la liste de FirebaseUI signInOptions.

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

  4. Facultatif: PhoneAuthProvider peut être configuré avec un reCAPTCHA personnalisé. détermine si reCAPTCHA est visible ou invisible (par défaut, sa valeur est normale). Consultez le Documentation sur l'API reCAPTCHA pour en savoir plus.

    Vous pouvez également définir le pays par défaut à sélectionner lors de la saisie du numéro de téléphone. Consultez le liste des codes pays acceptés pour obtenir la liste complète des codes. Si aucune valeur n'est spécifiée, le numéro de téléphone saisi par défaut est les États-Unis (+1).

    Les options suivantes sont actuellement acceptées.

    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 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'UI, ainsi que les rappels de succès, 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 FirebaseUI Auth :

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

Mettre à niveau les utilisateurs anonymes

Activer la mise à niveau des utilisateurs anonymes

Lorsqu'un utilisateur anonyme se connecte ou s'inscrit avec un compte permanent, vous pouvez pour s'assurer que l'utilisateur peut continuer ce qu'il faisait avant de s'inscrire. Pour ce faire, il vous suffit de définir 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 des mises à niveau d'utilisateurs anonymes

Dans certains cas, lorsqu'un utilisateur, initialement connecté de manière anonyme, tente d'effectuer une mise à niveau à un utilisateur Firebase existant. Un utilisateur existant ne peut pas être associé à un autre utilisateur existant, FirebaseUI déclenchera le rappel signInFailure avec une code d'erreur firebaseui/anonymous-upgrade-merge-conflict lorsque ce qui précède se produit. L'objet d'erreur contiendra également l'identifiant permanent. Connectez-vous avec le des identifiants permanents doivent être déclenchés dans le rappel pour terminer la connexion. Avant de vous connecter, vous pouvez auth.signInWithCredential(error.credential), vous devez enregistrer l'adresse anonyme les données de l'utilisateur et supprimer l'utilisateur anonyme. Ensuite, une fois la connexion terminée, copiez les données sur l'utilisateur non anonyme. L'exemple ci-dessous montre comment le flux de travail.

// 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 la README
  • Si vous rencontrez un problème dans FirebaseUI et que vous souhaitez le signaler, utilisez la méthode Outil de suivi des problèmes GitHub.