programa-con-google: Como incluir Google+ SignIn en tus aplicaciones DART

Como incluir Google+ SignIn en tus aplicaciones DART

Thursday, March 20, 2014

By Ponce de LeónLuego de una temporada de eventos Dart Flight School, donde se ha plantado la semilla de DART en nuestro interior, esta ha empezado a germinar por lo que he decidido empezar a migrar mis proyectos web a DART, la mayoría de mis aplicaciones usan autenticación a través de Google+ Sign In.

Una de mis primeras reacciones fue buscar la lista de ejemplos (quickstart) que tenemos disponibles en la página de desarrolladores de Google+ SignIn, pero no he encontrado un ejemplo escrito para DART, así que mi pequeña búsqueda inició. Se que suena como principio de una novela, aunque hubiera querido investigar esto, la comunidad de desarrolladores de DART ya habia creado un paquete que solucionaría mis problemas, asi que sin más preambulos aqui les comparto la forma de utilizarlo.

Lo primero que debemos hacer es crear un proyecto web en DART:

Ahora incluimos en las dependencias el paquete google_oauth2_client y lo importamos en nuestro archivo principal en el proyecto web:googleoauthdesdedart.dart

import "package:google_oauth2_client/google_oauth2_browser.dart";

pubspec.yaml

name: GoogleOAuthDesdeDart

author: Enrique Ponce De Leon

description: Proyecto que muestra como conectarse a Google OAuth 2.0 desde DART

dependencies:

browser: any

google_oauth2_client: '>=0.2.18'

Agregando lo anterior tenemos agregado el paquete y esta listo para ser utilizado por la aplicacion.

Ahora debemos crear un “CLIENT ID”, para poder autenticar con Google+ SignIn, en el API Console como se muestra a continuación:

A continuación vamos a incluir algo de código en proyecto:

import "dart:html";

import "package:google_oauth2_client/google_oauth2_browser.dart";

void main() {

var botonLogin = new ButtonElement();

botonLogin.text = "Loguearse con Google+";

botonLogin.onClick.listen((_) {

googleLogin.login();

});

document.body.children.add(botonLogin);

}

final googleLogin = new GoogleOAuth2(

"CLIENT_ID", // Remplace aqui su client id

["openid", "email"],

tokenLoaded:loginCallback);

void loginCallback(Token clave) {

print(clave); //Imprime la clave en consola

}

Ahora vamos a consumir un API como la de Google+, por lo que usaremos la clave (token) obtenida para obtener el perfil de Google+, para eso reescribiremos el método loginCallback.

void loginCallback(Token clave) {

//URL para solicitar el perfil de Google+

final googlePlusURL = "https://www.googleapis.com/plus/v1/people/me";

var request = new HttpRequest();

request.open("GET", googlePlusURL);

// Envia la clave en el header

request.setRequestHeader("Authorization", "${clave.type} ${clave.data}");

request.onReadyStateChange.listen((_) {

if (request.readyState == HttpRequest.DONE &&

(request.status == 200 || request.status == 0)) {

print(request.responseText); //Imprime la respuesta

}

});

request.send(); // Envia la peticion

}

El código anterior nos devolverá el perfil de google+ en formato JSON.

Aumentando algo de codigo para imprimir los datos a través de UI, tenemos una aplicacion que puede descargarse de github.com/qennix/GoogleOAuthDesdeDart y se ve la siguiente forma.

1. La aplicación corre por primera vez

2. La pantalla de Google Accounts nos pide que nos identifiquemos

Screen Shot 2014-03-11 at 2.00.56.png

3. La aplicación recibe el token y lo usa para obtener el perfil de Google+

Screen Shot 2014-03-11 at 2.01.11.png

Y... ¡listo! Nótese que este ejemplo es solo para poder demostrar el uso del paquete de Google oauth y el código para el desplegado de datos puede mejorarse por supuesto usando Polymer o AngularDart para el UI.