Inicio de sesión de Google en iOS

Copia un comando de configuración con los pasos de instalación y la guía markdown completa para este plugin.

Introduction

En esta guía, aprenderá a configurar el inicio de sesión de Google con Capgo Social Login para iOS. guía de configuración general.

En esta parte, aprenderá a configurar el inicio de sesión de Google en iOS.

Crear un ID de cliente de iOS en la consola de Google
1. Haga clic en la barra de búsqueda
2. Buscar credentials y haz clic en el APIs and Services uno (número 2 en la captura de pantalla)
3. Haz clic en el create credentials
4. Selecciona OAuth client ID
5. Selecciona el Application type para iOS
6. Encuentre el ID de la aplicación
  1. Abra Xcode
  2. Haga doble clic en App
  3. Asegúrate de que estás en Targets -> App
  4. Encuentre su Bundle Identifier
  5. Vuelva a la consola de Google y pegue su Bundle Identifier en Bundle ID
7. Opcionalmente, agregue su App Store ID o Team ID ingresa el ID del cliente si has publicado tu aplicación en App Store
8. Después de llenar todos los detalles, haz clic create
9. Click OK
10. Abra el cliente iOS recién creado
11. Copie los siguientes datos
  
  Nota nr. 1 En este imagen se convertirá en el iOSClientId en la initialize llamada.
  Nota nr. 2 en este imagen se convertirá más tarde YOUR_DOT_REVERSED_IOS_CLIENT_ID
Modifica el archivo Info.plist de tu aplicación
1. Abre Xcode y encuentra el Info.plist archivo
2. Haz clic derecho en este archivo y abre como fuente code
3. En la parte inferior de tu Plist archivo, verás una </dict> etiqueta
4. Inserta el siguiente fragmento justo antes de la etiqueta de cierre </dict> etiqueta
```
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
   </array>
 </dict>
</array>
```
5. Cambiar el YOUR_DOT_REVERSED_IOS_CLIENT_ID a el valor copiado en el paso anterior
  
  Asegúrese de que este valor EMPIECE con com.googleusercontent.apps
6. Guardar el archivo con Command + S

Modifique el AppDelegate.swift

Abra el archivo AppDelegate
Inserte import GoogleSignIn en la parte superior del archivo
Encuentre la func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) función

Modifique la función para que se vea así

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)
}

Función de apertura de aplicación modificada con manejo de GoogleSignIn

Guardar el archivo con Command + S

Configura el inicio de sesión de Google en tu JavaScript/TypeScript code
1. Importar SocialLogin y Capacitor
```
import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';
```
2. Llamar al método de inicialización (debe llamarse solo una vez)
  
  Basic setup (online mode - recommended for most apps):
```
// onMounted is Vue specific
onMounted(() => {
  SocialLogin.initialize({
    google: {
      iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
      mode: 'online' // Default mode
    }
  })
})
```
  Configuración avanzada con IDs de cliente adicionales:
```
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'
    }
  })
})
```
  Nota
  Requisitos de ID del cliente:
  - iOSClientId: Requerido - Debe terminar con googleusercontent.com (de la etapa 1 anterior)
  - webClientId: Opcional - Solo es necesario si también soporta la plataforma web o necesita características avanzadas
  - iOSServerClientId: Opcional - Debe ser el mismo valor que webClientId cuando se proporciona
  Para un setup avanzado con webClientId y iOSServerClientIdver también Guía de configuración web para crear estos credenciales.
  Sobre el modo sin conexión: Cuando se utiliza mode: 'offline', la respuesta de inicio de sesión no contendrá datos del usuario directamente. En su lugar, recibirá un servidor de autenticación code que debe intercambiarse por información del usuario a través de su servidor de backend. SocialLogin.refresh({ provider: 'google' }) No está disponible en este modo; debe ocurrir la actualización en su servidor después de la autenticación serverAuthCode. Consulte la guía de configuración general para detalles de implementación.
3. Implemente la función de inicio de sesión. Crea un botón y ejecute el siguiente code al hacer clic
  
  Para modo en línea:
```
const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response - contains user data
console.log(JSON.stringify(res))
```
  Para modo sin conexión:
```
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)
```
__CAPGO_KEEP_0__
1. Construye tu aplicación y ejecútala cap sync
2. Si has realizado todo correctamente, deberías ver el flujo de inicio de sesión de Google funcionando correctamente.

Problemas Conocidos

Incompatibilidad del plugin de pantalla de privacidad

El plugin de inicio de sesión de Google es incompatible con @capacitor/pantalla-de-privacidad. Al utilizar ambos plugins juntos, el navegador de inicio de sesión de Google se interrumpirá por la pantalla de privacidad.

Workaround: Llamar await PrivacyScreen.disable(); antes de llamar a la función de inicio de sesión:

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

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

Si estás utilizando Iniciar sesión con Google en iOS para planificar la autenticación y los flujos de cuenta, conecte con Usando @capgo/capacitor-login-social para la capacidad nativa en Usando @capgo/capacitor-login-social @capgo/capacitor-login-social para el detalle de implementación en @capgo/capacitor-login-social @capgo/capacitor-clave-de-pasaje para el detalle de implementación en @capgo/capacitor-clave-de-pasaje @capgo/capacitor-biometría-nativa para el detalle de implementación en @capgo/capacitor-biometría-nativa, y Autenticación de dos factores Para la implementación detallada en la autenticación de dos factores.