Connecter un utilisateur avec une adresse e-mail via Identity Platform

Connecter un utilisateur avec une adresse e-mail via Identity Platform

Apprenez à utiliser Identity Platform pour que les utilisateurs se connectent à l'aide d'une adresse e-mail et d'un mot de passe.

---

Pour obtenir des instructions détaillées sur cette tâche directement dans la Google Cloud console, cliquez sur Visite guidée:

Visite guidée

---

Avant de commencer

Connectez-vous à votre Google Cloud compte. Si vous débutez sur Google Cloud, créez un compte pour évaluer les performances de nos produits en conditions réelles. Les nouveaux clients bénéficient également de 300 $de crédits sans frais pour exécuter, tester et déployer des charges de travail.
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
Roles required to select or create a project
• Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
• Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.
Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.
Go to project selector
Verify that billing is enabled for your Google Cloud project.
Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin
Check for the roles
1. In the Google Cloud console, go to the IAM page.

   Go to IAM
2. Select the project.

3. In the Principal column, find all rows that identify you or a group that you're included in. To learn which groups you're included in, contact your administrator.

4. For all rows that specify or include you, check the Role column to see whether the list of roles includes the required roles.
Grant the roles
1. In the Google Cloud console, go to the IAM page.

   Go to IAM
2. Select the project.
3. Click Grant access.

4. In the New principals field, enter your user identifier. This is typically the email address for a Google Account.

5. Click Select a role, then search for the role.
6. To grant additional roles, click Add another role and add each additional role.
7. Click Save.

In the Google Cloud console, on the project selector page, select or create a Google Cloud project.

Roles required to select or create a project

• Select a project: Selecting a project doesn't require a specific IAM role—you can select any project that you've been granted a role on.
• Create a project: To create a project, you need the Project Creator role (roles/resourcemanager.projectCreator), which contains the resourcemanager.projects.create permission. Learn how to grant roles.

Note: If you don't plan to keep the resources that you create in this procedure, create a project instead of selecting an existing project. After you finish these steps, you can delete the project, removing all resources associated with the project.

Go to project selector

Verify that billing is enabled for your Google Cloud project.

Make sure that you have the following role or roles on the project: Identity Platform Admin, Service Usage Admin

Check for the roles

1. In the Google Cloud console, go to the IAM page.

   Go to IAM
2. Select the project.

3. In the Principal column, find all rows that identify you or a group that you're included in. To learn which groups you're included in, contact your administrator.

4. For all rows that specify or include you, check the Role column to see whether the list of roles includes the required roles.

Grant the roles

1. In the Google Cloud console, go to the IAM page.

   Go to IAM
2. Select the project.
3. Click Grant access.

4. In the New principals field, enter your user identifier. This is typically the email address for a Google Account.

5. Click Select a role, then search for the role.
6. To grant additional roles, click Add another role and add each additional role.
7. Click Save.

Activer Identity Platform

1. Dans la Google Cloud console, accédez à la page Identity Platform dans le Cloud Marketplace.

   Accéder à Identity Platform

2. Cliquez sur Activer Identity Platform.

Configurer une connexion par adresse e-mail

1. Accédez à la page Fournisseurs d'identité.

   Accéder à la page "Fournisseurs d'identité"

2. Sur la page Fournisseurs d'identité, cliquez sur Ajouter un fournisseur.

3. Dans la liste Sélectionner un fournisseur, sélectionnez Adresse e-mail/Mot de passe.

4. Cliquez sur le bouton Activé pour l'activer.

5. Pour enregistrer les paramètres du fournisseur, cliquez sur Enregistrer.

Créer un compte utilisateur

1. Dans la Google Cloud console, accédez à la page Utilisateurs.

   Accéder à la page "Utilisateurs"

2. Cliquez sur Ajouter un utilisateur.

3. Dans le champ Adresse e-mail, saisissez une adresse e-mail et un mot de passe. Notez ces deux valeurs, car vous en aurez besoin plus tard.

4. Pour ajouter l'utilisateur, cliquez sur Ajouter. Le nouvel utilisateur s'affiche sur la page Utilisateurs.

Connecter l'utilisateur

Les étapes à suivre pour connecter l'utilisateur varient en fonction de la version du SDK utilisée par votre application.

Assurez-vous de suivre les étapes appropriées pour votre application.

Remarque : L'utilisation du SDK v9 est fortement recommandée, en particulier pour les applications de production. Si vous avez besoin d'aide pour d'autres options de gestion du SDK, comme window.firebase, consultez Mettre à niveau la version 8 vers le SDK Web modulaire ou Autres façons d'ajouter Firebase.

SDK v9 (modulaire)

Installer le SDK et initialiser Firebase

La version 9 du SDK Firebase JS utilise un format de module JavaScript.

Ce workflow utilise npm et nécessite des bundlers de modules ou des outils de framework JavaScript, car le SDK v9 est optimisé pour fonctionner avec des bundlers de modules afin d' éliminer le code inutilisé (tree-shaking) et de réduire la taille du SDK.

