Inicio de sesión de Google en iOS

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 guía de configuración general general setup guide.

Usando 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 por credentials y haga clic en el APIs and Services uno (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. Encuentre el ID de la caja

      1. Abra Xcode

      2. Haga doble clic en App

         

      3. Asegúrese de que esté en Targets -> App

         

      4. Encuentre su 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 campo de cliente ID si has publicado tu aplicación en la Tienda de Mac

   8. Después de rellenar todos los detalles, haz clic en create

      

   9. Haz clic en OK

      

   10. Abre el cliente iOS recién creado

       

   11. Copie los siguientes datos

       

       Nota

       El 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. 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 a el valor copiado en el paso anterior

      

      Advertencia

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

   6. Guardar el archivo con Command + S

3. Modificar el AppDelegate.swift

   1. Abrir el AppDelegate

      

   2. Insertar import GoogleSignIn en la parte superior del archivo

      

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

      

   4. Modifique la función para que tenga este aspecto

      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 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 initialize (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 un setup avanzado con webClientId y, consulte la iOSServerClientIdguía de configuración web para crear estas credenciales. y

      Cuidado

      Sobre el modo de trabajo sin conexión: Al utilizar mode: 'offline', la respuesta de inicio de sesión no contendrá datos de usuario directamente. En su lugar, recibirá un autenticación de servidor 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 serverAuthCodeConsulte el guía de configuración general para detalles de implementación.

   3. Implement the login function. Create a button and run the following code on click

      comando __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)

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

      

Nota

El idioma en la solicitud de Google depende de los ajustes de idioma de tu dispositivo.

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