Connecter un utilisateur avec une adresse e-mail via Identity Platform
Découvrez comment utiliser Identity Platform pour connecter un utilisateur à 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 console Google Cloud, cliquez sur Visite guidée :
Avant de commencer
- 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.
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Vérifiez que la facturation est activée pour votre projet Google Cloud.
-
Assurez-vous que vous disposez du ou des rôles suivants au niveau du projet : Identity Platform Admin, Service Usage Admin
Vérifier les rôles
-
Dans la console Google Cloud, accédez à la page IAM.
Accéder à IAM - Sélectionnez le projet.
-
Dans la colonne Compte principal, recherchez la ligne qui contient votre adresse e-mail.
Si votre adresse e-mail ne figure pas dans cette colonne, cela signifie que vous n'avez aucun rôle.
- Dans la colonne Rôle de la ligne contenant votre adresse e-mail, vérifiez si la liste des rôles inclut les rôles requis.
Attribuer les rôles
-
Dans la console Google Cloud, accédez à la page IAM.
Accéder à IAM - Sélectionnez le projet.
- Cliquez sur Accorder l'accès.
- Dans le champ Nouveaux comptes principaux, saisissez votre adresse e-mail.
- Dans la liste Sélectinoner un rôle, sélectionnez un rôle.
- Pour attribuer des rôles supplémentaires, cliquez sur Ajouter un autre rôle et ajoutez chaque rôle supplémentaire.
- Cliquez sur Enregistrer.
-
-
In the Google Cloud console, on the project selector page, select or create a Google Cloud project.
-
Vérifiez que la facturation est activée pour votre projet Google Cloud.
-
Assurez-vous que vous disposez du ou des rôles suivants au niveau du projet : Identity Platform Admin, Service Usage Admin
Vérifier les rôles
-
Dans la console Google Cloud, accédez à la page IAM.
Accéder à IAM - Sélectionnez le projet.
-
Dans la colonne Compte principal, recherchez la ligne qui contient votre adresse e-mail.
Si votre adresse e-mail ne figure pas dans cette colonne, cela signifie que vous n'avez aucun rôle.
- Dans la colonne Rôle de la ligne contenant votre adresse e-mail, vérifiez si la liste des rôles inclut les rôles requis.
Attribuer les rôles
-
Dans la console Google Cloud, accédez à la page IAM.
Accéder à IAM - Sélectionnez le projet.
- Cliquez sur Accorder l'accès.
- Dans le champ Nouveaux comptes principaux, saisissez votre adresse e-mail.
- Dans la liste Sélectinoner un rôle, sélectionnez un rôle.
- Pour attribuer des rôles supplémentaires, cliquez sur Ajouter un autre rôle et ajoutez chaque rôle supplémentaire.
- Cliquez sur Enregistrer.
-
Activer Identity Platform
Dans la console Google Cloud, accédez à la page Identity Platform de Cloud Marketplace.
Cliquez sur Activer Identity Platform.
Configurer une connexion par adresse e-mail
Accédez à la page Fournisseurs d'identité.
Accéder à Identity Platform Providers Sur la page Identity Providers (Fournisseurs d'identité), cliquez sur Add a provider (Ajouter un fournisseur).
Dans la liste Sélectionner un fournisseur, sélectionnez
Adresse e-mail/Mot de passe.Cliquez sur le bouton Activé pour l'activer.
Pour enregistrer les paramètres du fournisseur, cliquez sur Enregistrer.
Créer un compte utilisateur
Dans la console Google Cloud, accédez à la page Utilisateurs.
Cliquez sur Ajouter un utilisateur.
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.
Pour ajouter l'utilisateur, cliquez sur Ajouter. Le nouvel utilisateur apparaît sur la page Utilisateurs.
Connecter l'utilisateur
La procédure à suivre pour connecter l'utilisateur dépend de la version du SDK utilisée par votre application. Assurez-vous de suivre la procédure adaptée à votre application.
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 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:
À partir du répertoire du projet, installez Firebase à l'aide de npm:
npm install firebase
Initialisez Firebase dans votre application et créez un objet Firebase App:
import { initializeApp } from 'firebase/app'; const firebaseConfig = { apiKey: "API_KEY", authDomain: "AUTH_DOMAIN" }; const app = initializeApp(firebaseConfig);
Remplacez les éléments suivants :
API_KEY
: leapiKey
de votre projet Firebase.AUTH_DOMAIN
: leauthDomain
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. Après avoir initialisé un objet Firebase App dans votre code, vous pouvez ajouter des services Firebase et commencer à les utiliser.
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
: leapiKey
de votre projet Firebase.AUTH_DOMAIN
: leauthDomain
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 utilisateur que vous avez créé précédemment dans ce guide
Utiliser un bundler de module pour réduire la taille
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 la CLI Angular, Next.js, la CLI Vue ou Créer une application React 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 l'application intégrée et le code de dépendance. Pour en savoir plus, consultez la section Utiliser des bundles de modules avec Firebase.
Importer votre code JavaScript dans votre page
Créez un fichier nommé
index.html
:Ajoutez deux conteneurs HTML de base, puis importez le fichier JS groupé.
<script defer src="js/bundled.js"></script> <div>Identity Platform Quickstart</div> <div id="message">Loading...</div>
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
Sur votre ordinateur local, créez un fichier nommé
index.html
.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
Dans la console Google Cloud, accédez à la page Fournisseurs d'identité.
Cliquez sur
Informations sur la configuration de l'application .Copiez le code d'initialisation dans
index.html
.
Connecter l'utilisateur
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 rappelonAuthStateChanged()
.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
Ouvrez
index.html
dans votre navigateur Web. Un message de bienvenue contenant l'e-mail de votre utilisateur s'affiche.
Pour en savoir plus sur les autres limites d'Identity Platform, consultez la page Quotas et limites.
Effectuer un nettoyage
Pour éviter que les ressources utilisées sur cette page soient facturées sur votre compte Google Cloud, 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 :
Dans la console Google Cloud, accédez à la page Fournisseurs d'identité.
Pour supprimer le fournisseur, cliquez sur
Supprimer à côté de son nom. Pour confirmer l'opération, cliquez sur Supprimer.Dans la console Google Cloud, accédez à la page Utilisateurs.
Pour supprimer l'utilisateur que vous avez créé, cliquez sur
Supprimer à côté de son nom. 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 :
- Dans la console Google Cloud, accédez à la page Gérer les ressources.
- Dans la liste des projets, sélectionnez le projet que vous souhaitez supprimer, puis cliquez sur Supprimer.
- 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'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
Migrer des utilisateurs de votre application existante vers Identity Platform