Inicio de sesión de Google en iOS

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

Introducción

En esta guía, aprenderá a configurar el inicio de sesión de Google con Capgo Social Login para iOS. Supongo que ya ha 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.

Crear un ID de cliente de iOS en la consola de Google
1. Hacer clic en la barra de búsqueda
2. Buscar credentials y hacer clic en el APIs and Services uno (número 2 en la captura de pantalla)
3. Hacer clic en el create credentials
4. Seleccionar OAuth client ID
5. Seleccionar el Application type para iOS
6. Encuentre el ID de la cesta
  1. Abrir Xcode
  2. Haga doble clic en App
  3. Asegúrese de que esté en Targets -> App
  4. Encuentre su Bundle Identifier
  5. Volver a la consola de Google y pegar su Bundle Identifier en Bundle ID
7. Opcionalmente, agregue su App Store ID o Team ID en el cliente ID si ha publicado su aplicación en la Tienda de Mac App
8. Después de llenar todos los detalles, haga clic en create
9. Haga clic en OK
10. Abra el cliente iOS recién creado
11. Copie los siguientes datos
  
  El nr. 1 en esta imagen se convertirá más tarde en el iOSClientId en el initialize llamado.
  El nr. 2 en esta imagen se convertirá más tarde en YOUR_DOT_REVERSED_IOS_CLIENT_ID
Modifique la configuración de Info.plist de su aplicación
1. Abra Xcode y busque el archivo Info.plist archivo
2. Haga clic con el botón derecho en este archivo y abra como fuente code
3. En la parte inferior de su Plist archivo, verá un </dict> etiqueta
4. Inserte el siguiente fragmento justo antes de la etiqueta de cierre </dict> archivo Info.plist con esquemas de URL __CAPGO_KEEP_0__ insertados antes de la etiqueta de cierre
```
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
   </array>
 </dict>
</array>
```
5. Cambiar a YOUR_DOT_REVERSED_IOS_CLIENT_ID al valor copiado en el paso anterior
  
  Asegúrese de que este valor EMPIECE con com.googleusercontent.apps
6. Guardar el archivo con Command + S

Modificar el AppDelegate.swift

Abrir el AppDelegate
Insertar import GoogleSignIn en la parte superior del archivo
Encuentre el 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 la aplicación modificada con manejo de GoogleSignIn

Guardar el archivo con Command + S

Configurar inicio de sesión de Google en su 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)
  
  Configuración básica (modo en línea - recomendado para la mayoría de las aplicaciones):
```
// 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 de cliente:
  - iOSClientId: Requerido - Debe terminar con googleusercontent.com (desde el paso 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 configuración avanzada con webClientId y, consulte la iOSServerClientIdguía de configuración web para crear estas credenciales. y
  Sobre el modo sin conexión: Al utilizar mode: 'offline', the login response will not contain user data directly. Instead, you’ll receive a server auth code that must be exchanged for user information via your backend server. SocialLogin.refresh({ provider: 'google' }) la respuesta de inicio de sesión no contendrá datos de usuario directamente. En su lugar, recibirá un autenticación de servidor __CAPGO_KEEP_0__ que debe intercambiar por información de usuario a través de su servidor de backend. serverAuthCodeno está disponible en este modo; el refresco debe ocurrir en su servidor de backend después de intercambiar . Consulte el guía de configuración general
3. Implement the login function. Create a button and run the following code on click
  
  Implemente la función de inicio de sesión. Crea un botón y ejecute el siguiente __CAPGO_KEEP_0__ al hacer clic
```
const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response - contains user data
console.log(JSON.stringify(res))
```
  Para modo offline:
```
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. Construye tu aplicación y ejecútala cap sync
2. Si has hecho 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-privacidadAl utilizar ambos plugins juntos, el visor de inicio de sesión de Google se interrumpirá por la pantalla de privacidad.

Solución alternativa: 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á utilizando Inicio de sesión de Google en iOS To plan autenticación y 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-passkey Para el detalle de implementación en @capgo/capacitor-passkey, @capgo/capacitor-biométrica-nativa Para el detalle de implementación en @capgo/capacitor-biométrica-nativa, y Autenticación de dos factores Para el detalle de implementación en Autenticación de dos factores.