Outlook Calendar and event integration with Ionic

Ionic Framework ionic-v3
1

Hello,
I need to pull calendar events from an outlook account. I’ve read a bit about the API that outlook provide, and it seems like its meant for web apps and not mobile (yes I know its just an api call and receiving json, but there is alot of setup and registration needed first). I tried to find examples for ionic 2 or any npm package, yet all I’ve found is an old tutorial for ionic v1 with the old v1 api (much different to v2 api). My question is: has anyone done this on ionic 2? which packages did you use/should I look into?
Thanks in advance.

2

@NickL2010 Did you fin anything about that?

3

No, we left it as is

4

I finally found a way to make it work!

First, you need to create your app here: https://apps.dev.microsoft.com/#/appList

Then, you need to follow the steps explained here: https://docs.microsoft.com/en-us/outlook/rest/get-started

  1. “Getting an authorization code”
  2. To be able to: “Getting an access token”
  3. Then you can call the Outlook events API

You will need to install two Ionic Native plugins:

Here is some code to help you out:

  1. “Getting an authorization code”
  getAuthCode() {
    let auth = 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize';
    let client_id = '?client_id=YOUR_CLIENT_ID';
    let redirect_uri = '&redirect_uri=http://localhost:8100/'
    let response = '&response_type=code';
    let scope = '&scope=openid+https://outlook.office.com/calendars.read+offline_access';

    let url = auth + client_id + redirect_uri + response + scope;

    let browserRef = window.open(url, '_blank', 'location=no');
    browserRef.addEventListener("loadstart", (event: any) => {
      if ((event.url).indexOf('?code=') !== -1) {
        let code = event.url.slice(event.url.indexOf('?code=') + '?code='.length);
        this.getToken(code);
        browserRef.close();
      }
    })
  }
  1. “Getting an access token”
  getToken(code): any {
    let headers = { "Content-Type": "application/x-www-form-urlencoded" };

    let url = 'https://login.microsoftonline.com/common/oauth2/v2.0/token';

    let body = {
      "grant_type": "authorization_code",
      "code": code,
      "redirect_uri": "http://localhost:8100/",
      "client_id": "YOUR_CLIENT_ID",
      "client_secret": "YOUR_SECRET_PASSWORD"
    }

   this.cordovaHttp.post(url, body, headers).then((result) => {
      let res = JSON.parse(result.data);
      this.getEvents(res.access_token);
    }, (err) => { console.error(err) })
  }
  1. Get Outlook Events
  getEvents(token) {
    let headers = { "Authorization": "Bearer " + token };
    let url = 'https://outlook.office.com/api/v2.0/me/events';

   this.cordovaHttp.get(url, {}, headers).then((result) => {
     JSON.parse(result.data);
    }, (err) => { console.error(JSON.stringify(err, null, 4)) })
  }

Don’t forget to import the HTTP plugin in your .ts file (the one I called cordovaHttp):

  • import { HTTP } from '@ionic-native/http';
1 Like
5

Hey @antoinedupont i’m facing “Invalid request. Request is malformed or invalid.” issue while fetching the token…i have followed all the steps given by you.

7

Good to see your post. And understood your concern. You know I also faced a similar issue in my outlook account. When I was trying to sending an email to my manager. At that moment, I noticed an error code, outlook error 0x800ccc0e Gmail. I tried to fix it but I had failed. Looking for some informative stricks so that I can easily fix the error.