Hola nuevamente,
seguimos son la autenticación de Google en aplicaciones Meteor, esta vez lo que haremos será personalizar el inicio y cierre se sesión, en otras palabras, nosotros decidiremos cómo y cuando iniciar y cerrar sesión, por ende ya no nos hará falta el módulo accounts-ui
Creamos el proyecto y la infraestructura
Crearemos el proyecto:
meteor create loginConGoogleCustom
loginConGoogleCustom: created. To run your new app:
cd loginConGoogleCustom
meteor
Eliminamos todos los archivos del proyecto:
cd loginConGoogleCustom
rm *.js *.css *.html
Creamos la estructura de directorios para componentes de nuestra aplicación:
mkdir client
mkdir server
Instalamos el módulo de contiene la lógica para trabajar con cuentas de google:
meteor add accounts-google
accounts-google: Login service for Google accounts
Instalamos el módulo que contiene bootstrap:
meteor add bootstrap
bootstrap: Front-end framework from Twitter
Creamos los componentes del cliente:
touch client/index.html
touch client/index.js
Creamos los componentes del server:
touch server/configuracion.js (este archivo es idéntico que el que utilizamos anteriormente)
Iniciamos Meteor:
meteor
[[[[[ ~/loginConGoogleCustom ]]]]]
Initializing mongo database... this may take a moment.
=> Meteor server running on: https://localhost:3000/
Creamos la configuración
Abrimos el archivo server/configuracion.js y agregamos el siguiente código (este código es idéntico al del post anterior, solo hay que cambiar el clientId y el secret según los datos de cada cuenta):
//Quitamos cualquier configuración para
//cuentas de Google
Accounts.loginServiceConfiguration.remove({
service: "google"
});
//Agregamos la configuración con los datos que obtubimos de Google
//campo clientId <-- Client ID
//campo secret <-- Client Secret
Accounts.loginServiceConfiguration.insert({
service: "google",
clientId: "441624260670-5p0k5et2ns9pnlm8cgtp8bsdf.apps.googleusercontent.com", secret: "3LMwasdfIOXfPqGhyeH4asdf3h"
});
Creamos la vista (archivo client/index.html)
<head>
<title>Login con Google</title>
</head>
<body>
{{> inicial}}
</body>
<template name="inicial">
{{#if currentUser}}
{{> usuarioAutenticado}}
{{else}}
{{> usuarioNoAutenticado}}
{{/if}}
</template>
<template name="usuarioAutenticado">
<div class="navbar">
<div class="navbar-inner">
<div class="container pull-right">
<span class="text-success">{{currentUser.profile.name}}</span>
<img class="img-rounded"
style="height: 32px; margin-top: 4px;"
src="{{currentUser.services.google.picture}}"/>
<div id="cerrarSesion" class="btn btn-primary">Cerrar Sesión</div>
</div>
</div>
</div>
{{> contenido}}
</template>
<template name="usuarioNoAutenticado">
<div class="alert">
<span class="icon-exclamation-sign"/> Debe Autenticarse!
<div id="iniciarSesion" class="btn btn-info">Iniciar Sesión</div>
</div>
</template>
<template name="contenido">
<iframe width="100%" height="500px" src="https://www.meteor.com"></iframe>
</template>
A diferencia de la implementación anterior, esta es más prolija, la página web se limita al siguiente código:
<head>
<title>Login con Google</title>
</head>
<body>
{{> inicial}}
</body>
La plantila {{> inicial}} renderiza contenido en base a si el usuario actual está logueado o no.
{{#if currentUser}}
{{> usuarioAutenticado}}
{{else}}
{{> usuarioNoAutenticado}}
{{/if}}
La plantilla {{> usuarioAutenticado}} mostrará una barra de navegación que a la derecha contendrá el nombre del usuario logueado, su avatar y un botón que permitirá cerrar la sesión, luego se mostrará el contenido de la página web. El botón cerrar sesión es nuestro componente personalizado y lo que más nos interesa es su id, ya que lo utilizaremos para programarle la escucha de eventos.
La barra de navegación debería verse más o menos así:
La plantilla {{> usuarioNoAutenticado}} mostrará un alerta que indicará la necesidad de iniciar sesión a la izquierda de la pantalla. El mensaje de alerta contiene además un botón que permite inicar la sesión, este es nuestro componente personalizado y su id es "iniciarSesion". El mensaje de alerta debería verse más o menos así:
Programación de eventos (archivo client/index.js)
Solo nos resta programar la interacción del usuario, en otras palabras, definir lo que ocurrirá cuando el usuario haga click en el botón "iniciar Sesión" o en el botón "Cerrar Sesión". Copiamos el siguiente código:
Template.usuarioAutenticado.events({
"click #cerrarSesion":function(event,template){
Meteor.logout(function(err){
if(err){
// manejar error
}else{
// todo ok
}
});
}
});
Template.usuarioNoAutenticado.events({
"click #iniciarSesion":function(event,template){
Meteor.loginWithGoogle({
requestPermissions: ['profile']
}, function(err){
if(err){
// manejar error
}else{
// todo ok
}
});
}
});
La programación o definicion de eventos en Meteor es muy simple y autodescriptiva. Los evenetos se programan en el ámbito de una plantilla, luego se define el evento y luego la regla de búsqueda de componentes a los cuales se les programará el evento.
En nuestro caso, en la plantilla usuarioAutenticado al hacer click en el botón con id cerrarSesion llamamos al método Meteor.logout el cual solo recibe como parámetro una función de retrollamada la cual nos permite manejar el resultado de la operación mediante el parámetro err.
Para el caso de la plantilla usuarioNoAutenticado al hacer click en el botón con id iniciarSesion llamamos al método Meteor.loginWithGoogle el cual recibe como primer parámetro un arreglo llamado requestPermissions en el cual definimos los permisos que kle requerimos a google, en este caso solo hemos requerido el permiso profile el cual nos permitirá acceder a información básica de la cuenta, como segundo parámetro una función de retrollamada la cual nos permite manejar el resultado de la operación mediante el parámetro err.
Bien, eso es todo, espero les sea de utilidad.
Saludos