Pour utiliser le SDK v9, procédez comme suit :

1. Dans le répertoire du projet, installez Firebase à l'aide de npm :

   npm install firebase

2. Initialisez Firebase dans votre application et créez un objet d'application Firebase :

   import { initializeApp } from 'firebase/app';
   
   const firebaseConfig = {
       apiKey: "API_KEY",
       authDomain: "AUTH_DOMAIN"
   };
   
   const app = initializeApp(firebaseConfig);

   Remplacez les éléments suivants :

   • API_KEY : apiKey de votre projet Firebase.

     Important : Évitez d'utiliser plusieurs clés API dans votre projet Firebase si les restrictions d'application sont définies sur None ou Websites. L'utilisation de plusieurs clés avec ces restrictions spécifiques peut entraîner une ambiguïté dans la façon dont Firebase sélectionne une clé, ce qui peut entraîner un comportement inattendu ou perturber vos workflows destinés aux utilisateurs.

   • AUTH_DOMAIN : authDomain de votre projet Firebase.

   Vous trouverez ces valeurs dans la configuration du projet Firebase de votre application.

   Une application Firebase est un objet de type conteneur qui stocke une configuration commune et partage l'authentification entre les services Firebase. Une fois que vous avez initialisé un objet d'application Firebase dans votre code, vous pouvez ajouter et commencer à utiliser les services Firebase.

   Si vous utilisez ESM et que vous souhaitez utiliser des modules de navigateur, remplacez toutes vos lignes import par le modèle suivant :
   import { } from 'https://www.gstatic.com/firebasejs/12.12.1/firebase-SERVICE.js',
   où SERVICE est un nom de SDK tel que firebase-firestore.

   L'utilisation de modules de navigateur est un moyen rapide de commencer, mais nous vous recommandons d'utiliser un bundler de modules pour la production.

Accéder à Identity Platform dans votre code JavaScript

Maintenant que vous avez initialisé le SDK Firebase, vous pouvez l'utiliser n'importe où dans votre application. Voici par exemple une application qui tente de connecter un utilisateur codé en dur et d'afficher le résultat sur une page Web.

import { initializeApp } from 'firebase/app';
import {
  onAuthStateChanged,
  signInWithEmailAndPassword,
  getAuth
} from 'firebase/auth';

const firebaseConfig = {
  apiKey: "API_KEY",
  authDomain: "AUTH_DOMAIN"
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app, {/* extra options */ });

document.addEventListener("DOMContentLoaded", () => {
  onAuthStateChanged(auth, (user) => {
      if (user) {
          document.getElementById("message").innerHTML = "Welcome, " + user.email;
      }
      else {
          document.getElementById("message").innerHTML = "No user signed in.";
      }
  });
  signIn();
});

function signIn() {
  const email = "EMAIL_ID";
  const password = "PASSWORD";
  signInWithEmailAndPassword(auth, email, password)
      .catch((error) => {
          document.getElementById("message").innerHTML = error.message;
      });
}

Remplacez les éléments suivants :

• API_KEY : apiKey de votre projet Firebase.
• AUTH_DOMAIN : authDomain de votre projet Firebase.
• EMAIL_ID : adresse e-mail de l'utilisateur que vous avez créée précédemment dans ce guide.
• PASSWORD : mot de passe de l'utilisateur que vous avez créé précédemment dans ce guide.

Utiliser un bundler de modules pour réduire la taille

Remarque : Vous pouvez ignorer cette étape si vous utilisez un outil CLI de framework JavaScript tel que Angular CLI, Next.js, Vue CLI, ou Create React App. Pour en savoir plus, consultez notre guide sur le regroupement de modules.

Le SDK Web Firebase est conçu pour fonctionner avec des bundlers de modules afin de supprimer tout code inutilisé (tree-shaking). Nous vous recommandons vivement d'utiliser cette approche pour les applications de production. Des outils tels que Angular CLI, Next.js, Vue CLI, ou Create React App gèrent automatiquement le regroupement de modules pour les bibliothèques installées via npm et importées dans votre code.

Par exemple, vous pouvez utiliser Webpack pour générer un dossier dist contenant votre application groupée et le code de dépendance. Pour en savoir plus, consultez Utiliser des bundlers de modules avec Firebase.

Importer votre code JavaScript dans votre page

1. Créez un fichier nommé index.html.

2. Ajoutez deux conteneurs HTML de base et importez le fichier js groupé.

   <script defer src="js/bundled.js"></script>
   <div>Identity Platform Quickstart</div>
   <div id="message">Loading...</div>
   

3. Lancez index.html dans votre navigateur Web. Un message de bienvenue contenant l'adresse e-mail de votre utilisateur s'affiche.

SDK v8 (ancienne version)

Créer une page Web

1. Sur votre machine locale, créez un fichier nommé index.html.

