Angular 2.0 and the Microsoft Graph

Yesterday, the AngularJS Team announced the official beta release of Angular 2. The beta milestone is a significant achievement that should motivate developers to give Angular 2 a serious consideration for new web/mobile projects. Besides getting ready for primetime, Angular 2 offers some significant improvements over Angular 1 (just read here). In this post, I’ll describe the steps of building an Angular 2 application that authenticates to Azure Active Directory (using an implicit OAuth2 flow) and calls into the Microsoft Graph API. In addition to the completed solution on GitHub, I’ve also provided a step-by-step video of building the Angular 2/Office 365 app from scratch:

[View:https://www.youtube.com/watch?v=QoTKK2_-dC0]

Angular 2 and TypeScript

The AngularJS Team worked closely with Microsoft to take advantage of TypeScript in Angular 2. If you are new to TypeScript, it is a strongly-typed JavaScript superset that compiles down to JavaScript. Because it is class-based and type-strict, it is favored by many developers for client-side development (especially those with object oriented backgrounds). TypeScript introduces a few interesting challenges to a web project.

TypeScript must be compiled to JavaScript before run in a browser (some browsers can compile TypeScript, but this is slow). Luckily, the TypeScript compiler can be run in a watch mode that will automatically re-compile when a TypeScript file has been saved. Notice the start script we have configured below in the package.json (used by the Node Package Manager). This script will concurrently start the TypeScript complier in watch mode (tsc –w) and start the live-server web hosts (which also listens for files changes to provide automatic refreshes).

package.json with start script

 { "name": "Angular2Files",    "version": "1.0.0", "scripts": {        "start": "concurrent \"tsc -w\" \"live-server\""    },  "dependencies": {       "jquery": "*",      "bootstrap": "*",       "angular2": "2.0.0-beta.0",     "systemjs": "0.19.6",       "es6-promise": "^3.0.2",        "es6-shim": "0.33.0",       "reflect-metadata": "0.1.2",        "rxjs": "5.0.0-beta.0",     "zone.js": "0.5.10" },  "devDependencies": {        "concurrently": "^1.0.0",       "live-server": "^0.9.0",        "typescript": "1.7.3"   }}

The class-based implementation of TypeScript promotes the separation of different classes into different script files. This can make script references messy in HTML. To overcome this, the project (and samples on angular.io) use SystemJS to reference all the generated .js files as a package. Below shows the System.config that tells SystemJS to reference all the .js files found under the “src” folder.

System.config to dynamically load .js scripts

 <script type="text/javascript"> System.config({     packages: {         "src": {                format: "register",             defaultExtension: "js"          }       }   }); System.import("src/app/app");</script>

OAuth2 with Azure AD

The Azure AD Team created an Angular module for integrating the Azure AD Authentication Library (ADAL) into Angular 1 projects. For this project, I decided to leverage a manual/raw OAuth2 flow instead of using a library (which I think is valuable for all developers to understand). However, I’m starting to investigate the ngUpgrade and ngForward goodness the AngularJS Teams are offering for mixing Angular 1 and 2 in one project…perhaps my next post

For an implicit OAuth flow with Azure AD, we will first redirect the user through a sign-in and consent flow to get an id_token. Once we have an id_token, we know the user is signed in and we should be able to get an access_token using a different redirect. These two redirects are depicted in the AuthHelper.ts file as the login and getAccessToken functions. Note that both the id_token and access_token will be passed back from Azure AD as URL parameters. The constructor handles this parameter check.

authHelper for manage Azure AD authentication

 import { Injectable } from "angular2/core";import { SvcConsts } from "../svcConsts/svcConsts";@Injectable()export class AuthHelper {  //function to parse the url query string    private parseQueryString = function(url) {      var params = {}, queryString = url.substring(1),        regex = /([^&=]+)=([^&]*)/g, m;     while (m = regex.exec(queryString)) {           params[decodeURIComponent(m[1])] = decodeURIComponent(m[2]);        }       return params;  }   private params = this.parseQueryString(location.hash);  public access_token:string = null;      constructor() {     //check for id_token or access_token in url     if (this.params["id_token"] != null)            this.getAccessToken();      else if (this.params["access_token"] != null)           this.access_token = this.params["access_token"];    }       login() {       //redirect to get id_token      window.location.href = "https://login.microsoftonline.com/" + SvcConsts.TENTANT_ID +            "/oauth2/authorize?response_type=id_token&client_id=" + SvcConsts.CLIENT_ID +           "&redirect_uri=" + encodeURIComponent(window.location.href) +           "&state=SomeState&nonce=SomeNonce"; }       private getAccessToken() {      //redirect to get access_token      window.location.href = "https://login.microsoftonline.com/" + SvcConsts.TENTANT_ID +            "/oauth2/authorize?response_type=token&client_id=" + SvcConsts.CLIENT_ID +          "&resource=" + SvcConsts.GRAPH_RESOURCE +           "&redirect_uri=" + encodeURIComponent(window.location.href) +           "&prompt=none&state=SomeState&nonce=SomeNonce"; }}

Angular 2 Routes

Many single page applications in Angular 1 make use of Angular routing (or Angular UI Router) to dynamically load partial views without reloading the entire page. Implementing Angular 1 routing required an additional script reference and dependency to the routing module (ex: ngRoute). Angular 2 routing has many similarities to its predecessor…references an additional script reference, added as dependency on the root module, contains route config, offers object/functions to navigate between views, etc. However, these look much different when implemented in TypeScript. Below is the routing implementation for my project where I’ve highlighted routing specific code.

Note: the ADAL module for Angular 1 provided a route extension for determining if a view required authentication or not (via requireADLogin flag). Given my simple project contains only two views (login and files), I simply perform a check in the constructor of the App to navigate between the two based on the existence of an access token.

Route configuration in Angular 2

 import { Component, provide } from "angular2/core";import { bootstrap } from "angular2/platform/browser";import { Router, RouteConfig, ROUTER_DIRECTIVES, ROUTER_PROVIDERS, LocationStrategy, HashLocationStrategy } from "angular2/router";import { HTTP_PROVIDERS } from "angular2/http";import { Login } from "../login/login";import { Files } from "../files/files";import { AuthHelper } from "../authHelper/authHelper";@Component({   selector: "files-app",  template: "<router-outlet></router-outlet>",    directives: [ROUTER_DIRECTIVES],    providers: [HTTP_PROVIDERS]})// Configure the routes for the app@RouteConfig([ { name: "Login", component: Login, path: "/login" }, { name: "Files", component: Files, path: "/files" } ])export class App {    constructor(router:Router, auth:AuthHelper) {       // Route the user to a view based on presence of access token       if (auth.access_token !== null) {           // access token exists...display the users files            router.navigate(["/Files"]);        }       else {          // access token doesn't exist, so the user needs to login           router.navigate(["/Login"]);        }   }}bootstrap(App, [AuthHelper, ROUTER_PROVIDERS, provide(LocationStrategy, { useClass: HashLocationStrategy })]);

Calling the Microsoft Graph

In Angular 1, the $http object was commonly used for performing REST calls into the Microsoft Graph. Angular 2 offers an Http object that performs the same operations. This requires an additional script reference and import as seen below. Also notice the addition of the Authorization Bearer token included in the header of the Microsoft Graph request.

Calling Microsoft Graph

 import { Component, View } from "angular2/core";import { Http, Headers } from "angular2/http";import { AuthHelper } from "../authHelper/authHelper"@Component({   selector: "files"})@View({  templateUrl: "src/files/view-files.html"})export class Files {  private files = []; constructor(http:Http, authHelper:AuthHelper) {     // Perform REST call into Microsoft Graph for files on OneDrive for Business        http.get("https://graph.microsoft.com/v1.0/me/drive/root/children", {           headers: new Headers({ "Authorization": "Bearer " + authHelper.access_token })      })      .subscribe(res => {          // Check the response status before trying to display files         if (res.status === 200)             this.files = res.json().value;          else                alert("An error occurred calling the Microsoft Graph: " + res.status);      }); }}

Conclusions

I’m really excited the see Angular 2 reach Beta and anxious to see the creative ways the Microsoft community leverages is in their solutions. You can download the Angular 2 Files project from GitHub: https://github.com/OfficeDev/O365-Angular2-Microsoft-Graph-MyFiles