Cette page a été traduite par l'API Cloud Translation.

Fonctionnalités d'authentification avancées

1. Configurer

Obtenez le code source

Dans cet atelier de programmation, vous commencez avec une version de l'exemple d'application Friendly Chat qui est presque terminée. La première chose à faire est donc de cloner le code source :

$ git clone https://github.com/firebase/codelab-friendlychat-web --branch security

Accédez ensuite au répertoire security-start , où vous travaillerez pour le reste de cet atelier de programmation :

$ cd codelab-friendlychat-web/security-start

Maintenant, installez les dépendances pour pouvoir exécuter le code. Si votre connexion Internet est plus lente, cela peut prendre une minute ou deux :

$ npm install && (cd functions && npm install)

Apprenez à connaître ce dépôt

Le répertoire security-solution/ contient le code complet de l’exemple d’application. Le répertoire security-start est l'endroit où vous travaillerez dans l'atelier de programmation, et il manque quelques parties importantes de la mise en œuvre de l'authentification. Les fichiers et fonctionnalités clés de security-start/ et security-solution/ sont :

functions/index.js contient le code Cloud Functions, et c'est là que vous écrirez les fonctions de blocage d'authentification.
public/ - contient les fichiers statiques de votre application de chat
public/scripts/main.js - où le code JS de votre application de chat ( src/index.js ) est compilé pour
src/firebase-config.js - contient l'objet de configuration Firebase utilisé pour initialiser votre application de chat
src/index.js - le code JS de votre application de chat

Obtenez la CLI Firebase

La suite Emulator fait partie de la Firebase CLI (interface de ligne de commande), qui peut être installée sur votre machine avec la commande suivante :

$ npm install -g firebase-tools@latest

Construisez le javascript avec webpack, qui créera main.js dans le répertoire public/scripts/.

webpack build

Ensuite, confirmez que vous disposez de la dernière version de la CLI. Cet atelier de programmation fonctionne avec la version 11.14 ou ultérieure.

$ firebase --version
11.14.2

Connectez-vous à votre projet Firebase

Si vous n'avez pas de projet Firebase, dans la console Firebase , créez un nouveau projet Firebase. Notez l'ID de projet que vous choisissez, car vous en aurez besoin plus tard.

Vous devez maintenant connecter ce code à votre projet Firebase. Exécutez d’abord la commande suivante pour vous connecter à la CLI Firebase :

$ firebase login

Exécutez ensuite la commande suivante pour créer un alias de projet. Remplacez $YOUR_PROJECT_ID par l'ID de votre projet Firebase.

$ firebase use $YOUR_PROJECT_ID

Vous êtes maintenant prêt à exécuter l'application !

2. Exécutez les émulateurs

Dans cette section, vous exécuterez l’application localement. Cela signifie qu'il est temps de démarrer Emulator Suite.

Démarrez les émulateurs

Depuis le répertoire source de l'atelier de programmation, exécutez la commande suivante pour démarrer les émulateurs :

$ firebase emulators:start

Cela servira votre application à l'adresse http://127.0.0.1:5170 et reconstruira continuellement votre code source à mesure que vous apporterez des modifications. Il vous suffira d'effectuer une actualisation matérielle (ctrl-shift-r) localement dans votre navigateur pour voir vos modifications.

Vous devriez voir une sortie comme celle-ci :

