Hoy voy a explicar como facilitar que los usuarios de una app PhoneGap, desarrollada utilizando Ionic framework, puedan registrarse en la app con el login de Google+.
Voy a realizar el tutorial para probarlo en plataforma Android, pero explicaré los pasos que habría que seguir también en iOS, aunque no lo probaré en un iOS real.
Si quieres trastear con el código, al final del artículo encontrarás el enlace al repositorio de github donde está alojado.
Registro de la app en el ecosistema Google
Lo primero que haré, es registrar la app en el ecosistema de Google+, ya que es requisito indispensable para utilizar la API de login de Google+.
Sigue el tutorial Registrar app en Google+ para autentificar usuarios paso a paso, y vuelve a aquí cuando lo hayas completado.
Desarrollo de la app
Doy por sentado que se tiene instalado ionic y un mínimo de conocimiento de como funciona. En caso contrario, te recomiendo leer por encima esto
Creación de la app
Me voy directo al terminal, y creo el proyecto googleLoginDemo a partir de un proyecto vacío:
$: ionic start googleLoginDemo blank
Una vez creado, entro en el proyecto:
$: cd googleLoginDemo
Añadiendo plataformas
Para añadir la plataforma Android, ejecuto en terminal:
googleLoginDemo$:ionic platform android
googleLoginDemo$:ionic build android
De forma equivalente, para iOS, tendría que ejecutar:
googleLoginDemo$:ionic platform ios
googleLoginDemo$:ionic build ios
Abrir el proyecto en Eclipse
Importo el proyecto a Eclipse con:
File > New > Project… > Android Project from Existing Code
Selecciono el directorio googleLoginDemo con mi proyecto.
DETALLE: Para que el proyecto se actualice con los cambios y pueda ejecutarlo correctamente desde Eclipse, antes de ejecutarlo tengo que ejecutar por consola: cordova prepare android, y posteriormente hacer un refresh en Eclipse.
Añadir el Package name
Anteriormente he registrado una app en Google, para autentificarme a través de Google+, y he definido un indentificador de aplicación tipo: com.enriqueoriol.googleLoginDemo.android
Ahora tengo que definir este mismo identificador en la app, y esto lo hago en la sección id del archivo en la raíz de mi directorio config.xml.
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.enriqueoriol.googleLoginDemo.android" ...DETALLE: Al reemplazarlo en el config.xml, ionic actualizará automáticamente el archivo AndroidManifest.xml cada vez que lo ejecutemos. Si lo reemplazas directamente en el manifest, tu nombre se sobreescribirá y no podrás ejecutar la app.
Estructura de la app
Lo que voy a crear es una app con 2 vistas, gestionadas por una barra de navegación.
- La primera vista, se cargará por defecto, y tendrá un botón de login de Google+
- Una vez logueados nos dará paso a la segunda vista, con información del usuario, y que tendrá un botón para hacer logout
Aunque se trata de un proyecto sencillo, me gusta tener bien ordenado el código, por lo que crearé una carpeta para cada una de estas vistas, donde irá su template y su javascript.
De momento, resumo que la estructura será:
www/
index.html
app/
app.js
login/
login.html
login.js
userInfo/
userInfo.html
userInfo.js
css/
style.css
img/
lib/
…
app.js
El proyecto blank en el que está basado mi proyecto, ya ha generado un archivo js/app.js con la inicialización más básica. Como ves de la estructura anterior, yo lo muevo a la carpeta app que he creado, y le añado configuración de estados para definir un estado asociado a cada vista.
Queda así:
// Google Login Demo App
angular.module('googleLoginDemo', ['ionic', 'login', 'userInfo'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/')
$stateProvider
.state('login', {
url: '/',
controller: 'LoginCtrl',
templateUrl: 'app/login/login.html'
})
.state('userInfo', {
url: '/userInfo',
controller: 'UserInfoCtrl',
templateUrl: 'app/userInfo/userInfo.html'
});
})
A destacar:
- Incluyo los módulos login y userInfo. Los definiré en breve, y son los que tendrán la funcionalidad de cada una de las vistas respectivamente.
- Creo los estados login y userInfo. Los estados permiten identificar una vista y vincularla a una url, definir el controlador que se va a usar, etc.
Más adelante veré como dirigirnos a una vista con $state.go(‘nombreEstado’);
Index.html
El proyecto blank tamibén ha generado un archivo index.html con lo básico (librerías y css requeridos). Yo voy a cambiarle el body, y reemplazarlo por un simple ion-nav-view, que es un espacio que se reemplaza por las ion-view que contendrán mis vistas. Además, también añado una barra de navegación ion-nav-bar, y un botón atrás ion-nav-back-button, para poder volver de la segunda vista a la primera.
Queda así:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>google Login Demo Project</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="app/app.js"></script>
<script src="app/login/login.js"></script>
<script src="app/userInfo/userInfo.js"></script>
</head>
<body ng-app="googleLoginDemo">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-clear">
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>Importante: Es imprescindible que incluya, como hago arriba, los scripts JS login.js y userInfo.js donde quiero definir el comportamiento de cada vista.
Vista de login
Template
Creo un template muy sencillo, en app/login/login.js:
<ion-view title="Login">
<ion-content>
<h3 class="padding">Let's try Google + Login!</h3>
<br/>
<button class="button button-assertive button-block padding" ng-click="login()">
Google+ login!
</button>
<br/>
</ion-content>
</ion-view>Se trata de un simple botón, que llama a la función login() al hacer click.
Módulo y controlador
Implemento la lógica (de momento vacía) en app/login/login.js:
angular.module('login', [])
.controller('LoginCtrl', function($scope, $state) {
var initView = function(){
//Do any expected initialization
}
$scope.$on('$ionicView.beforeEnter', function(){
initView();
});
$scope.login = function(){
//TODO: perform login operation
$state.go('userInfo');
}
})
Básicamente creo una función login en el scope, que de momento lo que hace es enviarme a la otra vista.
¿Qué aspecto tiene esto? Sencillo, pero suficiente para lo que queremos.
Ahí lo ves:
Vista de información
Template
Creo un template muy sencillo, en app/userInfo/userInfo.js:
<ion-view title="User Info">
<ion-content>
<br/>
<div class="padding">
<span style="font-width:strong; font-size:large"> You're logged as:</span> {{userName}}
</div>
<button class="button button-assertive button-block padding" ng-click="logout()">Log out!</button>
<br/>
</ion-content>
</ion-view>En este caso, en la primera linea muestro el nombre de usuario, y en la siguiente muestro un botón para hacer logout.
Módulo y controlador
Implemento la lógica (de momento vacía) en app/userInfo/userInfo.js:
angular.module('userInfo', [])
.controller('UserInfoCtrl', function($scope, $state) {
$scope.userName = "Demo user";
var initView = function(){
//Do any expected initialization
}
$scope.$on('$ionicView.beforeEnter', function(){
initView();
});
$scope.logout = function(){
//perform logout operation
$state.go('login');
}
})
De momento, para que todo funcione, creo en el $scope un nombre de usuario por defecto, y una función logout que me devuelve a la vista anterior.
¿Y como queda esta vista?
Pues parecida a la anterior:
Probando la estructura
Ya hemos visto los pantallazos, pero aquí te dejo una demo interactiva:
See the Pen Ionin Navigation between 2 views demo by Enrique (@-kaik-) on CodePen.
Integrando autentificación con Google+
Ya tengo la estructura de la app, ahora voy a entrar en materia para integrar la autentificación de Google+.
Plugin de Google+
Lo primero es instalarse el plugin oficial de Google+ para Córdova/PhoneGap
Me instalo el plugin del siguiente modo:
googleLoginDemo$:cordova plugin add nl.x-services.plugins.googleplus
googleLoginDemo$:cordova prepare
Una vez hecho esto, el código de GooglePlus.js se añade automáticamente, por lo que no tenemos que tocar nada de nuestro html.
IMPORTANTE: Ninguno de estos métodos puede llamarse antes de que se invoque el evento deviceready (en nuestro caso, con ionic, podemos usar su equivalente $ionicPlatform.ready).
Este plugin te proporciona diversas funcionalidades, vamos a ver algunas:
isAvailable
Si quiero poner un botón de login con Google+, mejor que compruebe esto antes.
- En iOS comprueba si Google+ está instalado, si no lo está y llamamos a la función de login, se redirigirá a Safari, que según comenta el creador del plugin, puede ser motivo de rechazo de una app en la app store.
- En Android, comprueba si Google Play Services está instalado (probablemente lo esté).
Login
Intenta hacer el login a partir de la cuenta de Google+ que tengamos registrada en el dispositivo. No abre una vista para seleccionar la cuenta que queremos usar, y nos pide permisos para autentificarnos con Google+.
En caso de éxito, el callback nos devuelve un objeto obj en JSON con el siguiente contenido:
obj.email
obj.userId
obj.displayName
obj.gender
obj.imageUrl
obj.givenName
obj.middleName
obj.familyName
obj.birthday
obj.ageRangeMin
obj.ageRangeMax
obj.idToken
obj.oauthToken
Try silent login
La idea es utilizar este método cuando el usuario vuelve a la app, y no estoy seguro de si necesita autentificación. Con ella, intento logear al usuario. Si tengo éxito, obtengo de nuevo un objeto como el anterior obj. Si no, tengo un callback de error para gestionarlo, pero no me aparece en ningún momento el diálogo de selección de cuenta de usuario.
Logout
Elimina el token OAuth2.
Disconnect
Elimina el token OAuth2 y se olvida de qué cuenta se ha utilizado para hacer login.
Servicio para gestionar la autentificación
Como a mi me gusta el código ordenado, y prefiero utilizar dependency injection en la medida de lo posible, creo un nuevo fichero (lo haré en la nueva carpeta services: services/SocialAuthService.js), que me devolverá un singleton SocialAuth, con los siguientes métodos:
- SocialAuth.getAuthUser: Me devuelve el objeto con el usuario, o bien null
- SocialAuth.isGooglePlusAvailable: Promise que devuelve parámetro true/false
- SocialAuth.googlePlusLogin: Promise con callbacks success/error
- SocialAuth.googlePlusSilentLogin: Promise con callbacks success/error
- SocialAuth.googlePlusLogout: Promise que devuelve un mensaje
- SocialAuth.googlePlusDisconnect: Promise que devuelve un mensaje
Dejo el código a continuación
services/SocialAuthService.js:
angular.module('SocialAuthService', [])
/**
* A service that handles methods related with Social authentication
*/
.factory('SocialAuth', function($http, $q) {
var SocialAuth = {};
var authUser = null;
var isGooglePlusAPIAvailableOrReject = function(deferred){
if(window.plugins == null || window.plugins.googleplus == null){
setTimeout(function(){
console.log("API not available");
deferred.reject("API not available");
}, 100);
return false;
}
return true;
}
/**
* @brief Static method that returns the authenticated user object
*
*/
SocialAuth.getAuthUser = function() {
return authUser;
};
/**
* @brief Static method that check whether google+ is available or not,
* returning a promise, with a unique parameter (true/false).
*
*/
SocialAuth.isGooglePlusAvailable = function() {
var deferred = $q.defer();
if(isGooglePlusAPIAvailableOrReject(deferred)){
window.plugins.googleplus.isAvailable(
function (available) {
deferred.resolve(available);
}
);
}
//return the promise object
return deferred.promise;
};
/**
* @brief Static method that attempts to log-in using Google+ auth API.
* This method returns a promise with success/error callbacks.
*
*/
SocialAuth.googlePlusLogin = function() {
var deferred = $q.defer();
if(isGooglePlusAPIAvailableOrReject(deferred)){
window.plugins.googleplus.login(
{
'iOSApiKey': 'my_iOS_API_KEY_if_I_have_one'
// there is no API key for Android; you app is wired to the Google+ API by listing
// your package name in the google dev console and signing your apk
},
function (obj) {
authUser = angular.fromJson(obj);
deferred.resolve(obj);
},
function (err) {
deferred.reject(err);
}
);
}
//get the promise object
var promise = deferred.promise;
//add success callback to the promise, and associate it with the RESOLVE call
promise.success = function(fn) {
return promise.then(function(response) {
fn(response);
})
}
//add success callback to the promise, and associate it with the REJECT call
promise.error = function(fn) {
return promise.then(null, function(response) {
fn(response);
})
}
//return the promise object
return promise;
};
/**
* @brief Static method that attempts to log-in silently using Google+ auth API.
* This method returns a promise with success/error callbacks.
* If it succeeds, you get the same object returned by googlePlusLogin. If it fails, it
* will not show the auth dialog to the user
*
* @returns obj The success callback gets a JSON object like the one returned by
* SocialAuth.googlePlusLogin
*
* @see SocialAuth.googlePlusLogin
*/
SocialAuth.googlePlusSilentLogin = function() {
var deferred = $q.defer();
if(isGooglePlusAPIAvailableOrReject(deferred)){
window.plugins.googleplus.trySilentLogin(
{
'iOSApiKey': 'my_iOS_API_KEY_if_I_have_one'
},
function (obj) {
console.log(obj);
authUser = angular.fromJson(obj);
deferred.resolve(obj);
},
function (err) {
deferred.reject(err);
}
);
}
//get the promise object
var promise = deferred.promise;
//add success callback to the promise, and associate it with the RESOLVE call
promise.success = function(fn) {
return promise.then(function(response) {
fn(response);
})
}
//add success callback to the promise, and associate it with the REJECT call
promise.error = function(fn) {
return promise.then(null, function(response) {
fn(response);
})
}
//return the promise object
return promise;
};
/**
* @brief Static method that attempts to clear the OAuth2 token
* returning a promise, with a unique message parameter
*
*/
SocialAuth.googlePlusLogout = function() {
var deferred = $q.defer();
if(isGooglePlusAPIAvailableOrReject(deferred)){
window.plugins.googleplus.logout(
function (msg) {
authUser = null;
deferred.resolve(msg);
}
);
}
//return the promise object
return deferred.promise;
};
/**
* @brief Static method that attempts to clear the OAuth2 token
* and forget which account was used to log in (this forces the user to re-auth the app again)
* returning a promise, with a unique message parameter
*
*/
SocialAuth.googlePlusDisconnect = function() {
var deferred = $q.defer();
if(isGooglePlusAPIAvailableOrReject(deferred)){
window.plugins.googleplus.disconnect(
function (msg) {
authUser = null;
deferred.resolve(msg);
}
);
}
//return the promise object
return deferred.promise;
};
return SocialAuth;
});
Usando el login de Google
Login.js
Voy a modificar el script login.js para loguearme con Google+.
En primer lugar, incluyo el servicio para poderlo usar
angular.module('login', ['SocialAuthService'])
.controller('LoginCtrl', function($ionicPlatform, $scope, $state, SocialAuth) {
...
}
A continuación, creo una función que comprobará si la API de Google+ está disponible:
- En caso negativo, oculta el botón de login
- En caso afirmativo, intenta el login silencioso
- Si lo consigue, pasa a la vista de usuario
- Si no lo consigue, muestra el botón de login
var silentLoginAttempt = function(){
SocialAuth.isGooglePlusAvailable()
.then(function(available){
console.log("google plus availability is: " + available);
if(!available){
$scope.showGoogleLogin = false;
}
else{
var promise = SocialAuth.googlePlusSilentLogin();
promise.success(function(msg){
console.log("silent login success");
$state.go('userInfo');
});
promise.error(function(err){
console.log("silent login failed: " + err);
$scope.showGoogleLogin = true;
});
}
});
}
Para que esto tenga sentido, haremos cambios en la vista, que veremos más adelante.
Siguiendo con el javascript, actualizo la función initView de login.js. Ahora, si estoy logueado automáticamente pasa a la siguiente vista. Si no, llama a la función que acabo de crear para intentar el login silencioso:
var initView = function(){
$scope.showGoogleLogin = false;
$ionicPlatform.ready(function(){
if(SocialAuth.getAuthUser() == null){
silentLoginAttempt();
}
else{
$state.go('userInfo');
}
})
}
$scope.$on('$ionicView.beforeEnter', function(){
initView();
});
Finalmente, en la función de login(), utilizo de nuevo mi servicio SocialAuth
$scope.login = function(){
var promise = SocialAuth.googlePlusLogin();
promise.success(function(msg){
$state.go('userInfo');
});
promise.error(function(err){
alert("Invalid login!! Error: " + err);
});
}
Login.html
Como he comentado, tengo que actualizar la vista de login para utilizar la nueva variable que oculta o no el botón. Yo la dejo así.
<ion-view title="Login">
<ion-content>
<h3 class="padding">This view tries to log-in with Google+</h3>
<br/>
<div ng-show="showGoogleLogin" class="padding">You're logged out. Please, log-in again</div>
<button ng-show="showGoogleLogin" class="button button-assertive button-block padding" ng-click="login()">
Google+ login!
</button>
<h4 class="padding" ng-hide="showGoogleLogin">Sorry, you cannot login with Google+</h4>
<br/>
</ion-content>
</ion-view>
UserInfo.js
La gracia de estar logueado es que tengo acceso a datos de la cuenta de Google del usuario. Por un lado su información básica, que utilizaré ahora para mostrar el nombre de usuario, pero por otro a su token de autentificación.
DETALLE: El token OAuth2 es interesante, por que me permitirá realizar peticiones a la API de Google+ para recuperar más datos del usuario, como sus contactos (en función de los permisos que tenga nuestra app).
¿Como cambio el código en userInfo.js?
Tengo que importar el módulo y servicio, por supuesto.
Además recupero el nombre de usuario a través del servicio, y actualizo la función de logout() para que use SocialAuth.
angular.module('userInfo', ['SocialAuthService'])
.controller('UserInfoCtrl', function($scope, $state, SocialAuth) {
$scope.userName = "Demo user";
var initView = function(){
$scope.userName = SocialAuth.getAuthUser().displayName;
console.log("user oAuth token: " + SocialAuth.getAuthUser().oauthToken);
}
$scope.$on('$ionicView.beforeEnter', function(){
initView();
});
$scope.logout = function(){
SocialAuth.googlePlusLogout().then(function(value){
console.log("logout value: " + value);
$state.go('login');
})
}
})
Fíjate que no hace falta cambiar mi template userInfo.html, ya he estoy mostrando el nombre de usuario a partir de la variable de entorno $scope.userName
En el siguiente vídeo puedes ver como funciona en un Android real.
Repositorio github
Lo prometido es deuda. Si quieres trastear con el código, en mi repositorio github para demos de ionic, encontrarás el código utilizado, en la carpeta googleLoginDemo.
Si te ha gustado este artículo, ¡no olvides compartirlo!
Saludos