2. Dans le fichier HTML, ajoutez deux conteneurs HTML :

   <div>Identity Platform Quickstart</div>
   <div id="message">Loading...</div>
   

Initialiser le SDK client Identity Platform avec votre clé API

1. Dans la Google Cloud console, accédez à la page Fournisseurs d'identité.

   Accéder à la page "Fournisseurs d'identité"

2. Cliquez sur Informations sur la configuration de l'application.

3. Copiez le code d'initialisation dans index.html.

Connecter l'utilisateur

1. Pour connecter l'utilisateur, copiez le code suivant dans index.html :

   <script>
     var email = "EMAIL_ID";
     var password = "PASSWORD";
   
     firebase.auth().onAuthStateChanged(function(user) {
       if (user) {
         document.getElementById("message").innerHTML = "Welcome, " + user.email;
       } else {
         document.getElementById("message").innerHTML = "No user signed in.";
       }
     });
   
     firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
       document.getElementById("message").innerHTML = error.message;
     });
   </script>
   

   Ce code appelle signInWithEmailAndPassword() , puis traite le résultat avec le rappel onAuthStateChanged().

   Remplacez les éléments suivants :

   • EMAIL_ID : adresse e-mail de l'utilisateur que vous avez créé précédemment
   • PASSWORD: mot de passe de l'utilisateur que vous avez créé précédemment

2. Ouvrez index.html dans votre navigateur Web. Un message de bienvenue contenant l'adresse e-mail de votre utilisateur s'affiche.

Le nombre de tentatives de connexion infructueuses est limité. Plusieurs tentatives de connexion rapides et infructueuses entraînent le verrouillage temporaire du compte de l'utilisateur.

Pour en savoir plus sur les autres limites d'Identity Platform, consultez Quotas et limites.

Libérer de l'espace

Pour éviter que les ressources utilisées dans cette démonstration soient facturées sur votre Google Cloud compte pour les ressources utilisées sur cette page, procédez comme suit :

Supprimer le fournisseur et l'utilisateur

Si vous avez utilisé un projet Google Cloud existant, supprimez le fournisseur et l'utilisateur que vous avez créés pour éviter que des frais ne soient facturés sur votre compte :

1. Dans la Google Cloud console, accédez à la page Fournisseurs d'identité.

   Accéder à la page "Fournisseurs d'identité"

2. Pour supprimer le fournisseur, cliquez sur Supprimer à côté du nom du fournisseur. Pour confirmer l'opération, cliquez sur Supprimer.

3. Dans la Google Cloud console, accédez à la page Utilisateurs.

   Accéder à la page "Utilisateurs"

4. Pour supprimer l'utilisateur que vous avez créé, cliquez sur Supprimer à côté du nom de l' utilisateur. Pour confirmer l'opération, cliquez sur Supprimer.

Supprimer le projet

Le moyen le plus simple d'empêcher la facturation est de supprimer le projet que vous avez créé pour ce tutoriel.

Pour supprimer le projet :

Attention : La suppression d'un projet aura les effets suivants :

• Tout le contenu du projet est supprimé. Si vous avez utilisé un projet existant pour les tâches décrites dans ce document et que vous le supprimez, vous supprimerez également tout autre travail effectué dans le projet.
• Les ID de projets personnalisés sont perdus. Lorsque vous avez créé ce projet, vous avez peut-être créé un ID de projet personnalisé que vous souhaitez utiliser à l'avenir. Pour conserver les URL qui utilisent l'ID de projet, telle qu'une URL appspot.com, supprimez les ressources sélectionnées dans le projet au lieu de supprimer l'ensemble du projet.

Si vous envisagez d'explorer plusieurs architectures, tutoriels et guides de démarrage rapide, réutiliser des projets peut vous aider à ne pas dépasser les limites de quotas des projets.

1. Dans la Google Cloud console, accédez à la page Gérer les ressources.

   Accéder à la page "Gérer les ressources"

2. Dans la liste des projets, sélectionnez le projet que vous souhaitez supprimer, puis cliquez sur Supprimer.
3. Dans la boîte de dialogue, saisissez l'ID du projet, puis cliquez Arrêter pour supprimer le projet.

Étape suivante

Dans une application réelle, vos utilisateurs s'inscrivent via une page d'enregistrement dédiée, puis se connectent en saisissant leur adresse e-mail et leur mot de passe. Identity Platform propose une interface utilisateur d'authentification prédéfinie que vous pouvez utiliser pour ces pages. Vous pouvez aussi créer la vôtre. Vous pouvez également accepter des méthodes de connexion supplémentaires, telles que des fournisseurs de réseaux sociaux (par exemple, Facebook ou Google), des numéros de téléphone, OIDC ou SAML.

Apprenez-en plus sur les sujets suivants :

• Connecter des utilisateurs avec JavaScript, Android, iOS, C++ ou Unity

• Connecter des utilisateurs avec OIDC ou SAML

• Migrer des utilisateurs de votre application existante vers Identity Platform.