Présentation

Dans cet atelier, vous allez découvrir comment ajouter une authentification à votre application à l'aide d'Identity Platform. Cette authentification sert à vous identifier et détermine ce que vous pouvez faire. Pour en savoir plus, consultez la page de présentation de l'authentification.

Identity Platform fournit un service d'authentification prêt à l'emploi et personnalisable pour l'inscription et la connexion des utilisateurs. Les activités de développement et d'administration sont simplifiées grâce à une gamme de SDK pour les applications (Android, iOS et Web) et pour l'administration (Node.js, Java, Python et plus encore). Pour en savoir plus sur Identity Platform, consultez la page Identity Platform.

L'application employée dans cet atelier est un quiz en ligne. Vous allez ajouter l'authentification Identity Platform, puis la configurer afin que les utilisateurs s'identifient simplement avec une adresse e-mail et un mot de passe. Enfin, vous ferez en sorte que les utilisateurs s'inscrivent et se connectent pour pouvoir répondre au questionnaire.

Objectifs

Dans cet atelier, vous allez réaliser les tâches suivantes :

• Ajouter la configuration Identity Platform à une application Web côté client
• Écrire le code Python pour intégrer l'authentification Identity Platform dans une application Web côté client

Préparation

Pour chaque atelier, nous vous attribuons gratuitement un nouveau projet Google Cloud et un nouvel ensemble de ressources pour une durée déterminée.

1. Vérifiez que vous êtes bien connecté à Qwiklabs dans une fenêtre de navigation privée.

2. Vérifiez le temps imparti pour l'atelier (par exemple, ) : vous devez pouvoir le terminer dans ce délai.

3. Lorsque vous êtes prêt, cliquez sur .

4. Notez les identifiants qui vous ont été attribués pour cet atelier. Ils vous serviront à vous connecter à Google Cloud Console.

5. Cliquez sur Open Google Console (Ouvrir la console Google).

6. Cliquez sur Use another account (Utiliser un autre compte), puis copiez-collez les identifiants de cet atelier lorsque vous y êtes invité.

7. Acceptez les conditions d'utilisation et ignorez la page relative aux ressources de récupération des données.

Activer Google Cloud Shell

Google Cloud Shell est une machine virtuelle qui contient de nombreux outils pour les développeurs. Elle comprend un répertoire d'accueil persistant de 5 Go et s'exécute sur Google Cloud.

Google Cloud Shell vous permet d'accéder à vos ressources Google Cloud grâce à une ligne de commande.

1. Dans la barre d'outils située en haut à droite dans la console Cloud, cliquez sur le bouton "Ouvrir Cloud Shell".

   

2. Cliquez sur Continuer.

Le provisionnement et la connexion à l'environnement prennent quelques instants. Une fois connecté, vous êtes en principe authentifié et le projet est défini sur votre ID_PROJET. Par exemple :

gcloud est l'outil de ligne de commande pour Google Cloud. Il est préinstallé sur Cloud Shell et permet la complétion par tabulation.

• Vous pouvez lister les noms des comptes actifs à l'aide de cette commande :

Résultat :

Exemple de résultat :

• Vous pouvez lister les ID de projet à l'aide de cette commande :

Résultat :

Exemple de résultat :

Tâche 1 : Préparer l'application de l'étude de cas

Dans cette tâche, vous allez cloner, configurer et exécuter l'application Quiz.

Cloner le code source dans Cloud Shell

1. Clonez la base de l'application à partir d'un dépôt sur GitHub.com :

   git clone https://github.com/GoogleCloudPlatform/training-data-analyst

2. Créez un lien symbolique qui servira de raccourci vers le répertoire de travail :

   ln -s ~/training-data-analyst/courses/developingapps/v1.3/python/firebase ~/firebase

Configurer et exécuter l'application de l'étude de cas

1. Accédez au répertoire qui contient les exemples de fichiers de l'atelier :

   cd ~/firebase/start

2. Configurez l'application :

   . prepare_environment.sh

   Ce fichier de script :

   • crée une application App Engine ;
   • crée un bucket Cloud Storage nommé gs:[Project-ID]-media ;
   • exporte les variables d'environnement GCLOUD_PROJECT et GCLOUD_BUCKET ;
   • crée un environnement Python isolé virtualenv pour Python 3 et l'active ;
   • exécute >pip install -r requirements.txt ;
   • crée des entités dans Cloud Datastore ;
   • affiche l'ID du projet Google Cloud Platform.

3. Exécutez l'application :

   python run_server.py

Démarrer l'application de l'étude de cas

