Google Login en iOS

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

Introducción

En esta guía aprenderás a configurar Google Login con Capgo Social Login para iOS. Asumo que ya has leído la guía de configuración general.

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

Crea un ID de cliente de iOS en la consola de Google
1. Haz clic en la barra de búsqueda
2. Busca 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 a iOS
6. Busca el bundle ID
  1. Abre Xcode
  2. Haz doble clic en App
  3. Asegúrate de estar en la Targets -> App
  4. Busca tu Bundle Identifier
  5. Vuelve a Google Console y pega tu Bundle Identifier en Bundle ID
7. Opcionalmente, añade tu App Store ID o Team ID al client ID si has publicado tu app en App Store
8. Después de rellenar todos los detalles, haz clic en create
9. Haz clic OK
10. Abre el cliente iOS recién creado
11. Copia los siguientes datos
  
  El nr. 1 en esta imagen se convertirá después en el iOSClientId en la initialize llamada.
  El nr. 2 en esta imagen se convertirá después en YOUR_DOT_REVERSED_IOS_CLIENT_ID
Modifica el Info.plist de tu app
1. Abre Xcode y busca el Info.plist archivo
2. Haz clic derecho en este archivo y elige Open As Source code
3. En la parte inferior de tu Plist archivo, verás una </dict> etiqueta
4. Inserta el siguiente fragmento justo antes del cierre de la </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 al valor copiado en el paso anterior
  
  Asegúrate de que este valor COMIENCE con com.googleusercontent.apps
6. Guarda el archivo con Command + S

Modifica el AppDelegate.swift

Abre el AppDelegate
Insertar import GoogleSignIn al principio del archivo
Busca el func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) función

Modifica 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 application openURL modificada con el manejo de GoogleSignIn

Guarda el archivo con Command + S

Configura el login de Google en tu code de JavaScript/TypeScript
1. Importar SocialLogin y Capacitor
```
import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';
```
2. Llama al método initialize (solo debe llamarse una vez)
  
  Configuración básica (modo online - recomendado para la mayoría de las 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 del Client ID:
  - iOSClientId: Obligatorio - Debe terminar con googleusercontent.com (del paso 1 anterior)
  - webClientId: Opcional - Solo es necesario si también soportas la plataforma web o necesitas funciones avanzadas
  - iOSServerClientId: Opcional - Debe tener el mismo valor que webClientId cuando se proporciona
  Para una configuración avanzada con webClientId y iOSServerClientId, consulta la guía de configuración web para crear estas credenciales.
  Sobre el modo sin conexión: Al usar mode: 'offline', la respuesta de inicio de sesión no contendrá datos de usuario directamente. En su lugar, recibirás un code de autenticación del servidor que debes intercambiar por información del usuario a través de tu servidor backend. SocialLogin.refresh({ provider: 'google' }) no está disponible en este modo; el refresh debe ocurrir en tu backend después de intercambiar serverAuthCode. Consulta la guía de configuración general para los detalles de implementación.
3. Implementa la función de login. Crea un botón y ejecuta el siguiente code al hacer clic
  
  Para el modo en línea:
```
const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response - contains user data
console.log(JSON.stringify(res))
```
  Para el 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)
```
Prueba tu aplicación
1. Compila tu app y ejecútala cap sync
2. Si lo has hecho todo correctamente, deberías ver que el flujo de inicio de sesión de Google funciona correctamente

Problemas conocidos

Incompatibilidad con el plugin Privacy Screen

El plugin Google Login es incompatible con @capacitor/privacy-screen. Al usar ambos plugins juntos, la pantalla de privacidad interrumpirá el webview de inicio de sesión de Google.

Solución: Llama a 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 usando Google Login en iOS para planificar los flujos de autenticación y de cuenta, conéctalo con Uso de @capgo/capacitor-social-login para la capacidad nativa en el uso de @capgo/capacitor-social-login, @capgo/capacitor-social-login para los detalles de implementación en @capgo/capacitor-social-login, @capgo/capacitor-passkey para el detalle de implementación en @capgo/capacitor-passkey, @capgo/capacitor-native-biometric para el detalle de implementación en @capgo/capacitor-native-biometric, y Autenticación de dos factores para el detalle de implementación en la autenticación de dos factores.