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. Veuillez vous assurer 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 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

        Avertissement

        CETTE INFORMATIONS SERA AFFICHÉE AUX UTILISATEURS

      • Entrez le user support email

        Remarque

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

      2. You DOIT Ajoutez l'icône de l'application.

         

         Remarque

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

      3. Vous DEVRIEZ configurez App domain

         

         Remarque

         Je ne ferai pas cela car il s'agit simplement d'une démonstration simple qui va NON Publiez, mais je vous recommande fortement de remplir cette section.

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

         

      5. Cliquez sur save and continue

         
6. Configurez les autorisations

   1. Cliquez sur add or remove scopes

      

   2. Sélectionnez les champs d'accès suivants 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, appuyez sur Entrée, puis 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 ne fait pas partie de ce tutoriel. Vous pouvez en savoir plus iciCeci 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
Requiert un serveur backend	❌	✅
Jet d'accès longue durée	❌	✅
Easy setup	✅	❌

Note

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 longue durée 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 du mode hors ligne, la partie frontend reçoit des informations minimales (principalement juste une authentification serveur code). Sans un serveur 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 contre des jetons d'accès et de renouvellement, puis renouveler ces jetons sur le serveur.

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 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 fera des appels à certaines API Google depuis le serveur, mais uniquement lorsque l'utilisateur utilise l'application

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

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

   In 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 méthode fetch de Javascript API

Vous pouvez trouver le code pour cet exemple ici

As vous pouvez voir :

L'idée est plutôt simple. Vous envoyez une requête simple à GET demande à https://www.googleapis.com/oauth2/v3/tokeninfo and this returns you whether the token is valid or not and if it it is, it gives you the email of the user. It also gives you some other info about the user token

From there, you could issue the user with your own JWT or issue some sort of session cookie. The possibilities are endless, for the final auth implementation.

Si vous souhaitez appeler Google API’, je vous recommande fortement de regarder Google OAuth 2.0 PlaygroundEn utilisant l'accès hors ligne avec votre propre backend

En utilisant 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 est nécessaire.

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

• Hono

• Hono Zod validateur

• Zod

• Zod

• Hono JWT une base de données simple

La code pour cet exemple peut être trouvée here

Ici vous pouvez trouver le code pour cet exemple : 

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. En mode hors ligne 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.

Continuez de la section Google Login Setup

Si vous utilisez Configuration de connexion Google pour planifier l'authentification et les flux de compte, connectez-l’avec Utilisez @capgo/capacitor-social-login pour la capacité native dans Utilisez @capgo/capacitor-social-login, @capgo/capacitor-connexion-social pour les détails d'implémentation dans @capgo/capacitor-social-login, @capgo/capacitor-passkey pour les détails d'implémentation dans @capgo/capacitor-passkey, @capgo/capacitor-native-biometrique pour les détails d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour les détails d'implémentation dans Authentification à deux facteurs.