Configuration de connexion Google

Introduction

Dans ce guide, vous apprendrez à configurer l'authentification Google avec Capgo Social Login. Vous aurez besoin des éléments suivants pour configurer l'authentification Google :

• Un compte Google

Configuration générale

Note

Cette étape est requise, quel que soit le plateforme que vous décidez d'utiliser.

Dans cette partie, vous allez configurer l'écran de connexion affiché par Google.

1. Veuillez vous rendre sur console.cloud.google.com
2. Cliquez sur le sélecteur de projet
3. Si vous n'avez pas encore de projet, veuillez créer un nouveau projet.
   1. Cliquez sur New project
   2. Nommez votre projet et cliquez sur Create
   3. Assurez-vous d'être sur le bon projet
4. Commencez à configurer le OAuth consent screen

   1. Cliquez sur la barre de recherche

      

   2. Recherchez OAuth consent screen et cliquez dessus

      

   3. Configurez l'écran de consentement

      Remarque

      Je supposerai que vous développez une application ouverte au public, donc je vais utiliser external type d'utilisateur. Veuillez sélectionner le type d'utilisateur qui vous convient le mieux ET cliquez create

      Cliquez sur create

      
5. Remplissez les informations sur votre application

   1. Commencez par la App Information

      
      • Veuillez saisir votre App Name

        ATTENTION : CE MESSAGE SERA AFFICHÉ AUX UTILISATEURS

        Saisissez le

      • Remarque user support email

        Remarque

        Vous pouvez en savoir plus sur l'adresse e-mail de support ici ici

      2. Vous PEUVEZ ajouter le logo de l'application.

         

         Remarque

         Ceci n'est pas obligatoire et je vais passer cette étape

      3. Vous DEVEZ configurez la section de configuration du domaine de l'application avec le champ des domaines autorisés App domain

         

         Je ne vais pas le faire car il s'agit d'une simple démonstration qui ne sera pas

         __CAPGO_KEEP_0__ publiée, mais je recommande fortement de remplir cette section. Vous

      4. __CAPGO_KEEP_0__ devez fournir l'adresse e-mail du développeur Section des informations de contact du développeur avec le champ e-mail

         

      5. Note save and continue

         
6. Configurer les champs d'accès

   1. Cliquez sur add or remove scopes

      

   2. Sélectionnez les champs d'accès suivants et cliquez sur update

      

   3. Cliquez sur save and continue

      
7. Ajouter un utilisateur de test
   1. Cliquez sur add users
   2. Entrez votre adresse email Google, appuyez sur entrer, et cliquez add
   3. Cliquez save and continue
8. Cliquez back to dashboard
9. Soumettre votre application pour la vérification

   Remarque

   Je vous recommande vivement de soumettre votre application pour la vérification. Cela est en dehors du cadre de ce tutoriel. Vous pouvez en savoir plus iciCela n'est pas requis pour les tests locaux, mais est requis pour la production.

Différences entre l'accès en ligne et l'accès hors ligne

Il existe plusieurs façons d'utiliser Google Login avec Capacitor. Voici une table qui résume les différences entre les deux :

	Accès en ligne	Accès hors ligne
Exige un backend	❌	✅
Jeton d'accès long-vivant	❌	✅
Configuration facile	✅	❌

Note

Mode hors ligne ce qui signifie que votre backend peut accéder aux API de Google même lorsque l'utilisateur n'utilise pas votre application (c'est-à-dire lorsque l'utilisateur est « hors ligne » de votre application). Les jetons d'accès long-vivants permettent cette fonctionnalité en permettant au backend d'appeler les API de Google au nom de l'utilisateur à tout moment.

Attention

Le mode hors ligne REQUIERT un serveur backend. Lors de l'utilisation du mode hors ligne, le frontend reçoit des informations minimales (principalement juste une authentification du serveur code). Sans un serveur pour échanger cette code en jetons et en informations d'utilisateur, le mode hors ligne ne fournit aucune donnée utile à votre application frontend.

Attention

SocialLogin.refresh({ provider: 'google' }) ne fonctionne pas google.mode: 'offline'avec serverAuthCode, and your backend must exchange that code for access and refresh tokens, then refresh those tokens on the backend.