• Dans Cloud Shell, cliquez sur Aperçu sur le Web () > Prévisualiser sur le port 8080 pour prévisualiser l'application Quiz.

Laissez cette fenêtre ouverte, car vous aurez besoin du domaine de l'aperçu sur le Web Cloud Shell (qui se présente au format 8080-27542cac-44d0-41a9-9e96-065800c2100c.ql-europe-west1-ctgq.cloudshell.dev) dans la suite de cet atelier.

Tâche 2 : Examiner le code de l'application de l'étude de cas

Dans cette tâche, vous allez examiner le code de l'application de l'étude de cas. Vous pouvez utiliser les éditeurs de script installés sur Cloud Shell, tels que nano ou vim, ou encore l'éditeur de code intégré de Cloud Shell.

Cet atelier examine le code de l'application Quiz à l'aide de l'éditeur de code Cloud Shell.

Lancer l'éditeur de code Cloud Shell

• Dans Cloud Shell, cliquez sur Ouvrir l'éditeur pour lancer l'éditeur de code.

Examiner l'application cliente

1. Accédez au dossier /firebase/start à l'aide du panneau de l'explorateur de fichiers situé à gauche de l'éditeur.

2. Continuez la navigation. Ouvrez ...quiz/webapp/static/client/. Cliquez sur le fichier index.html.

   Ce fichier est l'unique page de l'application monopage AngularJS. Il contient les balises <script><script> pour le code et les bibliothèques d'application, ainsi que le balisage servant à l'affichage dynamique de l'application monopage.

3. Sélectionnez le fichier qiq-login-template.html dans le dossier ...quiz/webapp/static/client/app/auth/.

   Ce fichier contient le modèle AngularJS du composant de connexion. Notez aussi les deux zones de texte et le bouton. Lorsqu'un utilisateur clique sur ce bouton, un gestionnaire d'événements exécute le code.

4. Toujours dans ce dossier, sélectionnez le fichier qiq-login.js.

   Ce fichier contient un composant AngularJS qui permet à un utilisateur de se connecter à l'application ou d'accéder à une page d'inscription.

Tâche 3 : Configurer l'authentification Identity Platform

Dans cette tâche, vous allez vérifier que la facturation est activée pour votre projet Cloud. Vous configurerez ensuite Identity Platform pour que les utilisateurs se connectent à l'aide d'une adresse e-mail et d'un mot de passe. Enfin, vous allez créer un compte utilisateur que vous pourrez utiliser pour vous connecter à l'application Quiz.

Vérifier que la facturation est activée

1. Dans la console Google Cloud, accédez au menu de navigation (), puis cliquez sur Facturation.

2. Vérifiez qu'un compte de facturation est associé au projet. Un message indiquant que le compte de facturation "Qwiklabs Production gcpd xx" est associé à ce projet doit s'afficher.

Configurer l'identification avec une adresse e-mail et un mot de passe dans Identity Platform

1. Dans la console Google Cloud, accédez au menu de navigation (), puis cliquez sur Identity Platform.

2. Cliquez sur Activer Identity Platform.

   Remarque : Si le message pop-up "Quitter le site" s'affiche, cliquez sur Quitter.

   La page "Identity Platform" s'affiche dans la console Cloud.

   

3. Cliquez sur Ajouter un fournisseur.

4. Dans la fenêtre "Mode de connexion", sous Sélectionner un fournisseur, sélectionnez Adresse e-mail/Mot de passe.

5. Cliquez sur Activé.

6. Dans le volet "Domaines autorisés", cliquez sur Ajouter un domaine.

7. Revenez à l'application Quiz en cours d'exécution et copiez le domaine (qui se présente au format 8080-27542cac-44d0-41a9-9e96-065800c2100c.ql-europe-west1-ctgq.cloudshell.dev).

8. Collez le domaine dans le champ Domaine.

9. Modifiez le domaine collé afin que seul le nom de domaine figure dans le champ.

   Vous devez supprimer https:// et tous les caractères qui suivent le nom de domaine, y compris les barres obliques. Le nom de domaine doit se terminer par cloudshell.dev.

10. Cliquez sur Enregistrer.

11. Dans la fenêtre du nouveau fournisseur d'identité, cliquez sur Enregistrer.

    Vous devrez peut-être faire défiler la page vers le bas pour afficher le bouton "Enregistrer".

Ajouter un utilisateur

1. Dans le volet Identity Platform, cliquez sur Utilisateurs.

2. Cliquez sur Ajouter un utilisateur.

3. Dans la boîte de dialogue "Ajouter un utilisateur", spécifiez les éléments suivants :

   Adresse e-mail	utilisateur1@example.com
   Mot de passe	abc123!

