Authentifier les utilisateurs avec Firebase

ID de la région

Le REGION_ID est un code abrégé que Google attribue en fonction de la région que vous sélectionnez lors de la création de votre application. Le code ne correspond pas à un pays ou une province, même si certains ID de région peuvent ressembler aux codes de pays et de province couramment utilisés. Pour les applications créées après février 2020, REGION_ID.r est inclus dans les URL App Engine. Pour les applications existantes créées avant cette date, l'ID de région est facultatif dans l'URL.

En savoir plus sur les ID de région

Ajoutez un flux de connexion utilisateur à votre service Web qui utilise Firebase Authentication.

Au cours de cette étape du guide, vous mettez à jour votre service Web pour authentifier les utilisateurs et pour récupérer et afficher les informations de l'utilisateur après son authentification. Notez que, pour cette étape, les temps de demande du site seront toujours globaux et non spécifiques à l'utilisateur.

Avant de commencer

Si vous avez suivi toutes les étapes précédentes de ce guide, ignorez cette section. Sinon, effectuez l'une des opérations suivantes :

Ajouter des méthodes d'authentification Firebase

Firebase fournit des méthodes JavaScript et des variables que vous pouvez utiliser pour configurer le comportement de connexion de votre service Web. Pour ce service Web, ajoutez une fonction de déconnexion, une variable qui configure l'interface utilisateur de la page de connexion et une fonction contrôlant les modifications apportées lorsqu'un utilisateur se connecte ou déconnecte.

Pour ajouter les comportements requis pour un flux d'authentification, remplacez la méthode d'écoute d'événements actuelle du fichier static/script.js par le code suivant :

window.addEventListener('load', function () {
  document.getElementById('sign-out').onclick = function () {
    firebase.auth().signOut();
  };

  // FirebaseUI config.
  var uiConfig = {
    signInSuccessUrl: '/',
    signInOptions: [
      // Comment out any lines corresponding to providers you did not check in
      // the Firebase console.
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
      //firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      //firebase.auth.TwitterAuthProvider.PROVIDER_ID,
      //firebase.auth.GithubAuthProvider.PROVIDER_ID,
      //firebase.auth.PhoneAuthProvider.PROVIDER_ID

    ],
    // Terms of service url.
    tosUrl: '<your-tos-url>'
  };

  firebase.auth().onAuthStateChanged(function (user) {
    if (user) {
      // User is signed in, so display the "sign out" button and login info.
      document.getElementById('sign-out').hidden = false;
      document.getElementById('login-info').hidden = false;
      console.log(`Signed in as ${user.displayName} (${user.email})`);
      user.getIdToken().then(function (token) {
        // Add the token to the browser's cookies. The server will then be
        // able to verify the token against the API.
        // SECURITY NOTE: As cookies can easily be modified, only put the
        // token (which is verified server-side) in a cookie; do not add other
        // user information.
        document.cookie = "token=" + token;
      });
    } else {
      // User is signed out.
      // Initialize the FirebaseUI Widget using Firebase.
      var ui = new firebaseui.auth.AuthUI(firebase.auth());
      // Show the Firebase login button.
      ui.start('#firebaseui-auth-container', uiConfig);
      // Update the login state indicators.
      document.getElementById('sign-out').hidden = true;
      document.getElementById('login-info').hidden = true;
      // Clear the token cookie.
      document.cookie = "token=";
    }
  }, function (error) {
    console.log(error);
    alert('Unable to log in: ' + error)
  });
});

Notez que la méthode onAuthStateChanged(), qui contrôle les modifications apportées lorsqu'un utilisateur se connecte ou se déconnecte, stocke le jeton d'ID de l'utilisateur en tant que cookie. Ce jeton d'ID est un jeton unique que Firebase génère automatiquement lorsqu'un utilisateur s'est connecté avec succès. Il est utilisé par le serveur pour authentifier l'utilisateur.

Mettre à jour votre service Web pour utiliser des jetons

Vérifiez l'identité des utilisateurs sur le serveur à l'aide de leur jeton d'ID Firebase unique, puis déchiffrez leur jeton pour leur imprimer leurs données.

Pour utiliser le jeton d'ID Firebase, procédez comme suit :

  1. Récupérez, validez et déchiffrez le jeton dans la méthode root de votre fichier main.py :

    from flask import Flask, render_template, request
from google.auth.transport import requests
from google.cloud import datastore
import google.oauth2.id_token

firebase_request_adapter = requests.Request()
@app.route("/")
def root():
    # Verify Firebase auth.
    id_token = request.cookies.get("token")
    error_message = None
    claims = None
    times = None

    if id_token:
        try:
            # Verify the token against the Firebase Auth API. This example
            # verifies the token on each page load. For improved performance,
            # some applications may wish to cache results in an encrypted
            # session store (see for instance
            # http://flask.pocoo.org/docs/1.0/quickstart/#sessions).
            claims = google.oauth2.id_token.verify_firebase_token(
                id_token, firebase_request_adapter
            )
        except ValueError as exc:
            # This will be raised if the token is expired or any other
            # verification checks fail.
            error_message = str(exc)

        # Record and fetch the recent times a logged-in user has accessed
        # the site. This is currently shared amongst all users, but will be
        # individualized in a following step.
        store_time(datetime.datetime.now(tz=datetime.timezone.utc))
        times = fetch_times(10)

    return render_template(
        "index.html", user_data=claims, error_message=error_message, times=times
    )

  2. Assurez-vous que votre fichier requirements.txt inclut toutes les dépendances nécessaires :

    Flask==3.0.0
google-cloud-datastore==2.15.1
google-auth==2.17.3
requests==2.28.2

Tester votre service Web

Testez votre service Web en l'exécutant localement dans un environnement virtuel :

  1. Exécutez les commandes suivantes dans le répertoire principal de votre projet pour installer de nouvelles dépendances et exécuter votre service Web. Si vous n'avez pas configuré d'environnement virtuel pour les tests en local, consultez la section Tester votre service Web.

    pip install -r requirements.txt
python main.py

  2. Saisissez l'adresse suivante dans votre navigateur Web pour afficher votre service Web :

    http://localhost:8080

Déployer votre service Web

Maintenant que l'authentification fonctionne localement, vous pouvez redéployer votre service Web dans App Engine.

Exécutez la commande suivante à partir du répertoire racine de votre projet, où se trouve le fichier app.yaml :

gcloud app deploy

Tout le trafic est automatiquement acheminé vers la nouvelle version que vous avez déployée.

Pour plus d'informations sur la gestion des versions, consultez la documentation sur la gestion des services et des versions.

Affichez votre service :

Pour lancer rapidement votre navigateur et accéder à votre service Web à l'adresse https://PROJECT_ID.REGION_ID.r.appspot.com, exécutez la commande suivante :

gcloud app browse

Étapes suivantes

Maintenant que vous avez configuré l'authentification des utilisateurs, vous êtes prêt à découvrir comment mettre à jour votre service Web pour personnaliser les données des utilisateurs authentifiés.

Précédent
Ajouter Firebase
Suivant
Personnaliser les données