header_lecciones_v5

Cómo implementar un login de Google con Ionic

por Fabián Serna, el 17 de febrero de 2020

 Cómo implementar un login de Google con Ionic

Implementar un login con Google o Facebook en Ionic puede ser un dolor de cabeza para muchos desarrolladores de app móviles híbridas, pero con esta guía dejará de ser una molestia. En esta primera entrega explicaré como hacerlo en Google, espero que les sea de mucha utilidad y recuerden que esta guía está enfocada en proyectos Ioni con Angular. Si quieres saber cómo hacerlo para Facebook puedes consultar la segunda parte. 

Funcionando desde el 30/01/2020

Configuración previa

Para desarrollar el login con Google y Facebook, debemos primero conectar nuestro proyecto Ionic a Firebase, para esto debemos:

  1. Crear un proyecto en Firebase
  2. Instalar angularfire2 en nuestro proyecto Ionic
  3. Configurar nuestro proyecto Ionic

1. Crear un proyecto en Firebase

Antes de empezar a desarrollar el login debemos crear una cuenta en Firebase. Esto no tiene ningún costo para lo que necesitamos. Luego de que tengamos una cuenta en Firebase debemos crear un proyecto desde la consola en la opción: añadir proyecto, como se puede ver en la siguiente imagen:

Cómo implementar un login de Google con Ionic 1

Luego nos pedirá un nombre para el proyecto, ingresamos el nombre que deseamos, en este caso será LoginGaF.

Cómo implementar un login de Google con Ionic 2

Ahora Google nos preguntará si queremos utilizar Google Analytics, en este caso no lo utilizaremos pero igual le damos en continuar.

Cómo implementar un login de Google con Ionic 3

Luego seleccionamos una ubicación, aceptamos los términos y condiciones y damos clic en crear proyecto. Finalmente tendremos nuestro proyecto creado en Firebase.

2. Instalar angularfire2 en nuestro proyecto Ionic

Ten en cuenta que esta guía consiste en explicar cómo implementar un login con Google y Facebook utilizando un proyecto Ionic ya existente. Así que utilizaremos el proyecto que se encuentra en el commit 3 Diseño del ejemplo del repositorio: LoginGoogleAndFacebook.

Cómo implementar un login de Google con Ionic 4

Para instalar angularfire2 solo necesitamos ejecutar el siguiente comando por terminal, desde el proyecto:

\ProyectoIonic> npm install @angular/fire firebase --save

3. Configurar nuestro proyecto Ionic

Para configurar nuestro proyecto Ionic primero debemos obtener los datos de configuración de nuestro proyecto Firebase desde la consola de Firebase, para esto le damos click al icono (marcado en rojo) para luego ingresar a la configuración del proyecto (marcado en azul), como podemos ver en la siguiente imagen:

Cómo implementar un login de Google con Ionic 5

Ahora damos en el botón marcado en rojo en la siguiente imagen:

Cómo implementar un login de Google con Ionic 6

Google nos pedirá un apodo para la aplicación, puedes poner el que desees, en este caso pondré de nuevo LoginGaF y le damos en Registrar aplicación.

Cómo implementar un login de Google con Ionic 7

Y obtendremos los datos necesarios para configurar nuestro proyecto Ionic, copiamos toda la variable firebaseConfig marcado en un cuadro negro, como podemos ver en la siguiente imagen:

Cómo implementar un login de Google con Ionic 8

Ahora que tenemos los datos de firebaseConfig, abrimos el archivo /src/enviroments/enviroments.ts de nuestro proyecto ionic y exportamos una nueva constante firebaseConfig. 

