Google Login sur iOS

Copiez un prompt de configuration incluant les étapes d'installation et le guide markdown complet pour ce plugin.

Introduction

Dans ce guide, vous apprendrez à configurer Google Login avec Capgo Social Login pour iOS. Je pars du principe que vous avez déjà lu le guide de configuration générale.

Dans cette partie, vous apprendrez à configurer la connexion Google sur iOS.

Créez un client ID iOS dans la console Google
1. Cliquez sur la barre de recherche
2. Recherchez credentials et cliquez sur APIs and Services celui-ci (numéro 2 sur la capture d'écran)
3. Cliquez sur create credentials
4. Sélectionnez OAuth client ID
5. Sélectionnez l’ Application type vers iOS
6. Trouvez le bundle ID
  1. Ouvrez Xcode
  2. Double-cliquez sur App
  3. Assurez-vous d'être dans la Targets -> App
  4. Trouvez votre Bundle Identifier
  5. Retournez sur la console Google et collez votre Bundle Identifier en Bundle ID
7. Optionnellement, ajoutez votre App Store ID ou Team ID dans le client ID si vous avez publié votre app sur l'App Store
8. Après avoir rempli tous les détails, cliquez sur le create
9. Cliquez OK
10. Ouvrez le client iOS nouvellement créé
11. Copiez les données suivantes
  
  Le nr. 1 dans cette image deviendra plus tard le iOSClientId dans l' initialize appel.
  Le nr. 2 dans cette image deviendra plus tard YOUR_DOT_REVERSED_IOS_CLIENT_ID
Modifiez le fichier Info.plist de votre app
1. Ouvrez Xcode et trouvez le Info.plist fichier
2. Faites un clic droit sur ce fichier et ouvrez-l’en tant que source code
3. En bas de votre Plist fichier, vous verrez une </dict> balise
4. Insérez le fragment suivant juste avant la balise de fermeture </dict> balise
```
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
   </array>
 </dict>
</array>
```
5. Modifiez le YOUR_DOT_REVERSED_IOS_CLIENT_ID à la valeur copiée à l'étape précédente
  
  Assurez-vous que cette valeur COMMENCE PAR par com.googleusercontent.apps
6. Enregistrez le fichier avec Command + S

Modifiez le AppDelegate.swift

Ouvrez l'AppDelegate
Insérez import GoogleSignIn en haut du fichier
Trouvez le func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) fonction

Modifiez la fonction pour qu'elle ressemble à ceci

func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
    // Called when the app was launched with a url. Feel free to add additional processing here,
    // but if you want the App API to support tracking app url opens, make sure to keep this call

    var handled: Bool

    handled = GIDSignIn.sharedInstance.handle(url)
    if handled {
      return true
    }

    return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
}

Fonction application openURL modifiée avec la gestion de GoogleSignIn

Enregistrez le fichier avec Command + S

Configurez la connexion Google dans votre code JavaScript/TypeScript
1. Importer SocialLogin et Capacitor
```
import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';
```
2. Appelez la méthode initialize (à n'appeler qu'une seule fois)
  
  Configuration de base (mode en ligne - recommandé pour la plupart des apps) :
```
// onMounted is Vue specific
onMounted(() => {
  SocialLogin.initialize({
    google: {
      iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
      mode: 'online' // Default mode
    }
  })
})
```
  Configuration avancée avec des client IDs supplémentaires :
```
onMounted(() => {
  SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID',           // Optional: for web platform support
      iOSClientId: 'YOUR_IOS_CLIENT_ID',           // Required: from step 1
      iOSServerClientId: 'YOUR_WEB_CLIENT_ID',     // Optional: same as webClientId, needed for some advanced features
      mode: 'online'                               // 'online' or 'offline'
    }
  })
})
```
  Remarque
  Exigences pour le client ID :
  - iOSClientId: Requis - Doit se terminer par googleusercontent.com (provenant de l'étape 1 ci-dessus)
  - webClientId: Optionnel - Uniquement si vous supportez aussi la plateforme web ou avez besoin de fonctionnalités avancées
  - iOSServerClientId: Optionnel - Doit être la même valeur que webClientId lorsqu'il est fourni
  Pour une configuration avancée avec webClientId et iOSServerClientId, consultez le guide de configuration web pour créer ces identifiants.
  À propos du mode hors ligne : When using mode: 'offline', la réponse de connexion ne contiendra pas directement les données utilisateur. À la place, vous recevrez un code d'authentification serveur qui devra être échangé contre les informations utilisateur via votre serveur backend. SocialLogin.refresh({ provider: 'google' }) n'est pas disponible dans ce mode ; le rafraîchissement doit s'effectuer sur votre backend après l'échange de serverAuthCode. Consultez le guide de configuration générale pour les détails d'implémentation.
3. Implémentez la fonction de connexion. Créez un bouton et exécutez le code suivant au clic
  
  Pour le mode en ligne :
```
const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response - contains user data
console.log(JSON.stringify(res))
```
  Pour le mode hors ligne :
```
const res = await SocialLogin.login({
  provider: 'google',
  options: {
    forceRefreshToken: true // Recommended for offline mode
  }
})
// res contains serverAuthCode, not user data
// Send serverAuthCode to your backend to get user information
// Do not call SocialLogin.refresh() in offline mode
console.log('Server auth code:', res.result.serverAuthCode)
```
Testez votre application
1. Compilez votre app et lancez-la cap sync
2. Si tout est correctement configuré, le flux de connexion Google devrait fonctionner normalement

Problèmes connus

Incompatibilité avec le plugin Privacy Screen

Le plugin Google Login est incompatible avec @capacitor/privacy-screen. Lorsque vous utilisez les deux plugins ensemble, la webview de la connexion Google sera interrompue par l'écran de confidentialité.

Workaround: Appelez await PrivacyScreen.disable(); avant d'appeler la fonction de connexion :

import { PrivacyScreen } from '@capacitor/privacy-screen';
import { SocialLogin } from '@capgo/capacitor-social-login';

await PrivacyScreen.disable();
await SocialLogin.login({
  provider: 'google',
  options: {}
});

Si vous utilisez Google Login sur iOS pour planifier les flux d'authentification et de compte, le connecter à Utiliser @capgo/capacitor-social-login pour la capacité native dans Utiliser @capgo/capacitor-social-login @capgo/capacitor-social-login 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-biometric pour les détails d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour les détails d'implémentation de l'authentification à deux facteurs.