Google Inicie sesión en iOS

Introducción

En esta guía, aprenderá cómo configurar el inicio de sesión Google con Capgo el inicio de sesión social para iOS. Supongo que ya ha leído la guía de configuración general.

Usando Google inicia sesión en iOS

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

Cree una ID de cliente iOS en la consola Google
1. Haga clic en la barra de búsqueda
2. Busque credentials y haga clic en “API y servicios” (número 2 en la captura de pantalla)
3. Haga clic en “crear credenciales”.
4. Seleccione OAuth client ID
5. Seleccione el Tipo de aplicación para iOS
6. Busque el ID del paquete
  1. Abra Xcode
  2. Haga doble clic en App
  3. Asegúrate de estar en Targets -> App
  4. Encuentre su “Identificador de paquete”
  5. Regrese a la consola Google y pegue su “Identificador de paquete” en “ID de paquete”.
7. Opcionalmente, agregue su App Store ID o Team ID al ID del cliente si ha publicado su aplicación en App Store.
8. Después de completar todos los detalles, haga clic en create
9. Haga clic en OK
10. Abra el cliente iOS recién creado.
11. Copia los siguientes datos
  
  El nr. 1 en esta imagen luego se convertirá en el iOSClientId en la llamada initialize.
  El nr. 2 en esta imagen luego se convertirá en YOUR_DOT_REVERSED_IOS_CLIENT_ID
Modifica el Info.plist de tu aplicación
1. Abra Xcode y busque el archivo Info.plist
2. Haga clic derecho en este archivo y ábralo como código fuente.
3. En la parte inferior de su archivo Plist, verá una etiqueta </dict>
4. Inserte el siguiente fragmento justo antes de la etiqueta de cierre </dict>
```
<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 al valor copiado en el paso anterior.
  
  :::precaución Asegúrese de que este valor COMIENCE con com.googleusercontent.apps :::
6. Guarde el archivo con Comando + S

Modificar el AppDelegate.swift

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

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

Guarde el archivo con Comando + S

Configure el inicio de sesión Google con su código JavaScript/TypeScript

Importar SocialLogin y Capacitor

import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';

Llame 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 ID 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'
    }
  })
})
```
Requisitos de identificación del cliente:
- iOSClientId: Obligatorio - Debe terminar con googleusercontent.com (del paso 1 anterior)
- webClientId: Optional - Only needed if you also support web platform or need advanced features
- iOSServerClientId: Optional - Should be the same value as webClientId when provided
For advanced setup with webClientId and iOSServerClientId, see the web setup guide for creating these credentials.
:::precaución About offline mode: When using mode: 'offline', the login response will not contain user data directly. En su lugar, recibirá un código de autenticación del servidor que deberá intercambiar por información del usuario a través de su servidor backend. See the general setup guide for implementation details. :::

Implemente la función de inicio de sesión. Create a button and run the following code on click

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 fuera de línea:

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
console.log('Server auth code:', res.result.serverAuthCode)

Pruebe su aplicación
1. Cree su aplicación y ejecute cap sync
2. If you’ve done everything correctly, you should see the Google login flow working properly

Problemas conocidos

Incompatibilidad del complemento de pantalla de privacidad

The Google Login plugin is incompatible with @capacitor/privacy-screen. When using both plugins together, the Google login webview will be interrupted by the privacy screen.

Workaround: Call await PrivacyScreen.disable(); before calling the login function:

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

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