1. Login to Microsoft developer console or you can directly go to the console by clicking following link and crate a application with desired name.
2. Grab the application client ID and secret keys from the Microsoft developer app control panel.
3. Now install In App Browser – Install the Cordova and Ionic Native plugins with below commands
|
1 2 |
$ ionic cordova plugin add cordova-plugin-inappbrowser $ npm install --save @ionic-native/in-app-browser |
4. After installing a plugin’s package called in-app-browser, add it to your app’s NgModule and also import HttpModule – src/app/app.module.ts.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
... import { InAppBrowser } from '@ionic-native/in-app-browser'; import { HttpModule } from '@angular/http'; ... @NgModule({ ... imports: [ .... HttpModule, ... ], providers: [ ... InAppBrowser, ... ] ... }) export class AppModule { } |
4.For the sake of simplicity lets use our home page component(src/pages/home/home.ts), add in App Browser to the home module as shown below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { InAppBrowser } from '@ionic-native/in-app-browser'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController, private iab: InAppBrowser) { } } |
5. Add the button in the home screen to initiating the authorization code/token request. After adding button my home page html will become like below shown.
|
1 2 3 4 5 6 7 8 9 10 |
<ion-header> <ion-navbar> <ion-title>Home</ion-title> </ion-navbar> </ion-header> <ion-content padding> <h2>Welcome to Ionic!</h2> <button (click)="outlookLogin()">Get Outlook Contacts</button> </ion-content> |
5. Now define your outlookLogin() method in the home component.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
import { Component } from '@angular/core'; import { NavController, Platform } from 'ionic-angular'; import { InAppBrowser } from '@ionic-native/in-app-browser'; declare var window: any; import { Observable } from 'rxjs/Rx'; import { Http, Headers, RequestOptions, Response } from '@angular/http'; import 'rxjs/add/operator/map'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { outlookClientID = ''; outlookClientSecret = ''; outlookRedirectUrl = ''; OutlookContactsList: any; constructor(public navCtrl: NavController, private iab: InAppBrowser, private platform: Platform, private http: Http) { } outlookLogin() { this.platform.ready().then(() => { this.outLookLogin().then(code => { const credentials = `client_id=${this.outlookClientID} &client_secret=${this.outlookClientSecret}&redirect_uri=${this.outlookRedirectUrl} &grant_type=authorization_code &code=${code}`; var headers = new Headers(); headers.append('Content-Type', 'application/x-www-form-urlencoded'); this.http.post('https://login.microsoftonline.com/common/oauth2/v2.0/token', credentials, { headers: headers }) .map(res => res.json()) .subscribe(data => { const headers = new Headers(); headers.append('Content-Type', 'application/x-www-form-urlencoded'); headers.append('Authorization', `Bearer ${data.access_token}`); this.http.get('https://graph.microsoft.com/beta/me/people/?$skip=0&$top=1000', { headers: headers }) .map((response: Response) => response.json() .subscribe((rows: any) => { this.OutlookContactsList = rows; }, error => { console.log(error); }) , (error) => { return error; }); }, (error) => { console.log(error); }); }); }); } outLookLogin(): Promise<any> { return new Promise((resolve, reject) => { const url = `https://login.microsoftonline.com/common/oauth2/v2.0/authorize? state=Eav6wrDocSdnkKHfvdzBs9XmtE2SitGd &scope=profile+openid+email+offline_access+User.Read+Mail.Send+Contacts.ReadWrite.Shared &response_type=code &approval_prompt=auto &client_id=${this.outlookClientID} &redirect_uri=${this.outlookRedirectUrl}`; var browserRef = window.cordova.InAppBrowser.open(url, "_blank", "location=no,clearsessioncache=yes,clearcache=yes"); browserRef.addEventListener("loadstart", (event) => { if ((event.url).indexOf(this.outlookRedirectUrl) === 0) { browserRef.removeEventListener("exit", (event) => { }); browserRef.close(); let code = getParameterByName('code', event.url); if (code) { resolve(code); } else { reject("Problem authenticating with outlook"); } } }); browserRef.addEventListener("exit", function (event) { reject("The Outlook sign in flow was canceled"); }); }); } } // to get query string form the auth url of outlook function getParameterByName(name, url) { if (!url) url = window.location.href; name = name.replace(/[\[\]]/g, "\\$&"); var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, " ")); } |
I hope you like this Post, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.
I am Arjun from Hyderabad (India). I have been working as a software engineer from the last 7+ years, and it is my passion to learn new things and implement them as a practice. Aside from work, I like gardening and spending time with pets.
Do you have an ionic v1 version of this tutorial? I been struggling with it for the last 4 days. I can get the access_token but not the code or the refresh_token I need the refresh token to store in the backend for offline processing. I am getting redirect_uri must be an absolute url error.
And How can we do it with angular 5..