export const environment = { production: false }; export const firebaseConfig = { apiKey: "", authDomain: "", databaseURL: "", projectId: "", storageBucket: "", messagingSenderId: "", appId: "", measurementId: ""

Y para terminar la configuración de nuestro proyecto debemos importar la variable enviroment, que es la que editamos anteriormente, y añadir también el módulo AngularFireModule para conectar nuestro proyecto a Firebase y AngularFireAuthModule para utilizar el servicio de autenticación de Firebase en el archivo /src/app/app.module.ts

import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; ... // Firebase import { firebaseConfig } from '../environments/environment'; import { AngularFireModule } from '@angular/fire'; import { AngularFireAuthModule } from '@angular/fire/auth'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, IonicModule.forRoot(), AppRoutingModule, AngularFireModule.initializeApp(firebaseConfig), //Modulo 1 a importa AngularFireAuthModule // Modulo 2 a importar ], bootstrap: [AppComponent] }) export class AppModule {}

 

Login con Google

Para implementar el login de Google en nuestro proyecto Ionic debemos:

  1. Habilitar la autenticación de Google en Firebase
  2. Implementar la autenticación en Ionic
  3. Implementar el plugin GooglePlus

1. Habilitar autenticación de Google en Firebase

Para habilitar la autenticación solo debemos entrar a la consola de Firebase, ingresar en la parte de Authentication y luego en Método de inicio de sesión.

Login de Google con Ionic 9

Ahora podemos ver una tabla de proveedores de inicio de sesión, damos click en Google y se nos desplegará un cuadro de configuración para el inicio de sesión, dentro del cuadro damos click en Habilitar, y en Nombre público del proyecto ingresamos el nombre de nuestra app (con este nombre es que Firebase pedirá permisos al usuario cuando intente loguearse con Google), en el campo de Correo electrónico de ... proporcionamos nuestro mail y por último damos Guardar, como podemos ver en la siguiente imagen.

Login de Google con Ionic 10

Y finalmente podemos ver la autenticación de Google en Firebase habilitada como se muestra en la siguiente imagen.

Login de Google con Ionic 11

2. Implementar la autenticación en Ionic

Recuerda que en esta guía nos apoyamos en un diseño previamente desarrollado para facilitar la implementación del login, dicho diseño consiste en dos botones como podemos ver en Vista del diseño, uno para iniciar sesión con Google que ejecuta el método LoginGoogle(), y el otro para iniciar sesión con Facebook que ejecuta el método LoginFacebook().

Estos métodos por ahora simplemente ejecutan un console.log, pero ahora vamos a importar el servicio de autenticación de Firebase para implementar el login de Google.

Para implementar el login de Google debemos inyectar el servicio de autenticación AngularFireAuth como se mencionó anteriormente e importar la librería de Firebase, de la siguiente manera:

import { Component } from '@angular/core'; import { AngularFireAuth } from '@angular/fire/auth'; import * as firebase from 'firebase/app'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { picture; name; email; constructor( private afAuth: AngularFireAuth ) {} loginGoogle() { console.log('Login con google') ; } loginFacebook() { console.log('Login con Facebook'); } }

Ahora convertimos nuestro método loginGoogle() en uno async y editamos el método de la siguiente forma:

async loginGoogle() { const res = await this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()); const user = res.user; console.log(user); this.picture = user.photoURL; this.name = user.displayName; this.email = user.email; }

Ahora corremos nuestro proyecto Ionic e intentemos iniciar sesión con Google, se nos pedirá la cuenta con la que queremos iniciar sesión y luego nos imprimirá por consola todo los datos obtenidos del usuario además de los datos que pintamos en la app, como podemos ver en la siguiente imagen.

Login de Google con Ionic 12

3. Implementar el plugin GooglePlus

Hasta este punto de la guía ya tenemos un login con Google pero este login aún no funciona en ambientes móviles, para esto necesitamos usar el plugin GooglePlus de Ionic, entonces comencemos con la instalación del plugin en nuestro proyecto.

\ProyectoIonic> ionic cordova plugin add cordova-plugin-googleplus

\ProyectoIonic> npm install @ionic-native/google-plus

Antes de empezar a utilizar este plugin en nuestro proyecto Ionic, necesitamos configurar nuestro proyecto firebase para iOS y Android, para esto debemos entrar a la consola de Firebase en nuestro proyecto, le damos en Añadir aplicación, como se puede observar en la siguiente imagen:

Login de Google con Ionic 13

Ahora seleccionamos el icono de Android.

Login de Google con Ionic 14

Luego nos piden el nombre del paquete de Android o dominio, esto lo podemos encontrar en el archivo config.xml este nombre lo podemos cambiar, yo lo tengo como io.ionic.starter y lo cambiaré a com.pragma.logingaf de igual forma pondré en el name el nombre de mi aplicación para que quede de la siguiente manera.

Es importante no poner mayúsculas en el nombre del paquete.

Login de Google con Ionic 15

Si estás utilizando capacitor, asegúrate de editar también el nombre del paquete o dominio en el archivo capacitor.config.json

Login de Google con Ionic 16

Ya que conocemos el nombre del paquete de nuestra aplicación volvemos a Firebase e ingresamos el nombre en nombre del paquete de Android en este caso sería com.pragma.logingaf, en Apodo de la aplicación es recomendable poner el nombre de nuestra app para este caso sería LoginGaF y en el Certificado de firma de depuración SHA-1 aunque Firebase lo pida como opcional, para el login en Ionic es muy importante, así que ejecutamos el siguiente comando dependiendo del S.O. de nuestra máquina.

Mac/Linux:

$ keytool -list -v -alias androiddebugkey -keystore

~/.android/debug.keystore

Windows:

> keytool -list -v -alias androiddebugkey -keystore

C:\Users\SUUSUARIO\.android\debug.keystore

Nota: La variable keytool para Windows la podemos usar instalando la versión reciente de JDK.

