por Fabián Serna, el 17 de febrero de 2020
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:
- Crear un proyecto en Firebase
- Instalar angularfire2 en nuestro proyecto Ionic
- 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:
Luego nos pedirá un nombre para el proyecto, ingresamos el nombre que deseamos, en este caso será LoginGaF.
Ahora Google nos preguntará si queremos utilizar Google Analytics, en este caso no lo utilizaremos pero igual le damos en continuar.
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.
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:
Ahora damos en el botón marcado en rojo en la siguiente imagen:
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.
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:
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:
- Habilitar la autenticación de Google en Firebase
- Implementar la autenticación en Ionic
- 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.
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.
Y finalmente podemos ver la autenticación de Google en Firebase habilitada como se muestra en la siguiente imagen.
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.
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:
Ahora seleccionamos el icono de Android.
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.
Si estás utilizando capacitor, asegúrate de editar también el nombre del paquete o dominio en el archivo capacitor.config.json
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:
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.
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.
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.
