Inicio>Recursos para la creación de sitios web>Datos del sitio web
Descargar

Advertencia

Este complemento ahora se encuentra en modo de bajo mantenimiento, para una nueva función como Credential Manager o Privacy Manifest, use: https://github.com/cap-go/capacitor-social-login

CondensorGoogleauth

@codetrix-studio/capacitor-google-auth

Condensador 6

Complemento de condensadores para Google Auth.


Rompiendo el cambio en V6

En la versión V6, clientId en el método Initialize se usa en prioridad sobre otros lugares que puede configurar. Si antes de usar esto solo en la web, deséselo en el móvil. O establecerlo condicionalmente para replicar el comportamiento antiguo.

Contribuciones

Los PR son bienvenidos y muy apreciados que mantienen este complemento actualizado con el condensador y la paridad oficial de funciones de la biblioteca de la plataforma de autores de Google.

Intenta seguir las buenas prácticas de código. Incluso puede ayudar a mantener la demostración incluida actualizada.

Se desaconsejan PRS para características que no están alineadas con la biblioteca oficial de Google Auth.

(Somos amigables para principiantes aquí)

Instalar

1. Instalar paquete 

npm i --save @codetrix-studio/capacitor-google-auth

# pnpm 
pnpm add @codetrix-studio/capacitor-google-auth

# yarn 
yarn add @codetrix-studio/capacitor-google-auth

2. Actualizar Deps del condensador 

npx cap update

Actualización

Si es necesario migrar a diferentes versiones de condensadores, consulte instrucciones para migrar el complemento a una nueva versión.

Uso

WEB

Registre el complemento e inicialice manualmente 

 import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth' ;

// use hook after platform dom ready
GoogleAuth . initialize ( {
  clientId : 'CLIENT_ID.apps.googleusercontent.com' ,
  scopes : [ 'profile' , 'email' ] ,
  grantOfflineAccess : true ,
} ) ;

o si es necesario usar metaets (opcional): 

 < meta name =" google-signin-client_id " content =" {your client id here} " />
< meta name =" google-signin-scope " content =" profile email " />

Opción

  • clientId : la ID de cliente de la aplicación, encontrada y creada en la consola de desarrolladores de Google.
  • scopes : igual que Configurar Scopes
  • grantOfflineAccess : booleano, predeterminado false , establecido si su aplicación necesita actualizar los tokens de acceso cuando el usuario no está presente en el navegador.

Usarlo 

 GoogleAuth . signIn ( ) ;

Angular

gancho init 

 // app.component.ts
constructor ( ) {
  this . initializeApp ( ) ;
}

initializeApp ( ) {
  this . platform . ready ( ) . then ( ( ) => {
    GoogleAuth . initialize ( )
  } )
}

Iniciar funciones 

 import { GoogleAuth } from "@codetrix-studio/capacitor-google-auth" ;
import { Auth , GoogleAuthProvider , signInWithCredential } from '@angular/fire/auth' ;

async googleSignIn ( ) {
  let googleUser = await GoogleAuth . signIn ( ) ;

  /*
    If you use Firebase you can forward and use the logged in Google user like this:
  */
  constructor ( private auth : Auth ) { }

  const googleUser = await GoogleAuth . signIn ( ) ;
  const _credential = GoogleAuthProvider . credential ( googleUser . authentication . idToken ) ;
  return signInWithCredential ( this . auth , _credential ) ;
}

Vue 3 

< script setup lang="ts">
import { defineComponent , onMounted } from ' vue ' ;
import { GoogleAuth } from ' @codetrix-studio/capacitor-google-auth ' ;

onMounted (() => {
  GoogleAuth . initialize ();
});

async function logIn() {
  const response = await GoogleAuth . signIn ();
  console . log ( response );
}
</ script >

o ver más capacitorgoogleauth-vue3-examen

iOS

  1. Crear en Google Cloud Console Credential ID de cliente para iOS y obtener un esquema de ID de cliente e URL de iOS

  2. Agregar identificador REVERSED_CLIENT_ID como esquemas de URL a Info.plist desde el esquema de URL de iOS
    (Xcode: aplicación - Targets/App - Info - Tipos de URL, haga clic en el icono más)

  3. Establezca la identificación del cliente una de las formas (por orden de importancia en el complemento):

    1. Establecer clientId en el método de inicializar
    2. Establecer iosClientId en capacitor.config.json
    3. Establecer clientId en capacitor.config.json
    4. Establecer CLIENT_ID en GoogleService-Info.plist

Androide

Establezca la identificación del cliente (por orden de importancia en el complemento):

  1. Establecer clientId en el método de inicializar
  2. Establezca androidClientId en capacitor.config.json
  3. Establecer clientId en capacitor.config.json
  4. Establecer server_client_id en strings.xml 
< resources >
  < string name = " server_client_id " >Your Web Client Key</ string >
</ resources >

Cambiar la versión de autenticación de servicios de juego (opcional):

Este complemento utiliza com.google.android.gms:play-services-auth:21.2.0 Por defecto, puede anularlo proporcionando gmsPlayServicesAuthVersion en variables.gradle

Método de actualización

Se debe llamar a este método cuando la aplicación se inicializa para establecer si el usuario está iniciado actualmente. Si es verdadero, el método devolverá un AccessToken, IdToken y un refrescado vacío. 

 checkLoggedIn ( ) {
    GoogleAuth . refresh ( )
        . then ( ( data ) => {
            if ( data . accessToken ) {
                this . currentTokens = data ;
            }
        } )
        . catch ( ( error ) => {
            if ( error . type === 'userLoggedOut' ) {
                this . signin ( )
            }
        } ) ;
}