i  emulators: Starting emulators: auth, functions, firestore, hosting, storage
✔  functions: Using node@16 from host.
i  firestore: Firestore Emulator logging to firestore-debug.log
✔  firestore: Firestore Emulator UI websocket is running on 9150.
i  hosting[demo-example]: Serving hosting files from: ./public
✔  hosting[demo-example]: Local server: http://127.0.0.1:5170
i  ui: Emulator UI logging to ui-debug.log
i  functions: Watching "[...]" for Cloud Functions...
✔  functions: Loaded functions definitions from source: beforecreated.
✔  functions[us-central1-beforecreated]: providers/cloud.auth/eventTypes/user.beforeCreate function initialized (http://127.0.0.1:5011/[...]/us-central1/beforecreated).
i  Running script: npm start
 
> security@1.0.0 start
> webpack --watch --progress
[...]
webpack 5.50.0 compiled with 1 warning in 990 ms

Une fois que vous voyez le message Tous les émulateurs sont prêts , l'application est prête à être utilisée.

3. Mise en œuvre de l'AMF

MFA a été partiellement implémenté dans ce dépôt. Vous allez ajouter le code pour inscrire d’abord un utilisateur dans MFA, puis pour inviter les utilisateurs inscrits à MFA à fournir un deuxième facteur.

Dans votre éditeur, ouvrez le fichier src/index.js et recherchez la méthode startEnrollMultiFactor() . Ajoutez le code suivant pour configurer le vérificateur reCAPTCHA qui empêchera les abus téléphoniques (le vérificateur reCAPTCHA est défini sur invisible et ne sera pas visible pour les utilisateurs) :

async function startEnrollMultiFactor(phoneNumber) {
  const recaptchaVerifier = new RecaptchaVerifier(
    "recaptcha",
    { size: "invisible" },
    getAuth()
  );

Ensuite, recherchez la méthode finishEnrollMultiFactor() et ajoutez ce qui suit pour inscrire le deuxième facteur :

// Completes MFA enrollment once a verification code is obtained.
async function finishEnrollMultiFactor(verificationCode) {
  // Ask user for the verification code. Then:
  const cred = PhoneAuthProvider.credential(verificationId, verificationCode);
  const multiFactorAssertion = PhoneMultiFactorGenerator.assertion(cred);
 
  // Complete enrollment.
  await multiFactor(getAuth().currentUser)
    .enroll(multiFactorAssertion)
    .catch(function (error) {
      alert(`Error finishing second factor enrollment. ${error}`);
      throw error;
    });
  verificationId = null;
}

Ensuite, recherchez la fonction signIn et ajoutez le flux de contrôle suivant qui invite les utilisateurs inscrits à MFA à saisir leur deuxième facteur :

async function signIn() {
  // Sign in Firebase using popup auth and Google as the identity provider.
  var provider = new GoogleAuthProvider();
  await signInWithPopup(getAuth(), provider)
    .then(function (userCredential) {
      // User successfully signed in and is not enrolled with a second factor.
    })
    .catch(function (error) {
      if (error.code == "auth/multi-factor-auth-required") {
        multiFactorResolver = getMultiFactorResolver(getAuth(), error);
        displaySecondFactor(multiFactorResolver.hints);
      } else {
        alert(`Error signing in user. ${error}`);
      }
    });
}

Le reste de l'implémentation, y compris les fonctions invoquées ici, est déjà terminé. Pour voir comment ils fonctionnent, parcourez le reste du fichier.

4. Essayez de vous connecter avec MFA dans les émulateurs

Essayez maintenant l’implémentation MFA ! Assurez-vous que vos émulateurs sont toujours en cours d'exécution et visitez l'application hébergée localement sur localhost:5170 . Essayez de vous connecter et lorsque vous êtes invité à fournir le code MFA, vous verrez le code MFA dans la fenêtre de votre terminal.

Étant donné que les émulateurs prennent entièrement en charge l'authentification multifacteur, votre environnement de développement peut être entièrement autonome.

Pour en savoir plus sur la mise en œuvre de MFA, consultez nos documents de référence .

5. Créez une fonction de blocage

Certaines applications sont destinées à être utilisées uniquement par un groupe spécifique d'utilisateurs. Dans ces cas, vous souhaitez pouvoir créer des exigences personnalisées pour qu'un utilisateur s'inscrive ou se connecte à votre application.

C'est ce que fournissent les fonctions de blocage : un moyen de créer des exigences d'authentification personnalisées. Ce sont des fonctions Cloud, mais contrairement à la plupart des fonctions, elles s'exécutent de manière synchrone lorsqu'un utilisateur tente de s'inscrire ou de se connecter.

Pour créer une fonction de blocage, ouvrez functions/index.js dans votre éditeur et recherchez la fonction commentée beforecreated .

Remplacez-le par ce code qui permet uniquement aux utilisateurs disposant d'un domaine exemple.com de créer un compte :

exports.beforecreated = beforeUserCreated((event) => {
  const user = event.data;
  // Only users of a specific domain can sign up.
  if (!user.email || !user.email.endsWith("@example.com")) {
    throw new HttpsError("invalid-argument", "Unauthorized email");
  }
});

6. Essayez la fonction de blocage dans les émulateurs

Pour essayer la fonction de blocage, assurez-vous que vos émulateurs sont en cours d'exécution et dans l'application Web sur localhost:5170 , déconnectez-vous.

Ensuite, essayez de créer un compte avec une adresse e-mail qui ne se termine pas par example.com . La fonction de blocage empêchera l’opération de réussir.

Maintenant, réessayez avec une adresse e-mail qui se termine par example.com . Le compte sera créé avec succès.

Grâce aux fonctions de blocage, vous pouvez créer toutes les restrictions dont vous avez besoin concernant l'authentification. Pour en savoir plus, consultez les documents de référence .

résumer

Bon travail! Vous avez ajouté l'authentification multifacteur à une application Web pour aider les utilisateurs à sécuriser leur compte, puis vous avez créé des exigences personnalisées pour que les utilisateurs s'inscrivent à l'aide des fonctions de blocage. Vous avez définitivement mérité un gif !

un gif de gens du bureau faisant la danse sur le toit