Google Login en iOS

Introducción

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

Usando el inicio de sesión de Google en iOS

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

1. Crear un ID de cliente de iOS en la consola de Google

   1. Haga clic en la barra de búsqueda

      

   2. Buscar y hacer clic en credentials y hacer clic en el APIs and Services número 2 en la captura de pantalla

      

   3. Haga clic en el create credentials

      

   4. Seleccione OAuth client ID

      

   5. Seleccione el Application type Para iOS

      

   6. Selección de tipo de aplicación con opción de iOS destacada

      1. Encuentre el ID de la aplicación

      2. Abra Xcode App

         

      3. Asegúrate de estar 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 Vuelve a la consola de Google y pega tu

   8. en el campo de ID de cliente si has publicado tu aplicación en App Store create

      

   9. Haga clic OK

      

   10. Abra el cliente iOS recién creado

       

   11. Copie los siguientes datos

       

       Nota

       La nr. 1 en esta imagen se convertirá más tarde en el iOSClientId en el initialize llamada.

       El nr. 2 en esta imagen se convertirá más tarde en YOUR_DOT_REVERSED_IOS_CLIENT_ID

2. 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. 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 por el valor copiado en el paso anterior

      

      Cuidado

      Asegúrese de que este valor INICIE con com.googleusercontent.apps

   6. Guarda el archivo con Command + S

3. Modifica el AppDelegate.swift

   1. Abre el AppDelegate

      

   2. Inserta import GoogleSignIn en la parte superior del archivo

      

   3. Encuentra la func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) función

      

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

      

   5. Guardar el archivo con Command + S

4. Configurar el 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 para el 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 iOSServerClientId, vea el guía de configuración web para crear estos credenciales.

      Advertencia

      Sobre el modo sin conexión: Al utilizar 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 intercambiar por información de usuario a través de su servidor de backend. SocialLogin.refresh({ provider: 'google' }) no está disponible en este modo; el refresco debe ocurrir en su servidor de backend después de intercambiar serverAuthCodeVea 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 ejecuta 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)

5. 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

      

Nota

El idioma en la solicitud de Google depende de los ajustes de idioma de su dispositivo

Problemas Conocidos

Incompatibilidad del plugin de pantalla de privacidad

El plugin de inicio de sesión de Google es incompatible con @capacitor/pantalla-de-privacidadCuando se utilizan ambos plugins juntos, la vista de inicio de sesión de Google se interrumpirá por la pantalla de privacidad.

Trabajo alrededor: Llama 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: {}
});

Sigue adelante desde Google Login en iOS

Si estás utilizando Google Login en iOS para planificar la autenticación y los flujos de cuenta, conecta con Usando @capgo/capacitor-social-login para la capacidad nativa en Usando @capgo/capacitor-social-login @capgo/capacitor-social-login para el detalle 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 Autenticación en dos factores para el detalle de implementación en Autenticación en dos factores.