Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

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

Découvrez comment utiliser Identity Platform pour connecter un utilisateur avec une adresse e-mail et un mot de passe.


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

Visite guidée


La procédure décrite dans les sections suivantes, est la même que si vous cliquez sur Visite guidée.

Avant de commencer

  1. Connectez-vous à votre compte Google Cloud. 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 gratuits pour exécuter, tester et déployer des charges de travail.
  2. Dans Google Cloud Console, sur la page de sélection du projet, sélectionnez ou créez un projet Google Cloud.

    Accéder au sélecteur de projet

  3. Assurez-vous que la facturation est activée pour votre projet Cloud. Découvrez comment vérifier si la facturation est activée sur un projet.

  4. Dans Google Cloud Console, sur la page de sélection du projet, sélectionnez ou créez un projet Google Cloud.

    Accéder au sélecteur de projet

  5. Assurez-vous que la facturation est activée pour votre projet Cloud. Découvrez comment vérifier si la facturation est activée sur un projet.

Activer Identity Platform

  1. Dans Google Cloud Console, accédez à la page Identity Platform de Cloud Marketplace.

    Accéder à Identity Platform

  2. Cliquez sur Enable Identity Platform (Activer Identity Platform).

Configurer une connexion par adresse e-mail

  1. Accédez à 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. Activez l'option Activé.

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

Créer un compte utilisateur

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

    Accéder à "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 est répertorié sur la page Utilisateurs.

Connecter l'utilisateur

La procédure de connexion à l'utilisateur varie en fonction de la version du SDK utilisée par votre application. Assurez-vous de suivre les étapes appropriées pour votre demande.

SDK v9 (modulaire)

Installer le SDK et initialiser Firebase

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

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

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

  1. À partir du 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
    • AUTH_DOMAIN: authDomain de votre projet Firebase

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

    Une application Firebase est un objet de type conteneur qui stocke une configuration courante et partage l'authentification entre les services Firebase. Après avoir initialisé un objet d'application Firebase dans votre code, vous pouvez ajouter et commencer à utiliser les services Firebase.

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. Par exemple, voici une application qui tente de se 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 plus tôt dans ce guide.
  • PASSWORD: mot de passe utilisateur que vous avez créé plus tôt dans ce guide.

Utiliser un bundler de module pour réduire la taille

Le SDK Web Firebase est conçu pour fonctionner avec les outils de regroupement de modules afin de supprimer tout code inutilisé (tremblement d'arborescence). 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 codebase.

Par exemple, vous pouvez utiliser Webpack pour générer un dossier dist contenant votre application groupée et votre code de dépendance. Pour en savoir plus, consultez la page Utiliser des app bundler 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 (ancien)

Créer une page Web

  1. Sur votre ordinateur local, 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 console Google Cloud, 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'e-mail de votre utilisateur s'affiche.

Effectuer un nettoyage

Afin d'éviter que des frais ne soient facturés sur votre compte Google Cloud 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 console Google Cloud, accédez à la page Fournisseurs d'identité.

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

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

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

    Accéder à "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 :

  1. Dans la console Google Cloud, 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 sur Arrêter pour supprimer le projet.

Étapes suivantes

Dans une application réelle, vos utilisateurs s'inscrivent via une page d'inscription dédiée, puis se connectent en saisissant leurs adresses e-mail et leurs mots de passe. Identity Platform propose une interface utilisateur d'authentification prédéfinie que vous pouvez utiliser pour ces pages. Vous pouvez également créer la vôtre. Vous pouvez également utiliser d'autres méthodes de connexion, comme les réseaux sociaux (Facebook ou Google, par exemple), les numéros de téléphone, OIDC ou SAML.

Apprenez-en plus sur les sujets suivants :