4. Cliquez sur Ajouter.

Tâche 4 : Intégrer une application Web côté client avec Identity Platform

Dans cette tâche, vous allez appliquer la configuration Identity Platform à votre application Web côté client.

1. Dans le volet de navigation, cliquez sur Fournisseurs.

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

3. Dans la boîte de dialogue "Configurer votre application", copiez le balisage Identity Platform.

   

4. Cliquez sur Fermer.

5. Dans l'éditeur de code Cloud Shell, ouvrez le fichier index.html dans ...webapp/static/client/.

6. Collez le balisage de la configuration juste avant les autres balises <script></script> en bas de la page.

7. Enregistrez le fichier index.html.

Tâche 5 : Exécuter l'application

Dans cette tâche, vous allez vérifier que vous pouvez vous connecter à l'application Quiz à l'aide des identifiants créés précédemment dans Identity Platform. Vous enregistrerez ensuite un nouvel utilisateur dans l'application Quiz et vérifierez que ces identifiants ont bien été ajoutés à Identity Platform.

1. Revenez à l'application Quiz et actualisez votre navigateur.

2. Dans la barre de navigation, cliquez sur Take Test (Faire le test).

   

3. Dans la barre de navigation, cliquez sur GCP, People (Contacts) ou Places (Lieux).

   Remarque : Vous ne devriez pas pouvoir faire le test sans être connecté.

4. Dans la barre de navigation, saisissez les identifiants suivants non valides :

   Adresse e-mail	utilisateur2@example.com
   Mot de passe	abcd1234$

5. Cliquez sur Login (Connexion).

   Remarque : La connexion échoue, car l'utilisateur n'est pas enregistré.

6. Saisissez les identifiants suivants, que vous avez créés lors d'une tâche précédente :

   Adresse e-mail	utilisateur1@example.com
   Mot de passe	abc123!

7. Cliquez sur Login (Connexion).

   L'adresse e-mail de l'utilisateur doit s'afficher dans la barre de navigation, et la première question apparaît.

   Remarque : Si la connexion ne fonctionne pas, le mot de passe n'a peut-être pas été configuré correctement. Revenez à la page "Utilisateurs" d'Identity Platform et supprimez le compte "utilisateur1@example.com", puis ajoutez le compte "utilisateur1@example.com" avec le mot de passe approprié.

8. Dans la barre de navigation, cliquez sur Logout (Déconnexion).

9. Cliquez sur le lien Register (S'inscrire).

10. Dans le nouveau formulaire, saisissez les identifiants suivants :

    Adresse e-mail	utilisateur2@example.com
    Mot de passe	abcd1234$

11. Cliquez sur Register (S'inscrire).

    Veuillez indiquer un mot de passe complexe. Si vous avez saisi un mot de passe accepté, vous serez connecté et redirigé vers le quiz GCP.

    Vous pouvez répondre aux questions et envoyer les réponses.

12. Dans la barre de navigation, cliquez sur Logout (Déconnexion).

    Remarque : Vous serez alors déconnecté et redirigé vers la page d'accueil Quiz.

13. Dans la console Google Cloud, dans le volet de navigation d'Identity Platform, cliquez sur Utilisateurs.

    Remarque : Le compte "utilisateur2@example.com" doit être ajouté en tant qu'utilisateur.

Félicitations !

Dans cet atelier, vous avez appris à utiliser Identity Platform pour activer l'enregistrement d'adresses e-mail et de mots de passe pour votre application.

Terminer l'atelier

Une fois l'atelier terminé, cliquez sur Terminer l'atelier. Google Cloud Skills Boost supprime les ressources que vous avez utilisées, puis efface le compte.

Si vous le souhaitez, vous pouvez noter l'atelier. Sélectionnez un nombre d'étoiles, saisissez un commentaire, puis cliquez sur Envoyer.

Le nombre d'étoiles correspond à votre degré de satisfaction :

• 1 étoile = très insatisfait(e)
• 2 étoiles = insatisfait(e)
• 3 étoiles = ni insatisfait(e), ni satisfait(e)
• 4 étoiles = satisfait(e)
• 5 étoiles = très satisfait(e)

Si vous ne souhaitez pas donner votre avis, vous pouvez fermer la boîte de dialogue.

Pour soumettre des commentaires, suggestions ou corrections, veuillez accéder à l'onglet Assistance.

Copyright 2026 Google LLC Tous droits réservés. Google et le logo Google sont des marques de Google LLC. Tous les autres noms de société et de produit peuvent être des marques des sociétés auxquelles ils sont associés.