Configurar

Nombre Tipo Descripción
cliente cadena La identificación del cliente de la aplicación, encontrada y creada en la consola de desarrolladores de Google.
iosclientid cadena Clave de identificación de cliente específica para iOS
AndroidClientid cadena Clave de ID de cliente específica para Android
escopas cadena[] Ámbitos que es posible que deba solicitar para acceder a Google API
https://developers.google.com/identity/protocols/oauth2/scopes
servidorClientid cadena Este cliente utilizado para el acceso fuera de línea y el manejo del lado del servidor
FORCODEFORREFRESHTOKE booleano Obligar al usuario a seleccionar la dirección de correo electrónico para regenerar AuthCode
Solía ​​obtener un RefreshToken válido (trabajar en iOS y Android)

Proporcionar configuración en Root capacitor.config.json 

{
  "plugins" : {
    "GoogleAuth" : {
      "scopes" : [ " profile " , " email " ],
      "serverClientId" : " xxxxxx-xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com " ,
      "forceCodeForRefreshToken" : true
    }
  }
}

o en capacitor.config.ts 

 /// <reference types="'@codetrix-studio/capacitor-google-auth'" />

const config : CapacitorConfig = {
  plugins : {
    GoogleAuth : {
      scopes : [ 'profile' , 'email' ] ,
      serverClientId : 'xxxxxx-xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com' ,
      forceCodeForRefreshToken : true ,
    } ,
  } ,
} ;

export default config ;

Nota: Los ámbitos se pueden configurar en la función initialize .

API

  • initialize(...)
  • signIn()
  • refresh()
  • signOut()
  • Interfaces

inicializar(...) 

 initialize ( options ?: InitOptions ) = > void

Inicializa el GoogleAuthPlugin, cargando la biblioteca GAPI y configurando el complemento.

Parámetro Tipo Descripción
options InitOptions - Opciones de inicialización opcional.

Desde: 3.1.0

iniciar sesión() 

 signIn ( ) = > Promise < User >

Inicia el proceso de inicio de sesión y devuelve una promesa que se resuelve con la información del usuario.

Devuelve: Promise<User>

refrescar() 

 refresh ( ) = > Promise < Authentication >

Actualiza el token de autenticación y devuelve una promesa que se resuelve con los detalles de autenticación actualizados.

Devoluciones: Promise<Authentication>

desconectar() 

 signOut ( ) = > Promise < any >

Firma al usuario y devuelve una promesa.

Devoluciones: Promise<any>

Interfaces

Inicio

Apuntalar Tipo Descripción Por defecto Desde
clientId string La identificación del cliente de la aplicación, encontrada y creada en la consola de desarrolladores de Google. Común para Android o iOS. El valor predeterminado se define en la configuración. 3.1.0
scopes string[] Especifica los ámbitos necesarios para acceder a las API de Google El valor predeterminado se define en la configuración. 3.4.0-rc.4
grantOfflineAccess boolean Establezca si su aplicación necesita actualizar los tokens de acceso cuando el usuario no está presente en el navegador. En respuesta, use la tecla serverAuthCode false 3.1.0

Usuario

Apuntalar Tipo Descripción
id string El identificador único para el usuario.
email string La dirección de correo electrónico asociada con el usuario.
name string El nombre completo del usuario.
familyName string El apellido (apellido) del usuario.
givenName string El nombre de pila (primer nombre) del usuario.
imageUrl string La URL de la foto de perfil del usuario.
serverAuthCode string El código de autenticación del servidor.
authentication Authentication Los detalles de la autenticación, incluidos los tokens de acceso, actualización y identificación.

Autenticación

Apuntalar Tipo Descripción
accessToken string El token de acceso obtenido durante la autenticación.
idToken string El token de identificación obtenido durante la autenticación.
refreshToken string El token de actualización.

Guía de migración

Migrar de 3.3.x a 3.4.x

Instalar versión 3.4.x: 

npm i --save @codetrix-studio/capacitor-google-auth@^3.4

Siga las instrucciones para su actualización del proyecto al condensador 6.

Migrar de 3.2.x a 3.3.x

Instalar la versión 3.3.x: 

npm i --save @codetrix-studio/capacitor-google-auth^3.3

Siga las instrucciones para su actualización del proyecto del condensador 4 al condensador 5.

Migra de 3.2.1 a 3.2.2

para Android en el archivo MainActivity.onCreate 

 - this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
-   add(GoogleAuth.class);
- }});
+ this.registerPlugin(GoogleAuth.class);

Migrar de 3.1.x a 3.2.x

Instalar versión 3.2.x: 

npm i --save @codetrix-studio/capacitor-google-auth^3.2

Siga las instrucciones para su actualización del proyecto del condensador 3 al condensador 4.

Migra de 3.0.2 a 3.1.0 

 - GoogleAuth.init()
+ GoogleAuth.initialize()

Migrar de 2 a 3

Instalar versión 3.xx: 

npm i --save @codetrix-studio/capacitor-google-auth^3.0

Después de migrar a Capcitor 3 actualizando sus proyectos, consulte Diff:

WEB 
 - import "@codetrix-studio/capacitor-google-auth";
- import { Plugins } from '@capacitor/core';
+ import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth'

- Plugins.GoogleAuth.signIn();
+ GoogleAuth.init()
+ GoogleAuth.signIn()

Migra de 1 a 2

Instalar la versión 2.xx: 

npm i --save @codetrix-studio/capacitor-google-auth@2

Para el condensador 2.xx use instrucción

Licencia

MIT

Expandir
Información adicional
Aplicaciones relacionadas
Recomendado para ti
Información relacionada Todo