Cuándo iniciar sesión con Huawei o Google en ionic

preview

Como desarrollador una de las principales funciones para protagonizar el desarrollo de nuestra aplicación es cómo iniciar sesión para otorgar acceso a nuestra aplicación. Por eso, presentamos el kit de cuentas HUAWEI para permitir a los usuarios iniciar sesión en las aplicaciones de manera conveniente y rápida. Después de acceder al kit de cuenta, los usuarios no necesitan completar la información, verificar la dirección de correo electrónico o el número de teléfono móvil, ni establecer una contraseña.
Con un solo clic, los usuarios pueden iniciar sesión en su aplicación con el ID de Huawei en todos los escenarios de manera fácil y rápida, como teléfonos móviles, tabletas, pantallas grandes e información y entretenimiento en el vehículo. Eso ayuda a los desarrolladores a reducir la tasa de abandono de usuarios durante el registro y el inicio de sesión.
Account Kit es seguro y confiable para desarrolladores y usuarios, ya que proporciona contraseña y código de verificación, cumple con GDPR y las regulaciones locales, y cifra los datos en todo el proceso.
Hay más de 600 millones de usuarios que utilizan el ID de Huawei en todo el mundo. Y los usuarios activos mensuales superan los 260 millones. Además, Account Kit cubre más de 170 países y regiones, y admite más de 70 idiomas.
Cómo determinar cuándo iniciar sesión con el kit de cuenta HUAWEI o el inicio de sesión de Google juntos en una sola APLICACIÓN. Al desarrollar una APLICACIÓN, la APLICACIÓN debe decidir si usará HMS o GMS en función de la disponibilidad de los servicios HMS y GMS en el dispositivo. Entonces, aquí les mostraré cómo resolver esto para el marco iónico.
Complemento de verificación HMS + GMS
Para lograr esto, lo primero que debemos hacer es integrar este plugin en nuestro proyecto iónico, descargar el plugin de esta dirección y extraer el contenido a la carpeta raíz de nuestro proyecto.

https://drive.google.com/file/d/1EUXgbO2oL17Lk0Cqg-O5YgPqvr0IO4ut/view?usp=sharing

nota: no extraiga los complementos dentro de la carpeta node_modules, ya que con frecuencia no se sincroniza con los repositorios de la versión y se puede perder el acceso a los complementos.
El siguiente paso es integrar el plugin en nuestro proyecto, podemos hacerlo con el siguiente comando
complemento iónico cordova agregar CordovaHMSPlugin / CordovaHMSGMSCheckPlugin
El resultado de agregar el complemento debe reflejarse de la siguiente manera en el archivo package.json

Luego de integrar el plugin, debemos agregar la lógica de programación al componente donde queremos validar la disponibilidad de los servicios.
Vamos a crear dos funciones que se encargarán cada una de validar la existencia de los servicios HMS y GMS respectivamente

declare var cordova: any;
// Main Checker
async checkHMSGMS() {
await this.checkHMS();
await this.checkGMS();
}
promisify = (f) => (...a) => new Promise((res, rej) => f(...a, res, rej));
checkHMS() {
const isHmsAvailableFn = this.isHmsAvailableFN;
const isHmsAvailable = this.promisify(
this.isHmsAvailableFN.bind(isHmsAvailableFn)
);
isHmsAvailable().then(
(status: boolean) => {
this.hmsAvailable = status;
},
(error) => alert(error)
);
}
checkGMS() {
const isGmsAvailableFN = this.isGmsAvailableFN;
const isGmsAvailable = this.promisify(
this.isGmsAvailableFN.bind(isGmsAvailableFN)
);
isGmsAvailable().then(
(status: boolean) => {
this.gmsAvailable = status;
},
(error) => alert(error)
);
}
// Check HMS Available
isHmsAvailableFN(success, failure) {
cordova.plugins.CordovaHMSGMSCheckPlugin.isHmsAvailable(
"index.js",
(_res) => {
var hmsAvailable = _res === "true";
this.hmsAvailable = hmsAvailable;
success(hmsAvailable);
},
(_err) => {
failure(_err);
}
);
}
// Check GMS Available
isGmsAvailableFN(success, failure) {
cordova.plugins.CordovaHMSGMSCheckPlugin.isGmsAvailable(
"index.js",
(_res) => {
var gmsAvailable = _res === "true";
this.gmsAvailable = gmsAvailable;
success(gmsAvailable);
},
(_err) => {
failure(_err);
}
);
}

