Procéder à la connexion des utilisateurs sur App Engine

Cloner l'exemple d'application

Pour télécharger l'exemple sur l'ordinateur local :

1. Clonez le dépôt de l'exemple d'application sur votre ordinateur local :

   git clone https://github.com/GoogleCloudPlatform/python-docs-samples.git

   Vous pouvez également télécharger l'exemple en tant que fichier ZIP et l'extraire.

2. Accédez au répertoire qui contient l'exemple de code :

   cd python-docs-samples/appengine/standard/firebase/firenotes
   

Ajouter l'interface utilisateur

Pour configurer FirebaseUI pour Identity Platform et activer les fournisseurs d'identité :

1. Ajoutez Identity Platform à votre application en procédant comme suit :

   1. Accédez à Google Cloud Console.
      Accéder à la console Google Cloud
   2. Sélectionnez le projet Google Cloud que vous souhaitez utiliser :
      • Si vous disposez déjà d'un projet, sélectionnez-le dans la liste déroulante Sélectionner une organisation en haut de la page.
      • Si vous ne disposez d'aucun projet Google Cloud, créez-en un dans la console Google Cloud.
   3. Accédez à la page Identity Platform Marketplace dans la console Google Cloud.
      Accéder à la page "Identity Platform Marketplace"
   4. Sur la page Identity Platform Marketplace, cliquez sur Enable Customer Identity (Activer l'identité du client).
   5. Accédez à la page Utilisateurs de l'identité client dans la console Google Cloud.
      Accéder à la page Utilisateurs
   6. En haut à droite, cliquez sur Informations sur la configuration de l'application.

   7. Copiez les informations sur la configuration de l'application dans votre application Web.

      // Obtain the following from the "Add Firebase to your web app" dialogue
      // Initialize Firebase
      var config = {
        apiKey: "<API_KEY>",
        authDomain: "<PROJECT_ID>.firebaseapp.com",
        databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
        projectId: "<PROJECT_ID>",
        storageBucket: "<BUCKET>.appspot.com",
        messagingSenderId: "<MESSAGING_SENDER_ID>"
      };

2. Modifiez le fichier backend/app.yaml et saisissez l'ID de votre projet Google Cloud dans les variables d'environnement:

   # Copyright 2021 Google LLC
   #
   # Licensed under the Apache License, Version 2.0 (the "License");
   # you may not use this file except in compliance with the License.
   # You may obtain a copy of the License at
   #
   #      http://www.apache.org/licenses/LICENSE-2.0
   #
   # Unless required by applicable law or agreed to in writing, software
   # distributed under the License is distributed on an "AS IS" BASIS,
   # WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   # See the License for the specific language governing permissions and
   # limitations under the License.
   
   runtime: python27
   api_version: 1
   threadsafe: true
   service: backend
   
   handlers:
   - url: /.*
     script: main.app
   
   env_variables:
     GAE_USE_SOCKETS_HTTPLIB : 'true'
   

3. Dans le fichier frontend/main.js, configurez le widget de connexion FirebaseUI en sélectionnant les fournisseurs que vous souhaitez proposer à vos utilisateurs.

   // Firebase log-in widget
   function configureFirebaseLoginWidget() {
     var uiConfig = {
       'signInSuccessUrl': '/',
       'signInOptions': [
         // Leave the lines as is for the providers you want to offer your users.
         firebase.auth.GoogleAuthProvider.PROVIDER_ID,
         firebase.auth.FacebookAuthProvider.PROVIDER_ID,
         firebase.auth.TwitterAuthProvider.PROVIDER_ID,
         firebase.auth.GithubAuthProvider.PROVIDER_ID,
         firebase.auth.EmailAuthProvider.PROVIDER_ID
       ],
       // Terms of service url
       'tosUrl': '<your-tos-url>',
     };
   
     var ui = new firebaseui.auth.AuthUI(firebase.auth());
     ui.start('#firebaseui-auth-container', uiConfig);
   }

4. Dans la console Google Cloud, activez les fournisseurs que vous souhaitez conserver:

   1. Accédez à la page Fournisseurs d'identité client dans la console Google Cloud.
      Accéder à la page "Fournisseurs"
   2. Cliquez sur Ajouter un fournisseur.
   3. Dans la liste déroulante Sélectionner un fournisseur, sélectionnez les fournisseurs que vous souhaitez utiliser.
   4. À côté d'Activé, cliquez sur le bouton pour activer le fournisseur.
      • Pour les fournisseurs d'identité tiers, saisissez l'ID du fournisseur et sa clé secrète à partir de son site pour les développeurs. Les documents Firebase donnent à ce sujet des instructions spécifiques dans les sections "Avant de commencer" des guides Facebook, Twitter et GitHub.
      • Pour les intégrations SAML et OIDC, reportez-vous à la configuration effectuée sur le site de votre fournisseur d'identité.

5. Ajoutez votre domaine à la liste des domaines autorisés dans Identity Platform :

   1. Accédez à la page Paramètres de l'identité client dans la console Google Cloud.
      Accéder à la page Paramètres
   2. Dans la section Authorized Domains (Domaines autorisés), cliquez sur Add Domain (Ajouter un domaine).

   3. Saisissez le domaine de votre application en respectant le format suivant :

      [PROJECT_ID].appspot.com
      

      N'incluez pas http:// avant le nom de domaine.

Installer les dépendances

1. Accédez au répertoire backend et terminez la configuration de l'application comme suit :

   cd backend/
   

2. Installez les dépendances dans un répertoire lib de votre projet :

   pip install -t lib -r requirements.txt
   

3. Dans appengine_config.py, la méthode vendor.add() enregistre les bibliothèques dans le répertoire lib.

Exécuter votre application en local

Pour exécuter l'application en local, utilisez le serveur de développement local App Engine :

1. Ajoutez l'URL suivante en tant que backendHostURL dans main.js :

   http://localhost:8081

2. Accédez au répertoire racine de l'application. Ensuite, démarrez le serveur de développement :

   dev_appserver.py frontend/app.yaml backend/app.yaml
   

3. Visitez http://localhost:8080/ dans un navigateur Web.

Authentifier des utilisateurs auprès du serveur

Maintenant que vous avez configuré un projet et initialisé une application pour le développement, vous pouvez parcourir le code pour comprendre comment récupérer et vérifier les jetons d'ID Identity Platform sur le serveur.

Obtenir un jeton d'ID depuis Identity Platform

La première étape de l'authentification côté serveur consiste à récupérer un jeton d'accès à vérifier. Les requêtes d'authentification sont traitées avec l'écouteur onAuthStateChanged() d'Identity Platform :

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    $('#logged-out').hide();
    var name = user.displayName;

    /* If the provider gives a display name, use the name for the
    personal welcome message. Otherwise, use the user's email. */
    var welcomeName = name ? name : user.email;

    user.getIdToken().then(function(idToken) {
      userIdToken = idToken;

      /* Now that the user is authenicated, fetch the notes. */
      fetchNotes();

      $('#user').text(welcomeName);
      $('#logged-in').show();

    });

  } else {
    $('#logged-in').hide();
    $('#logged-out').show();

  }
});

