Utilización de OAuth2 con GitHub

Índice de contenidos.

• 1. Introducción
• 2. Registro de nuestra aplicación con Github
• 3. Acceder a recursos de la aplicación
• 4. Conclusiones

1. Introducción

Hoy voy a contaros como utilizar OAuth2 para autenticar usuarios con sus cuentas de Github en nuestra aplicación.

Ya lo utilizan algunas webs como https://coderwall.com/

Su gran ventaja es que no obligais al usuario a tener que inventarse contraseñas para todas las webs que visita, si no que puede utilizar su cuenta, en este caso la de Github, para muchas otras webs.

No voy a meterme en lenguajes de programación ni código para no limitaros. Vamos a ver que pasos lógicos serán necesarios para el registro y login de usuarios.

2. Registro de nuestra aplicación con Github

Entramos en la url https://github.com/settings/applications/new

Rellenamos los datos teniendo en cuenta que:

• Application name es el nombre de nuestra aplicación.
• Homepage URL es la dirección basica de nuestra web.
• 
  Authorization callback URL es la página a la que será redirigido por defecto el usuario una vez se autentique.

Podemos también arrastrar una imagen para que sea el logotipo de nuestra aplicación.

Si quereis probar la funcionalidad de vuestra aplicación en local la url debe ser http://127.0.0.1/ como se muestra en la imagen.

Una vez que terminemos recibiremos el client ID que es la id única para nuestra aplicacion y una clave «client secret» que utilizaremos mas adelante.

3. Acceder a recursos de la aplicación

Cuando un cliente nos pida un recurso protegido en nuestra aplicación y no tenga acceso porque no esté identificado le redigiremos a
https://github.com/login/oauth/authorize?client_id=……. incluyendo la id de nuestra aplicación.

Opcionalmente tambien podemos incluir los parametros redirect_uri para sobrescribir la url de callback que pusimos en el registro de la aplicación; un state, que será una cadena de texto aleatoria para prevenir vulnerabilidades de tipo cross-site-forgery y un scope para definir diferentes niveles de autentificación, y asignar permisos específicos para cada nivel.

Voy a comprobarlo con la url https://github.com/login/oauth/authorize?client_id=06390fb74c0184bc95f7

Al aceptar nos redirige a la página que pusimos en el registro de la aplicación
http://127.0.0.1:8080/recurso?code=ac9c89490f2a3a63e30e

y recibimos un código por GET.

El code que acabamos de recibir es una clave temporal y lo utilizamos para hacer una petición POST a github https://github.com/login/oauth/access_token para que nos de un token de acceso para este usuario.

Vamos a hacer la llamada con la extension de Chrome Postman incluyendo los siguientes parametros, client_id, client_secret, code (que acabamos de recibir) y si hubieramos tenido un state tambien lo incluiríamos.

Pinchamos en SEND y recibimos el token de acceso, que nos servirá para identificar al usuario y además para extraer información útil sobre el, aunque no es información sensible, si no un resumen de la que tenemos pública.

En este caso ha sido https://api.github.com/user?access_token=f6d498d267f715a127f1f3488d8c6378f0e801a8

Entre otras cosas podemos obtener su foto, una id, su nick y su nombre. Con esto tendremos suficientes datos para almacenarlo en nuestra base de datos y poder mostrar su foto para mostrarle que está logueado correctamente.

4. Conclusiones

Espero que os haya parecido interesante. Con este tutorial he intentado centrarme en explicaros los pasos lógicos a seguir para el caso concreto de Github para daros una idea general del proceso.