Ahora agregamos la validación en la vista para mostrar los botones de inicio de sesión en función del resultado de las funciones.

<button *ngIf="gmsAvailable" ion-button block class="btn-master-off" (click)="loginGoogle()">
<ion-icon class="space" name="logo-google"></ion-icon>
Login with Google
</button>
<button *ngIf="!gmsAvailable && hmsAvailable"  ion-button block class="btn-master-off" (click)="loginHuawei()">
<img class="huawei-logo" src="assets/imgs/huawei-logo-white.png" width="32" height="32">
Login with Huawei ID
</button>

Y aquí el resultado de cómo quedará nuestra APP

GMS instalado

HMS instalado

Cómo iniciar sesión con HUAWEI ID
Ahora que podemos diferenciar cuando tenemos los Servicios móviles de HUAWEI disponibles, vayamos a la segunda parte, que sería iniciar sesión en la aplicación con las credenciales de ID de HUAWEI.
Hay algunos preparativos que deben hacerse:
1) Obtenga la clave SHA. Para obtener la clave SHA, podemos consultar este artículo.
2) Cree una aplicación en la galería de aplicaciones de Huawei connect.
3) Habilite la configuración del kit de cuenta en la sección Administrar API.
4) Proporcione la clave SHA en la sección de información de la aplicación.
5) Proporcione un lugar de almacenamiento.
6) Después de completar todos los puntos anteriores, debemos descargar agconnect-services.json de la sección de información de la aplicación. Copie y pegue en la carpeta raíz de nuestro proyecto.

7) Descargue el complemento Cordova HMSAccount Plugin de esta dirección y extraiga el contenido a la carpeta raíz de nuestro proyecto

https://drive.google.com/file/d/1-ZD9XLPtG5czOnoVH1FGqT1DQz4JLyk-/view?usp=sharing

Luego de integrar el complemento, debemos agregar la lógica de programación al componente donde queremos implementar la función de inicio de sesión.

loginHuawei() {
console.log("SignInByIdToken");
try {
cordova.plugins.CordovaHMSAccountPlugin.signInWithIdToken(
"index.js",
(_res) => {
this.accountLog =
this.accountLog + this.appendP("Sign Successfully", "success");
this.accountLog = this.accountLog + this.appendP(_res, "normal");
this.updateLog();
},
(_err) => {
this.accountLog = this.accountLog + this.appendP(_err, "error");
this.updateLog();
}
);
} catch (_e) {
alert(JSON.stringify(_e, null, 4));
}
}
appendP(text: String, pClass: String) {
return "<p class='" + pClass + "'>" + text + "</p>";
}
updateLog() {
alert(this.accountLog);
}

Modo de token de identificación
El token de identificación es la información de identidad de los usuarios que iniciaron sesión. Incluyendo la información de la firma utilizada para verificar la información de identidad. Por lo tanto, el modo del token de identificación es el modo de la información de autenticación de identidad del usuario. Este modo es aplicable tanto a la aplicación de una sola máquina como a la aplicación con su propio servidor.
Después de una autenticación exitosa, los ID de HUAWEI deben otorgar un permiso de acceso inicial. Además.

Finalmente, después de autorizar el uso de credenciales, recuperaré los siguientes parámetros:
· Nombre
· Correo electrónico
· AvatarUri
Siguiendo estos pasos, puede lograr fácilmente esta importante función para cualquier aplicación.