Lorsqu'un utilisateur est connecté, la méthode getToken() d'Identity Platform du rappel renvoie un jeton d'ID Identity Platform sous la forme d'un jeton Web JSON (JWT, JSON Web Token).

Vérifier des jetons sur le serveur

Une fois qu'un utilisateur s'est connecté, le service d'interface récupère toutes les notes existantes dans le notebook de l'utilisateur via une requête AJAX GET. Cela nécessite une autorisation pour accéder aux données de l'utilisateur. Le jeton JWT est donc envoyé dans l'en-tête Authorization de la requête avec le schéma Bearer :

// Fetch notes from the backend.
function fetchNotes() {
  $.ajax(backendHostUrl + '/notes', {
    /* Set header for the XMLHttpRequest to get data from the web server
    associated with userIdToken */
    headers: {
      'Authorization': 'Bearer ' + userIdToken
    }
  })

Votre serveur doit vérifier que le jeton est signé par Identity Platform avant que le client ne puisse accéder aux données du serveur. Vous pouvez vérifier ce jeton à l'aide de la bibliothèque d'authentification Google pour Python. Utilisez la fonction verify_firebase_token de la bibliothèque d'authentification pour valider le jeton de support et extraire les revendications:

id_token = request.headers["Authorization"].split(" ").pop()
claims = google.oauth2.id_token.verify_firebase_token(
    id_token, HTTP_REQUEST, audience=os.environ.get("GOOGLE_CLOUD_PROJECT")
)
if not claims:
    return "Unauthorized", 401

Chaque fournisseur d'identité envoie un ensemble différent de revendications. Chaque ensemble comporte au moins une revendication sub avec un ID utilisateur unique et une revendication fournissant certaines informations de profil, telles que name ou email, dont vous pouvez vous servir pour personnaliser l'expérience utilisateur sur votre application.

Gérer les données utilisateur dans Datastore

Après avoir authentifié un utilisateur, vous devez stocker ses données pour qu'elles puissent persister une fois la session ouverte terminée. Les sections suivantes expliquent comment stocker une note en tant qu'entité Datastore et séparer les entités par ID utilisateur.

Créer des entités pour stocker des données utilisateur

Vous pouvez créer une entité dans Datastore en déclarant une classe de modèle NDB avec certaines propriétés, telles que des entiers ou des chaînes. Datastore indexe les entités par genre. Dans le cas de l'application Firenotes, le genre de chaque entité est Note. À des fins d'interrogation, chaque Note est stockée avec un nom de clé qui correspond à l'ID utilisateur obtenu à partir de la revendication sub de la section précédente.

Le code suivant montre comment définir les propriétés d'une entité, lors de la création de l'entité avec la méthode constructeur de la classe de modèle et après sa création via l'affectation de propriétés individuelles :

data = request.get_json()

# Populates note properties according to the model,
# with the user ID as the key name.
note = Note(parent=ndb.Key(Note, claims["sub"]), message=data["message"])

# Some providers do not provide one of these so either can be used.
note.friendly_id = claims.get("name", claims.get("email", "Unknown"))

Pour écrire la nouvelle Note dans Datastore, appelez la méthode put() sur l'objet note.

Récupérer des données utilisateur

Pour récupérer les données utilisateur associées à un ID utilisateur particulier, appelez la méthode query() de la bibliothèque NDB pour rechercher dans la base de données des notes appartenant au même groupe d'entités. Les entités du même groupe, ou ayant le même chemin d'ancêtre, partagent un nom de clé commun, qui correspond dans ce cas à l'ID utilisateur.

def query_database(user_id):
    """Fetches all notes associated with user_id.

    Notes are ordered them by date created, with most recent note added
    first.
    """
    ancestor_key = ndb.Key(Note, user_id)
    query = Note.query(ancestor=ancestor_key).order(-Note.created)
    notes = query.fetch()

    note_messages = []

    for note in notes:
        note_messages.append(
            {
                "friendly_id": note.friendly_id,
                "message": note.message,
                "created": note.created,
            }
        )

    return note_messages

Vous pouvez ensuite récupérer les données de requête et afficher les notes dans le client :

// Fetch notes from the backend.
function fetchNotes() {
  $.ajax(backendHostUrl + '/notes', {
    /* Set header for the XMLHttpRequest to get data from the web server
    associated with userIdToken */
    headers: {
      'Authorization': 'Bearer ' + userIdToken
    }
  }).then(function(data){
    $('#notes-container').empty();
    // Iterate over user data to display user's notes from database.
    data.forEach(function(note){
      $('#notes-container').append($('<p>').text(note.message));
    });
  });
}

Déployer l'application

Vous avez intégré Identity Platform à votre application App Engine. Pour voir votre application s'exécuter dans un environnement de production en temps réel, procédez comme suit :

1. Remplacez l'URL de l'hôte de backend dans le fichier main.js par https://backend-dot-[PROJECT_ID].appspot.com. Remplacez [PROJECT_ID] par l'ID du projet.

2. Déployez l'application à l'aide de l'interface de ligne de commande du SDK Google Cloud :

   gcloud app deploy backend/index.yaml frontend/app.yaml backend/app.yaml
   

3. Consultez l'application en ligne à l'adresse https://[PROJECT_ID].appspot.com.