Ajouter Firebase à votre service Web

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 Firebase à votre projet Google Cloud, configurez vos paramètres d'authentification, puis ajoutez Firebase à votre service Web.

L'ajout de Firebase à votre service Web vous permet d'authentifier les utilisateurs afin de leur offrir une expérience personnalisée.

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 :

Commencez par Créer une application Python 3 et suivez toutes les étapes menant à celle-ci.
Si vous disposez déjà d'un projet Google Cloud, passez à l'étape de téléchargement d'une copie du service Web :
1. Téléchargez le dépôt de l'exemple d'application à l'aide de Git :
```
git clone https://github.com/GoogleCloudPlatform/python-docs-samples
```
  Vous pouvez également télécharger l'exemple en tant que fichier zip et l'extraire.
2. Accédez au répertoire contenant une copie des fichiers de l'étape précédente :
```
cd python-docs-samples/appengine/standard_python3/building-an-app/building-an-app-1
```

Ajouter Firebase à votre projet Google Cloud

Pour utiliser l'authentification Firebase avec votre service Web, ajoutez Firebase à votre projet Google Cloud et configurez vos paramètres d'authentification.

Ajoutez Firebase à votre projet Google Cloud existant à l'aide de l'outil Ajouter un projet de la console Firebase.

Vous pouvez également choisir d'utiliser un compte Firebase sous un nom différent, non associé à votre projet Google Cloud existant.
Dans la console Firebase, activez les fournisseurs de connexion avec authentification. Pour ce service Web, vous activez les fournisseurs de connexion Email/Password (Adresse e-mail/Mot de passe) et Google :
1. Cliquez sur Build > Authentication > Sign-in method (Compiler > Authentification > Méthode de connexion).
2. Sous Sign-in providers (Fournisseurs de connexion), passez la souris sur Email/Password (Adresse e-mail/Mot de passe) et cliquez sur l'icône en forme de crayon.
3. Cochez la case Enable (Activer) pour utiliser l'authentification Email/Password (Adresse e-mail/Mot de passe).
4. Après avoir activé le fournisseur, cliquez sur Save (Enregistrer).
5. Procédez de la même manière pour le fournisseur de connexion Google.
  Conseil : Pour en savoir plus sur l'activation d'autres fournisseurs, consultez la section "Avant de commencer" "des guides Facebook, Twitter et GitHub sur Firebase.
Pour que l'authentification Firebase fonctionne correctement, votre domaine doit être autorisé pour les redirections OAuth. Pour autoriser votre domaine :
1. Sélectionnez Build > Authentication > Settings (Compiler > Authentification > Paramètres).
2. Sous Authorized domains (Domaines autorisés) sur la page Settings (Paramètres), cliquez sur Add Domain (Ajouter un domaine).
3. Saisissez le domaine de votre application sur App Engine, en excluant le préfixe http:// :
  
  PROJECT_ID.REGION_ID.r.appspot.com où PROJECT_ID est l'ID de votre projet Google Cloud.

Ajouter Firebase à votre service Web

Pour ajouter Firebase à votre service Web, copiez l'extrait de code personnalisé, les fichiers JavaScript et CSS de votre projet Firebase dans votre service Web :

Accédez à la console Firebase, puis sélectionnez votre projet.
Sur la page de présentation du projet, sous Lancez-vous en ajoutant Firebase à votre application, sélectionnez Web. Si vous avez déjà ajouté une application au projet, ce texte risque de ne pas s'afficher. Accédez à la page de présentation du projet > Paramètres du projet > Général de votre application existante, faites défiler la page vers le bas, puis sélectionnez Ajouter une application
Une fois l'application enregistrée, un extrait de code personnalisé s'affiche. Copiez le contenu de l'extrait. Pour afficher de nouveau cet extrait de code ultérieurement, accédez à la page Paramètres du projet de votre application Firebase.

Mettez à jour votre fichier templates/index.html en procédant comme suit :

Ajoutez les lignes suivantes à la balise <head> :

<script src="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/6.0.1/firebase-ui-auth.css" />

Ajoutez votre extrait de code personnalisé dans la balise <body>.

Pour ce tutoriel, vous pouvez ajouter le code en haut du corps du fichier, car le seul contenu de templates/index.html est un exemple de services Firebase. Dans votre environnement de production, nous vous recommandons d'ajouter l'extrait de code en bas du corps du fichier, mais avant d'appeler les services Firebase.

Votre code personnalisé se présentera comme suit :

<!-- MOCK SNIPPET: DO NOT COPY -->
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.5/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->

<script>
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    projectId: "<PROJECT_ID>",
    storageBucket: "<BUCKET>.appspot.com",
    messagingSenderId: "<SENDER_ID>",
  };
  firebase.initializeApp(config);
</script>

Remplacez TODO dans l'extrait ci-dessus par la balise de script suivante pour activer le composant Authentication de Firebase :
```
 <script src="https://www.gstatic.com/firebasejs/7.8.0/firebase-auth.js"></script>
 
```
Ces adresses de script sont décrites dans la documentation de l'UI Firebase pour le Web.

Remplacez le reste du corps du fichier par le code suivant, que vous utiliserez plus loin dans ce guide pour afficher les données des utilisateur authentifiés :

<div id="firebaseui-auth-container"></div>

<button id="sign-out" hidden=true>Sign Out</button>

<div id="login-info" hidden=true>
  <h2>Login info:</h2>
  {% if user_data %}
    <dl>
      <dt>Name</dt><dd>{{ user_data['name'] }}</dd>
      <dt>Email</dt><dd>{{ user_data['email'] }}</dd>
      <dt>Last 10 visits</dt><dd>
	{% for time in times %}
          <p>{{ time['timestamp'] }}</p>
        {% endfor %} </dd>
    </dl>
  {% elif error_message %}
    <p>Error: {{ error_message }}</p>
  {% endif %}
</div>

Étapes suivantes

Maintenant que vous avez ajouté Firebase à votre projet Google Cloud et à votre service Web, vous pouvez ajouter du code à votre service Web pour l'activer afin d'authentifier les utilisateurs.

Gérer les données

Authentifier les utilisateurs