Tras la resaca de las fiestas toca ponerse en marcha de nuevo, y si os gustó ese post en el que os contaba como hacer login con Yammer en vuestra app, os va a encantar este en el que os contaré como hacer login con O365 (Office 365) en vuestras aplicaciones. Como veréis a continuación, el login con O365 es un pelín más complejo que el de Yammer, aunque tiene muchísimos puntos en común -lo que tiene ser de la misma compañía-. Como pasa con Yammer, el login con O365 no vale exclusivamente para identificar al usuario, sino que te abre la puerta a la autorización de otras operaciones contra su API.

Actualmente hay distintas opciones de automatización para O365, pero nos vamos a centrar en la que tiene más futuro que es la api de Graph. Para aclararnos con los nombres, Graph era (y es) el nombre que se le da a la API de Azure Active Directory con la que se pueden hacer queries para buscar cualquier dato mediante sus relaciones con otros elementos. Esta misma API está disponible para O365 junto a otras para manejar distintas funcionalidades de Office expuestas por cada producto. Ahora está en marcha una API unificada para todo O365, en la que se exponen funcionalidades de todos los productos de un modo standard. Esta API unificada también ha heredado el nombre de Graph, y es a ella a la que nos referiremos de ahora en adelante.

Graph VS Individual Services

Aclarada la nomenclatura, vamos a ponernos manos a la obra. Lo primerísimo de todo es tener todo lo necesario para probar. Necesitaremos una suscripción de O365 y otra de Azure. Si tienes una cuenta de MSDN (como estudiante, porque te la hayan regalado en una charla, porque tengas una startup y estés en Bizspark, porque te has comprado Visual Studio…) en la sección de beneficios podrás encontrar enlaces para crearte una suscripción de desarrollador de ambos. Si no lo tienes tampoco hay que alarmarse, la suscripción de Azure si sólo la usas para manejar el Active Directory, te va a salir por 0€ al mes; para el Office puedes hacer una trial de 30 días, o puedes crearte una cuenta de Developer (full-equip pero para un sólo usuario) por 99$ al año, o algún otro tipo de suscripción, que las hay incluso más baratas.

Lo siguiente es asociar la suscripción de Office a un Active Directory dentro de la suscripción de Azure. Para hacer esto tendrás que ser administrador global de la suscripción de Office 365, así que si es una cuenta corporativa ve escalándolo a quien corresponda. Lo que tienes que hacer en este paso es dentro del portal de management de Azure (el viejo, que en el nuevo aun no se puede), das a crear un nuevo directorio. Ahí en el primer selector le tienes que decir que en lugar de uno nuevo lo que quieres es asociar uno existente, y como verás desaparecerán todos los campos y sólo nos quedará un check que al activarlo y pulsar sobre el botón de completar nos hará logout para que podamos hacer login con nuestra cuenta (administrador global) de O365. Te pedirá confirmación de que sabes lo que estás haciendo, a lo que le tendrás que decir que «sí» sin tardar demasiado aunque no lo tengas del todo claro; en otro caso te caducará el request y tendrás que volver a empezar.

Con esto ya podrás volver al portal de Azure a gestionar tu directorio el cual podrás identificar porque se llama igual que la organización que configuraras al crear la suscripción de Office 365. En la pestaña applications del directorio -ya enredarás por todas en otro momento- debes darle a añadir y decirle que es una aplicación que tu organización está desarrollando. Le indicas el nombre y las url pertinentes y ya estás funcionando. En la configuración de la aplicación deberás crear una key para usarla más tarde (recuerda copiarla en cuanto la creas, que si no luego ya no se puede) y antes de salvar para tenerla nos fijaremos en la parte de permisos. Como vemos hay dos tipos: delegados son los que nos cede un usuario cuando le redirigimos a la página de O365 para que haga login y que nos dan acceso a operaciones tal y como las haría ese usuario; los permisos de aplicación requieren un modo de autorización especial (que no veremos hoy, porque si no se nos va esto de madre) en el que un administrador de la organización da permisos a operaciones que pueden afectar a todo el directorio (como leer todos los buzones de correo de todos los usuarios). Aquí añadiremos, usando el botón de añadir aplicación, el conjunto de permisos de Microsoft Graph y seleccionaremos de entre los permisos delegados los que nos interesen, como por ejemplo el de enviar correo electrónico. Se guarda todo y ¡no te olvides de copiar el secret key que generaste!

Microsoft Graph Delegated Permissions