, et votre serveur doit échanger ce __CAPGO_KEEP_0__ en jetons d'accès et de rappel, puis rafraîchir ces jetons sur le serveur.

1. Si vous n'avez toujours pas compris laquelle choisir, veuillez considérer les scénarios suivants : 

   Dans ce cas, choisissez l'accès en ligne.

2. Votre application appellera certaines API Google depuis le client, mais jamais depuis l'arrière-plan.

   Dans ce cas, choisissez l'accès en ligne

3. Votre application appellera certaines API Google depuis l'arrière-plan, mais uniquement lorsque l'utilisateur utilise l'application de manière active.

   Dans ce cas, choisissez l'accès en ligne

4. Votre application vérifiera périodiquement le calendrier de l'utilisateur, même lorsque celui-ci n'utilise pas l'application de manière active.

   Dans ce cas, choisissez l'accès hors ligne

Un exemple d'arrière-plan pour l'accès en ligne

Dans cette partie du tutoriel, je vais montrer comment valider l'utilisateur sur votre arrière-plan.

Cet exemple sera très simple et il sera basé sur les technologies suivantes :

• Typescript

• Hono

• La fonction fetch de Javascript API

Vous pouvez trouver le code pour cet exemple ici

Comme vous pouvez le voir :

L'idée est plutôt simple. Vous envoyez une requête simple à GET et cela vous retourne si le jeton est valide ou non et si c'est le cas, il vous donne l'adresse e-mail de l'utilisateur. Il vous donne également quelques autres informations sur le jeton de l'utilisateur https://www.googleapis.com/oauth2/v3/tokeninfo L'interface de Google OAuth Playground montrant les informations de réponse du jeton avec les détails de l'utilisateur

Si vous voulez effectivement appeler Google __CAPGO_KEEP_0__’, je vous recommande fortement de regarder

Si vous voulez effectivement appeler Google API’, je vous recommande fortement de regarder Jardin d'essai OAuth 2.0 de GoogleVous pouvez facilement voir quels APIs vous pouvez appeler à partir de là.

Utilisation de l'accès hors ligne avec votre propre backend

Pour utiliser l'accès hors ligne, vous aurez besoin des éléments suivants :

• Un serveur HTTP

Dans cet exemple, j'utiliserai les technologies suivantes pour fournir l'accès hors ligne dans mon application :

• Hono

• Hono Zod validator

• Zod

• Hono JWT

• LowDb (une base de données simple)

Le code protégé pour cet exemple peut être trouvé ici

En ce qui concerne le client code, il ressemble à ceci :

import { Capacitor } from '@capacitor/core';
import { GoogleLoginOfflineResponse, SocialLogin } from '@capgo/capacitor-social-login';
import { usePopoutStore } from '@/popoutStore'; // <-- specific to my app

const baseURL = "[redacted]";

async function fullLogin() {
  await SocialLogin.initialize({
    google: {
      webClientId: '[redacted]',
      iOSClientId: '[redacted]',
      iOSServerClientId: 'The same value as webClientId',
      mode: 'offline' // <-- important
    }
  })
  const response = await SocialLogin.login({
    provider: 'google',
    options: {
      forceRefreshToken: true // <-- important
    }
  })

  if (response.provider === 'google') {
    const result = response.result as GoogleLoginOfflineResponse
    const res = await fetch(`${baseURL}/auth/google_offline`, {
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        serverAuthCode: result.serverAuthCode,
        platform: Capacitor.getPlatform()
      }),
      method: "POST"
    })

    if (res.status !== 200) {
      popoutStore.popout("Full google login failed", "check console");
      return
    }

    const { jwt } = await res.json();
    const userinfo = await fetch(`${baseURL}/auth/get_google_user`, {
      headers: {
        Authorization: `Bearer ${jwt}`
      }
    })
    if (userinfo.status !== 200) {
      popoutStore.popout("Full google (userinfo) login failed", "check console");
      return
    }
    popoutStore.popout("userinfo res", await userinfo.text());
  }
}

Notez ce qui manque ici : il n'y a pas SocialLogin.refresh() appel dans l'application. C'est intentionnel. Dans le mode hors ligne de Google, la mise à jour se produit après que votre serveur échange serverAuthCode et stocke le jeton de mise à jour de manière sécurisée.