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 requise, quel que soit le plateforme que vous choisissez d'utiliser.

Dans cette partie, vous configurerez 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

      Remarque

      Je supposerai que vous développez une application ouverte 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 relatives à votre application

   1. Commencez par la App Information

      
      • Veuillez saisir votre App Name

        Attention

        CELA SERA AFFICHÉ AUX UTILISATEURS

      • Saisissez le user support email

        Remarque

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

      2. You pouvez add the app logo.

         

         Note

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

      3. You devez configure the App domain

         

         Remarque

         Je ne ferai pas cela car il s'agit simplement d'une démonstration simple qui sera NE PAS publiée, mais je recommande fortement de remplir cette section.

      4. Vous DEVEZ fournir l'adresse e-mail du développeur

         

      5. Cliquez sur save and continue

         
6. Configurer les autorisations

   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. Entrer votre adresse électronique Google, cliquez 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 ici. Cette étape n'est pas requise pour les tests locaux, mais est requise 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 serveur backend	❌	✅
Jeton d'accès à vie longue	❌	✅
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 à vie longue permettent cette fonctionnalité en permettant au serveur backend d'appeler les API de Google au nom de l'utilisateur à tout moment.

Prudence

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 serveur code). Sans un serveur backend pour échanger ce code en jetons et en informations sur l'utilisateur, le mode hors ligne ne fournit aucune donnée utile à votre application frontend.

Attention

SocialLogin.refresh({ provider: 'google' }) ne pas fonctionne avec google.mode: 'offline'. En mode hors ligne, le plugin ne vous donne que serverAuthCode, et votre serveur doit échanger ce code pour les jetons d'accès et de mise à jour, puis mettre à jour ces jetons sur le serveur.

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

1. Vous souhaitez que l'utilisateur se connecte, immédiatement après vous allez lui délivrer 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 des appels à certaines API Google depuis le client, mais jamais depuis le serveur

   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 activement l'application.

   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 activement l'application.

   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 méthode 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 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 jeter un œil à

If you do want to call Google API’s, I would strongly recommend looking at Là, vous pouvez facilement voir quels APIs vous pouvez appeler.Utilisation de l'accès hors ligne avec votre propre backend

Si vous voulez effectivement appeler Google __CAPGO_KEEP_0__’, je vous recommande fortement de jeter un œil à

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 pour cet exemple peut être trouvé ici

As for the client code, il a l'apparence suivante :

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 d'appel dans l'application. C'est intentionnel. En mode hors ligne Google, la mise à jour se produit après que votre serveur échange et stocke le jeton de rafraîchissement de manière sécurisée. SocialLogin.refresh() Continuez de la section de configuration de connexion Google serverAuthCode Sous-titre « Continuez de la section de configuration de connexion Google »

Si vous utilisez la configuration de connexion Google

Utilisez @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login pour la capacité native dans Utilisez @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login, __CAPGO_KEEP_0__ Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and Authentification à deux facteurs pour les détails d'implémentation dans Authentification à deux facteurs.