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 le document 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, accédez au site Web Identity Platform.

L'application utilisé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 une configuration Identity Platform à une application Web côté client
• Écrire du code Java pour intégrer l'authentification Identity Platform dans une application Web côté client

Prérequis

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 :

gcloud auth list

Résultat :

Credentialed accounts: - @.com (active)

Exemple de résultat :

Credentialed accounts: - google1623327_student@qwiklabs.net

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

gcloud config list project

Résultat :

[core] project =

Exemple de résultat :

[core] project = qwiklabs-gcp-44776a13dea667a6 Remarque : Pour consulter la documentation complète sur gcloud, accédez au guide de présentation de la gcloud CLI.

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 le dépôt pour cet atelier :

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

2. Créez un lien symbolique vers votre répertoire de travail :

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

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

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

   cd ~/firebase/start

2. Configurez les dépendances de 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 ;
   • exécute la commande mvn clean install ;
   • crée des entités dans Cloud Datastore ;
   • affiche l'ID du projet Google Cloud Platform.

   Une fois les dépendances de l'application configurées, la sortie suivante s'affiche :

   [INFO] ------------------------------------------------------------------------ [INFO] BUILD SUCCESS [INFO] ------------------------------------------------------------------------ [INFO] Total time: 11.775 s [INFO] Finished at: 2021-12-06T15:39:11Z [INFO] ------------------------------------------------------------------------

3. Exécutez l'application :

   mvn spring-boot:run

   Au démarrage de l'application, la dernière ligne de sortie s'affiche, comme dans l'exemple suivant :

   15:40:08.312 [restartedMain] INFO c.g.training.appdev.QuizApplication - Started QuizApplication in 7.767 seconds (JVM running for 9.86)

Lancer l'application Quiz

• Dans Cloud Shell, cliquez sur Web preview () > Preview on port 8080 (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 utilise l'éditeur de code Cloud Shell pour examiner le code de l'application Quiz.

Lancer l'éditeur de texte Cloud Shell

1. Dans Cloud Shell, cliquez sur l'icône Ouvrir l'éditeur dans le ruban supérieur. Cliquez sur Open in a new window (Ouvrir dans une nouvelle fenêtre) si nécessaire.

   L'éditeur de code s'ouvre avec Cloud Shell dans un nouvel onglet de votre navigateur.

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

3. Dans le dossier firebase, trouvez le dossier end. Le dossier end contient les mêmes fichiers que le dossier start, mais chaque fichier du dossier end contient le code complet requis pour cet atelier.

Examiner l'application client

1. Sélectionnez le fichier index.html dans le dossier .../src/main/resources/static/client. Ne le confondez pas avec le fichier index.html dans le dossier static.

   Ce fichier est l'unique page de la SPA (Single Page Application) AngularJS. Il contient les balises <script><script> pour le code et les bibliothèques d'applications, ainsi que le balisage servant à l'affichage dynamique de l'application.

2. Sélectionnez le fichier qiq-login-template.html dans le dossier .../src/main/resources/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.

3. Sélectionnez 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. Cliquez sur Enregistrer.

9. 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 .../src/main/resources/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.

8. Dans Cloud Shell, appuyez sur Ctrl+C pour arrêter l'application, puis saisissez à nouveau la commande suivante pour redémarrer votre application :

mvn spring-boot:run

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 non valides suivants :

   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 au cours 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@exemple.com", puis ajoutez le compte "utilisateur1@exemple.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@exemple.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 2020 Google LLC Tous droits réservés. Google et le logo Google sont des marques de Google LLC. Tous les autres noms d'entreprises et de produits peuvent être des marques des entreprises auxquelles ils sont associés.