Connexion Google sur iOS

Copiez un prompt de configuration avec les étapes d'installation et la guide markdown complète pour ce plugin.

Introduction

Dans ce guide, vous apprendrez à configurer l'authentification Google avec Capgo Social Login pour iOS. Je suppose que vous avez déjà lu le guide de configuration général. guide de configuration général.

Dans cette partie, vous apprendrez à configurer l'authentification Google sur iOS.

Créer un identifiant client iOS dans le console Google
1. Cliquez sur la barre de recherche
2. Recherchez credentials et cliquez sur APIs and Services un (le numéro 2 sur l'écran d'écran)
3. Cliquez sur le create credentials
4. Sélectionnez OAuth client ID
5. Sélectionnez le Application type Application type selection with iOS option highlighted iOS
6. Ouvrez Xcode
  1. Double-cliquez sur
  2. L'App target dans le navigateur de projet Xcode App
  3. Assurez-vous d'être sur Targets -> App
  4. Trouvez votre Bundle Identifier
  5. Retournez dans le console Google et collez votre Bundle Identifier à Bundle ID
7. Optionnellement, ajoutez votre App Store ID ou Team ID context
8. collez dans l'ID de client si vous avez publié votre application sur l'App Store 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 le initialize appel.
  Le nr. 2 dans cette image deviendra plus tard YOUR_DOT_REVERSED_IOS_CLIENT_ID
Modifiez le fichier Info.plist de votre application
1. Ouvrez Xcode et trouvez le Info.plist fichier
2. Cliquez avec le bouton 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érer le fragment suivant juste avant la fermeture </dict> tag
```
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
   </array>
 </dict>
</array>
```
5. Changer le YOUR_DOT_REVERSED_IOS_CLIENT_ID à la valeur copiée dans l'étape précédente
  
  Vérifiez que cette valeur COMMENCE par com.googleusercontent.apps
6. Sauvegardez le fichier avec Command + S

Modifiez le AppDelegate.swift

Ouvrez l’AppDelegate
Insérez import GoogleSignIn en haut du fichier
Trouvez la func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) la 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)
}

Application modifiée ouverte avec la gestion GoogleSignIn

Enregistrez le fichier avec Command + S

Configurer le login Google dans votre code JavaScript/TypeScript
1. Importer SocialLogin et Capacitor
```
import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';
```
2. Appeler la méthode d'initialisation (ceci doit être appelé qu'une seule fois)
  
  Configuration de base (mode en ligne - recommandé pour la plupart des applications) :
```
// onMounted is Vue specific
onMounted(() => {
  SocialLogin.initialize({
    google: {
      iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
      mode: 'online' // Default mode
    }
  })
})
```
  Configuration avancée avec des identifiants clients 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 l'ID du client :
  - iOSClientId: Requis - Doit se terminer par googleusercontent.com (de l'étape 1 ci-dessus)
  - webClientId: Facultatif - N'est nécessaire que si vous supportez également la plateforme web ou avez besoin de fonctionnalités avancées
  - iOSServerClientId: Facultatif - Doit être la même valeur que webClientId Lorsque fourni
  Pour un setup avancé avec webClientId et iOSServerClientIdvoir le guide de configuration web pour la création de ces informations d'identification.
  À propos du mode hors ligne : Lorsque vous utilisez mode: 'offline', la réponse de connexion ne contient pas les données de l'utilisateur directement. Au lieu de cela, vous recevrez un authentification serveur code qui doit être échangé pour obtenir des informations sur l'utilisateur via votre serveur backend. SocialLogin.refresh({ provider: 'google' }) n'est pas disponible dans ce mode ; la mise à jour doit se produire sur votre serveur backend après avoir échangé serverAuthCode. Voir le guide de configuration général pour les détails d'implémentation.
3. Implémentez la fonction de connexion. Créez un bouton et exécutez le code suivant lors du 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. Construisez votre application et exécutez-la cap sync
2. Si vous avez fait tout correctement, vous devriez voir le flux de connexion Google fonctionner correctement

Problèmes connus

Incompatibilité du plugin de l'écran de confidentialité

Le plugin de connexion Google est incompatible avec @capacitor/écran-de-confidentialité. Lors de l'utilisation de ces deux plugins ensemble, la vue de connexion web de Google sera interrompue par l'écran de confidentialité.

Solution de contournement : Appeler await PrivacyScreen.disable(); context : Fragment de texte HTML d'une chaîne de Capgo UI plus longue (clé parente `appflow_migration_step2`). Page/zone : Comparaison/migration de l'Appflow / marketing de copie de site. Rôle : Phrase de copie de site. Vu dans : page ionic-appflow.astro. Préservez les termes de produit/marque et les termes de développeur de Capgo exactement. Clé de message `appflow_migration_step2` (Étape 2 de la migration d'Appflow).

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 l'authentification et les flux de compte, connectez-l’à En utilisant @capgo/capacitor-social-login pour la capacité native dans En utilisant @capgo/capacitor-social-login @capgo/capacitor-social-login pour le détail d'implémentation dans @capgo/capacitor-social-login @capgo/capacitor-passkey pour le détail d'implémentation dans @capgo/capacitor-passkey @capgo/capacitor-native-biometric pour le détail d'implémentation dans @capgo/capacitor-native-biometric, et Authentification à deux facteurs pour le détail d'implémentation dans Authentification à deux facteurs.