Login con Facebook parte 2

Continuando con el tutorial para realizar un login con las credenciales de Facebook desde mi aplicación empezaremos mencionando los siguientes requisitos:

1.- Proyecto resultante del ejercicio: Configurar Spring Security Core Plugin 2.0

2.- Tener configurada nuestra cuenta de Facebook como se muestra en el tema: Login con Facebook pate 1

Para que se vea más ilustrativo el tutorial están son mis vistas: a una se puede acceder sin estar logueado y la otra se puede acceder únicamente con un usuario logueado con el rol: “ROLE_USER” y "ROLE_FACEBOOK"

Así se ve la vista sin seguridad:

Así se ve la vista con seguridad:

Este es el formulario por default que se muestra cuando se intenta acceder a la página que está marcada para ser accedida únicamente por usuarios registrados:

Recapitulando:

• La configuración está hecha únicamente mediante el plugin de Spring Security

• Podemos acceder a una página sin necesidad de estar logueados y a la otra podemos acceder una vez que nos hemos logueado.

• Tenemos la aplicación de Facebook configurada como se muestra en el tutorial mencionado arriba.

Con este pequeño ejemplo nos vamos a seguir para integrar la parte del login con Facebook.

Facebook Authentication for Spring Security

Es el plugin mediante el cual realizaremos la conexión entre Facebook y nuestra aplicación, dicho plugin se integra perfectamente con el de Spring y su configuración es bastante simple, para instalarlo únicamente debemos agregar la siguiente línea a nuestro BuildConfig.groovy

...
compile ":spring-security-facebook:0.17"
...

Algunas modificaciones simples al proyecto:
• Agregar el rol de Facebook al BootStrap para que se carguen desde el inicio quedando así:

...
def init = { servletContext ->
        def adminRole = new Role(authority: 'ROLE_ADMIN').save(flush: true)
        def userRole = new Role(authority: 'ROLE_USER').save(flush: true)
        def facebookRole = new Role(authority: 'ROLE_FACEBOOK').save(flush: true)

        def testUser = new User(username: 'me', password: 'password')
        testUser.save(flush: true)

        UserRole.create testUser, userRole, true

    }
...

• Crear la clase "UsuarioFacebook" la cual debe contener la siguiente estructura requerida por el plugin:

class UsuarioFacebook {

    Long uid
    String accessToken
    Date accessTokenExpires
    static belongsTo = [user: User] //connected to main Spring Security domain

    static constraints = {
        uid unique: true
    }
}

Ahora debemos indicarle al plugin cuál es el dominio que se va a utilizar para guardar los usuarios de Facebook, así como también, nuestro app secret y app Id, estos últimos datos son los que obtenemos al configurar una nueva aplicación en nuestra cuenta de Facebook, (primera parte de este tutorial). Agregamos lo siguiente en el archivo Config.groovy

grails.plugin.springsecurity.facebook.domain.classname='your FacebookUser domain'
grails.plugin.springsecurity.facebook.secret = 'Facebook secret for your app'
grails.plugin.springsecurity.facebook.appId = 'Facebooks's app ID'

Únicamente nos falta poner nuestro botón para iniciar sesión con Facebook, el código es el siguiente y lo podemos poner en cualquier parte o bien desde nuestro formulario de login, para este tutorial lo pondré en el index ya que es la página que tengo a la mando cuando levanto la aplicación:

    < facebookAuth:connect permissions="email,user_about_me"/ >

Lo que hace el código anterior es pedir el login a Facebook con los permisos especificados en el parámetro “permissions” en este caso le estamos pidiendo acceso a su email e información de perfil. Ya que levantamos nuestra aplicación y entramos a la página donde pusimos nuestro botón, se verá más o menos así:

Una vez que pulsamos el botón de lógin nos debiera enviar inmediatamente a la página de login de Facebook donde debemos poner nuestros datos de Facebook o sí estamos logueados en únicamente nos preguntará si deseamos autorizar la aplicación y los permisos que le daremos, hagamos la prueba ejecutamos la aplicación y pulsamos el botón…

Así como dejamos configurada nuestra aplicación nos dará un error "la url proporcionada no esta permitida…”

Esto pasa porque en la configuración de la aplicación no hemos configurado desde que url debemos invocar el login, esto es más como una medida de seguridad para los usuarios de Facebook, ¿Cómo resolverlo? Muy simple:

Resolviendo error de Facebook: “URL proporcionada no está permitida”

1.- Vamos a la dirección https://developers.facebook.com/apps/ con la cuenta que utilizamos para configurar la aplicación en la parte 1 de este tutorial

2.- Seleccionar nuestra aplicación en mi caso:

3.- Nos vamos a configuración y de ahí en la pestaña avanzada buscamos la sección OAuth Settings y debemos poner la url desde donde se invocará el login de Facebook, en mi caso quedaría así:

4.- Damos guardar cambios.

Nuevamente volvemos a nuestra pantalla donde tenemos el botón de login con Facebook y lo presionamos, ahora veremos que nos llevara a una ventana en donde nos informa que la aplicación “nombre que le dimos a nuestra aplicación” quiere acceder a nuestro perfil mostrando los permisos que estamos solicitando, sí estamos de acuerdo pulsamos en aceptar y automáticamente me regresa a la pantalla principal de mi aplicación pero ya logueado.

Con esto no nos queda más que ir a la página “conSeguridad” y verificar que efectivamente la está mostrando. Espero les sea de ayuda este tutorial, más adelante sobrescribiremos uno de los servicios del plugin de Facebook para obtener más datos y también la foto de perfil del usuario que se loguea.