Iniciar sesión con Google en iOS

Copie una solicitud de configuración con los pasos de instalación y la guía de markdown completa para este complemento.

Introducción

En esta guía, aprenderá a configurar el inicio de sesión de Google con Capgo Inicio de sesión social para iOS. Supongo que ya ha leído la 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 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. Encuentra el ID del paquete
  1. Abrir Xcode
  2. Haz clic dos veces en App
  3. Asegúrate de que estás en Targets -> App
  4. Encuentra tu Bundle Identifier
  5. Vuelve a la consola de Google y pega tu Bundle Identifier en Bundle ID
7. Opcionalmente, agrega tu App Store ID o Team ID en el ID del cliente si has publicado tu aplicación en App Store
8. Después de rellenar todos los detalles, haz clic create
9. Haz clic OK
10. Abre el cliente iOS recién creado
11. Copia los siguientes datos
  
  El nr. 1 in this image will later become the iOSClientId en el initialize llamar.
  El nr. 2 in esta imagen se convertirá posteriormente YOUR_DOT_REVERSED_IOS_CLIENT_ID
Modifica el archivo Info.plist de tu aplicación
1. Abra Xcode y encuentre el Info.plist archivo
2. Haga clic derecho en este archivo y abra como fuente code
3. En la parte inferior de su Plist archivo, verás un </dict> tag
4. Inserte 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. Cambie el YOUR_DOT_REVERSED_IOS_CLIENT_ID hasta el valor copiado en el paso anterior
  
  Asegúrese de que este valor INICIA con com.googleusercontent.apps
6. Guarde el archivo con Command + S

Modifique el AppDelegate.swift

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

Modificar 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 aplicación modificada de openURL con manejo de GoogleSignIn

Guardar el archivo con Command + S

Configuración de 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)
  
  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 (de paso 1 en la sección 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 iOSServerClientIdla guía de configuración web para crear estas credenciales. Cuidado
  Al utilizar , 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. 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' }) no está disponible en este modo; el refresco debe ocurrir en su backend después de intercambiar serverAuthCode Consulte la guía de configuración general para detalles de implementación.
3. Implemente la función de inicio de sesión. Cree un botón y ejecute 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 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)
```
Pruebe su aplicación
1. Construya su aplicación y ejecute cap sync
2. Si ha hecho todo correctamente, debería 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/privacy-screenAl utilizar ambos plugins juntos, el navegador 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: {}
});