Al ejecutar el comando anterior nos pedirá una contraseña, ingresamos Android y obtendremos el SHA-1, la cual tenemos que ingresar en Firebase, lo cual al llenar todos los campos quedaría algo parecido a la siguiente manera:

Login de Google con Ionic 17

Le damos en Registrar aplicación y descargamos el archivo .JSON que nos proporciona Firebase, es muy importante que conservemos ese archivo porque es necesario para cuando tengamos nuestro proyecto Android y lo ejecutemos, además de que tiene un dato importante que necesitaremos para utilizar el plugin GooglePlus.

Login de Google con Ionic 18

Luego le damos siguiente a todo, hasta que nos diga que está comprobando la aplicación, saltamos ese paso, como se puede ver en la siguiente imagen.

Login de Google con Ionic 19

Y listo, ya tenemos nuestra aplicación Android registrado en Firebase, para iOS lo explicaré en otra ocasión.

Ahora que tenemos nuestra aplicación Android registrada en Firebase e instalado el plugin GooglePlus, podemos implementar el login de Google en ambientes Android, para esto necesitamos inyectar GooglePlus en nuestro proyecto y también necesitamos inyectar platform para poder diferenciar si el proyecto está siendo ejecutado en un ambiente móvil o en un ambiente web, todo esto de la siguiente manera.

Abrimos el archivo /src/app/app.module.ts e importamos GooglePlus

import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; ... // Plugins import { GooglePlus } from '@ionic-native/google-plus/ngx'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, IonicModule.forRoot(), AppRoutingModule, AngularFireModule.initializeApp(firebaseConfig), //Modulo 1 a importa AngularFireAuthModule // Modulo 2 a importar ], providers: [ ..., GooglePlus ], bootstrap: [AppComponent] }) export class AppModule {}

Luego abrimos el archivo /src/app/home/home.page.ts e inyectamos los plugins antes mencionados y lo utilizamos de la siguiente manera, ten en cuenta que el método loginGoogle() lo dividimos en otros dos métodos loginGoogleAndroid() y loginGoogleWeb.

import { Component } from '@angular/core'; import { AngularFireAuth } from '@angular/fire/auth'; import * as firebase from 'firebase/app'; import { Platform } from '@ionic/angular'; import { GooglePlus } from '@ionic-native/google-plus/ngx'; @Component({ selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], }) export class HomePage { ... constructor( private afAuth: AngularFireAuth, private platform: Platform, private googlePlus: GooglePlus ) {} loginGoogle() { if (this.platform.is('android')) { this.loginGoogleAndroid(); } else { this.loginGoogleWeb(); } } async loginGoogleAndroid() { const res = await this.googlePlus.login({ 'webClientId': , 'offline': true }); const resConfirmed = await this.afAuth.auth.signInWithCredential(firebase.auth.GoogleAuthProvider.credential(res.idToken)); const user = resConfirmed.user; this.picture = user.photoURL; this.name = user.displayName; this.email = user.email; } async loginGoogleWeb() { const res = await this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()); const user = res.user; console.log(user); this.picture = user.photoURL; this.name = user.displayName; this.email = user.email; } ... }

En el código anterior tenemos que reemplazar <Tu client_id>  por nuestro client_id que podemos encontrar en el archivo google-services.json que descargamos previamente en Firebase registrando nuestra aplicación Android, dicho archivo tiene varios client_id, el que nosotros debemos utilizar es el que está dentro de del atributo services, y el que tiene el client_type en 3.

{ ... , "client": [ ... , "services": { "appinvite_service": { "other_platform_oauth_client": [ { "client_id": "945473312650-fgpee13gk4vpbrqcnenbm4s5g78jtqk3.apps.googleusercontent.com", "client_type": 3 } ] } } } ], "configuration_version": "1" }

Si el código anterior fuera nuestro JSON del archivo google-services.json, nuestro client_id seria "945473312650-fgpee13gk4vpbrqcnenbm4s5g78jtqk3.apps.googleusercontent.com"

Y finalmente para terminar con la implementación de nuestro login de Google debemos construir el proyecto de Android y copiar nuestro archivo google-services.json en la carpeta /android y en la carpeta /android/app, y listo tenemos nuestro login de Google funcionando en ambientes Android y web.

En una próxima entrega explicaré cómo realizar el login con Facebook.

Descarga la guia para trabajar con ambientes IBM Websphere portal

 

Temas:Desarrollo de Software

Lecciones Pragma

Lecciones en Academia Pragma

Aquí encontrarás tutoriales técnicos para que apliques en temas de desarrollo de software, cloud, calidad en software y aplicaciones móviles. 

También puedes visitar nuestro Blog con contenido actual sobre Transformación Digital, Marketing, Conocimiento de Usuario y más. 

Blog

Suscríbete a la academia

Descarga la Guía para trabajar con ambientes IBM Websphere Portal