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

Remarque

Cette étape est obligatoire, quels que soient les plateformes que vous choisissez 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 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

      Note

      Je supposerai que vous développez une application accessible au public, donc je vais utiliser le 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 SERA AFFICHÉ AUX UTILISATEURS

      • Entrez le user support email

        Note

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

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

         

         Note

         Ceci n'est pas obligatoire et je vais passer à l'étape suivante

      3. Vous DEVEZ configurer 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 c'est juste une démonstration simple qui ne sera

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

      4. DEVEZ configurer la section de configuration du domaine de l'application avec le champ des domaines autorisés fourir l'adresse e-mail du développeur

         

      5. Cliquez sur save and continue

         
6. Configurer les étendues

   1. Cliquez sur add or remove scopes

      

   2. Sélectionnez les étendues suivantes et cliquez update

      

   3. Cliquez save and continue

      
7. Ajoutez un utilisateur de test
   1. Cliquez sur add users
   2. Entrez votre adresse e-mail Google, cliquez sur Entrer, puis cliquez sur 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 champ de ce tutoriel. Vous pouvez en savoir plus sur __CAPGO_KEEP_0__ here. Cela n'est pas nécessaire 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 longue durée	❌	✅
Configuration facile	✅	❌

Remarque

mode hors ligne signifie que votre serveur 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 terme permettent cette fonctionnalité en permettant au serveur backend d'appeler les API de Google au nom de l'utilisateur à tout moment.

Attention

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

Attention

SocialLogin.refresh({ provider: 'google' }) fais pas travail avec google.mode: 'offline'. Le plugin en mode hors ligne ne vous donne que serverAuthCodeet que votre backend échange ce code par des jetons d'accès et de renouvellement, puis renouvelle ces jetons sur le backend.

Si vous ne savez toujours pas lequel choisir, veuillez considérer les scénarios suivants :

1. Vous voulez que l'utilisateur se connecte, immédiatement après vous allez lui émettre un JWT personnalisé. Votre application ne fera PAS d'appels aux API Google

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

2. Votre application fera appel à certaines API Google depuis le client, mais jamais depuis le backend

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

3. Votre application fera appel à certaines API Google depuis le backend, mais uniquement lorsque l'utilisateur utilise l'application activement

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

4. Votre application vérifiera périodiquement le calendrier de l'utilisateur, même lorsqu'il n'utilise pas l'application

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

Un exemple de backend pour l'accès en ligne

Dans cette partie du tutoriel, je vais montrer comment valider l'utilisateur sur votre backend.

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

• Typescript

• Hono

• La requête de fetch de Javascript utilise 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 d'autres informations sur le jeton de l'utilisateur. https://www.googleapis.com/oauth2/v3/tokeninfo Cloudflare

À partir de là, vous pourriez attribuer au utilisateur votre propre JWT ou attribuer une sorte de cookie de session. Les possibilités sont infinies, pour la mise en œuvre d'authentification finale.

Si vous voulez appeler Google API’, je vous recommande fortement de regarder Google’s OAuth 2.0 PlaygroundÀ partir de là, vous pouvez facilement voir quels APIs vous pouvez appeler.

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

• Vérificateur Hono Zod

• Zod

• Hono JWT

• LowDb (une base de données simple)

Le code 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 et stocke le jeton de mise à jour de manière sécurisée. serverAuthCode Continuez de la configuration de connexion Google

Paramètres de connexion Google

Si vous utilisez Google Login Setup pour planifier l'authentification et les flux de compte, connectez-le avec En utilisant @capgo/capacitor-social-login pour la capacité native en utilisant @capgo/capacitor-social-login, @capgo/capacitor-social-login pour le détail d'implémentation en @capgo/capacitor-social-login, @capgo/capacitor-passkey pour le détail d'implémentation en @capgo/capacitor-passkey, @capgo/capacitor-native-biometric pour le détail d'implémentation en @capgo/capacitor-native-biometric, et Deux facteurs d'authentification pour le détail d'implémentation dans Deux facteurs d'authentification.