Fetching Office 365 contacts in Ionic 2 app

  • Article

In the first Article, we discussed setting up Ionic 2 for creating the application. In this article we will use the ADAL plugin for Cordova.

Create a blank Ionic 2 app and modify the HTML as shown:

<ion-header-bar>
     <ion-nav-bar>
         <ion-title>
             Office 365 App
         </ion-title>
     </ion-nav-bar>
 </ion-header-bar>
 <ion-content padding>
  <button (click)="login()" *ngIf="!isAuthenticated">Sign-in with Office 365</button>
   
  <button (click)="addContact()" *ngIf="isAuthenticated">Add Contact</button> 
 
 
  <ion-list *ngIf="isAuthenticated"> 
     <ion-item *ngFor="let item of items"> 
       {{item.GivenName}} 
     </ion-item> 
   </ion-list> 
</ion-content>

Modify the home.ts fetch the Office 365 contacts as shown below:

import {Component,NgZone} from '@angular/core';
import {NavController} from 'ionic-angular';
import {Http, Headers} from '@angular/http';
import {ContactNew} from '../contactNew/contactNew';
 
 
@Component({
  templateUrl: 'build/pages/home/home.html'
})
 
export class RootPage { 
  items:Array<any> = []; 
  isAuthenticated:boolean = false; 
  constructor(private navController: NavController, private zone: NgZone, private http: Http) { 
  } 
  login() { 
     
    let ctrl = this; 
    let authContext = new Microsoft.ADAL.AuthenticationContext("https://login.microsoftonline.com/common"); 
    authContext.acquireTokenAsync("https://outlook.office365.com/",  
      "70ce0f8f-5186-4046-9d62-3029794ce4cd", "http://localhost:8000")
      .then(function(result: Microsoft.ADAL.AuthenticationResult){ 
        ctrl.zone.run(() => { 
          ctrl.isAuthenticated = true; 
          //call the graph 
          ctrl.http.get('https://outlook.office.com/api/v2.0/me/contacts', { 
            headers: new Headers({ "Authorization": "Bearer " + result.accessToken }) 
          }).subscribe(res => { 
            if (res.status == 200) 
              ctrl.items = res.json().value; 
          }); 
        }); 
      }, function(err) { 
        //TODO: handle auth error 
      }); 
  }
  addContact(){
     this.navController.push(ContactNew);
   }  
 }

The GitHub location is as follows: https://girishgoudar.visualstudio.com/DefaultCollection/_git/Ionic2Office365Contacts

See Also