Se que hasta aquí parece un peñazo, pero piensa que esto es algo que haces la primera vez para ponerte en marcha y que hecho esto empieza lo divertido 😀 Además, una vez que tengas tu login con O365 integrado en tu aplicación reducirás la fricción que tengan muchos potenciales clientes de usar tu sistema, ya que no tendrán que crearse una cuenta, y tendrás acceso a potentes funcionalidades de los servicios que te deja disponibles.

Como en el caso de Yammer, para hacer el login con O365 lo primero será hacer una redirección a la página de Office, aunque en este caso no tendremos la opción de obtener directamente el token y la única opción que nos permitirá es obtener el código intermedio. La url a la que debemos dirigir al usuario es:

https://login.microsoftonline.com/common/oauth2/authorize?response_type=code&redirect_uri={0}&client_id={1}

Para el redirect_uri tendremos que atender las mismas restricciones que en Yammer, pero tendremos además que tener en cuenta que el puerto debe ser el mismo, cosa a la que Yammer no nos obligaba.

Con ese código ya podremos obtener nuestro primer token. Para ello sólo tenemos que hacer una llamada por post pasando ciertos valores:

//Código de ejemplo en C# de cómo se crea un request para solicitar un token de O365

WebRequest request = WebRequest.Create("https://login.microsoftonline.com/common/oauth2/token");
request.Method = "POST";
request.ContentType = "application/x-www-form-urlencoded";

string content = String.Format(
 "grant_type=authorization_code&redirect_uri={0}&client_id={1}&client_secret={2}&code={3}&resource=https%3A%2F%2Fgraph.microsoft.com%2F",
 HttpUtility.UrlEncode(this.redirectUri),
 HttpUtility.UrlEncode(this.graphClientId),
 HttpUtility.UrlEncode(this.graphSecretKey),
 HttpUtility.UrlEncode(this.code));

byte[] bytes = Encoding.UTF8.GetBytes(content);
var stream = request.GetRequestStream();
stream.Write(bytes, 0, bytes.Length);
stream.Close();

Como veis, se trata de enviar por POST una serie de datos tal y como si viniesen de un formulario. El redirect URI será a donde nos responda con el token para devolvernos el control. El client id lo sacamos de la pestaña de configuración de la app que creamos antes en el manager del Azure Active Directory. El secret key es esa clave que generamos y copiasteis. Finalmente, el código es el que nos venía en la query string de la redirección que hicimos antes. Facilísimo.

De la respuesta nos tendremos que quedar por lo menos con el «access_token» y si la operación no va a ser inmediata, también nos deberemos fijar en el «expires_in» y guardar el «refresh_token» para obtener un nuevo token en cualquier momento haciendo una llamada exactamente igual a la anterior salvo por dos diferencias:

• El grant_type deberá ser «refresh_token» en lugar de «code».
• Habrá que añadir un campo refresh_token con el valor adecuado.

Mientras tengamos un token válido, tendremos el poder que nos otorguen los permisos delegados que indicásemos en nuestra aplicación antes de que el usuario nos autorizase, así que por ejemplo, con una simple llamada HTTP a la API podremos mandar un email como en nombre del usuario logueado.

//Código de ejemplo en javascript de cómo se envía un correo electrónico en nombre de un usuario con O365

var data = JSON.stringify({
 "Message": {
  "subject": "subject-value",
  "body": {
   "contentType": "Text",
   "content": "content-value"
  },
  "toRecipients": [
   {
    "emailAddress": {
     "name": "name-value",
     "address": "mail@value.com"
    }
   }
  ]
 },
 "SaveToSentItems": true
});

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
 if (this.readyState === this.DONE) {
  console.log(this.responseText);
 }
});

xhr.open("POST", "https://graph.microsoft.com/v1.0/me/microsoft.graph.sendmail");
xhr.setRequestHeader("authorization", "Bearer tokenValido");
xhr.setRequestHeader("content-type", "application/json");

xhr.send(data);

¿A que es como un millón de veces más fácil de lo que os esperabais? ¿Os dais cuenta de todo lo que se puede hacer? Si os animáis y le metéis mano podéis contarnos a todos como os ha ido, y si tenéis problemas con algo pegad un silbidito 😉

Post By Javi López (27 Posts)

Arquitecto/desarrollador, creativo, buscador de nuevas soluciones y modelos de negocio, crítico constructivo y ex muchas cosas

Website: → JaviLopezG

Connect

Azure AD, Office 365