Outlook Calendar and event integration with Ionic

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.

@NickL2010 Did you fin anything about that?

No, we left it as is

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

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.

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.