Written by

MuthuKumar

Share

  

Category

see all categories
intranet as a service

How to Get Access Token and Refresh Token for SharePoint from Ionic 3 Mobile App

Ionic is an open source framework. It is the most popular cross platform mobile app framework. It helps develop or build hybrid mobile apps fast and easy. The efficiency of Ionic helps saves time and money for the investor. 

This piece attempts to show the reader how to get access token and refresh token for SharePoint from ionic 3 mobile app using native HTTP plugin. This article is the continued article for my previous article. How to Authenticate SharePoint & Office 365 from Ionic 3 Mobile App

Make sure you have above mentioned article authentication part implementation in your ionic 3 app. If you not yet, please visit that article take a look and download source code and do npm install. This command will install all dependencies for project. That’s all the project is ready. Then only its works for this article and easy to start further

Introduction:

SharePoint:

SharePointis a web-based collaborative platform that integrates with Microsoft Office. Launched in 2001, SharePoint is primarily sold as a document management and storage system, but the product is highly configurable and usage varies substantially between organizations. 

HTTP:

Cordova / PhoneGap plugin for communicating with HTTP servers. Supports iOS and Android. 

Now let’s start, 

Once again, make sure you have setup project for start this article. 

Install and configure HTTP plugin:

Follow below mentioned steps. 

Step 1:

We have ionic app so we can move forward. First install a HTTP plugin to our ionic app using following steps. Note this is not predefined http so don’t compare with angular http this one is different so need to install following steps. Mainly it is used to solve Access Control Allow Origin Error. If you don’t have HTTP you will be able to face access control origin error. 

ionic cordova plugin add cordova-plugin-advanced-http 

npm install --save @ionic-native/http 

install cordova plugin

Screenshots shows it’s already installed. If you already installed ignore this first step else you need to install above mentioned steps.

install cordova

Step 2:

Now we have successfully installed plugins so we need to add HTTP Object to our app module file.

            app.module.ts file

//here importing one lines for access HTTP plugin to our app.

import { HTTP } from '@ionic-native/http';

@NgModule({

            providers: [
            //here added class to our provider service block

   HTTP

           ]

})

export class AppModule { }

Step 3:

            Now it’s time to integrate with app component part in our app.

app.component.ts file

import { HTTP } from '@ionic-native/http';

public AccessTokenURL = "https://login.microsoftonline.com/common/oauth2/token";

constructor(

        private http: HTTP

    ) {

            //here calling sample. You can call whenever you want;

this. getAccessToken(localStorage.getItem(‘AuthCode’);

  }

//Here in this method is used to get access token for SharePoint Site we need to pass our auth code value. If you don’t know follow my previous mentioned article for get auth code result.

getAccessToken(authCode) {

    let reqData = {

      'client_id': ‘2c3c3de8-aaaaa-bbbbbb-ccccc’, //here need to pass your client id

      'grant_type': 'authorization_code', //here is which type of way you have to doing for get token we used auth code.

      'code': authCode, //here you need to pass auth code value

      'resource': ‘https://example.sharepoint.com’ //here you need to pass your site url

      'redirect_uri': 'urn:ietf:wg:oauth:2.0:oob',

    }

    this..getAccessToken(reqData);

  }

//Here in this method is used to get Refresh Token for SharePoint Site
getRefressToken() {

    let reqData = {

      'client_id': ‘2c3c3de8-aaaaa-bbbbbb-ccccc’, //here you need to pass your client id here

      'grant_type': 'refresh_token',    //here mentioned as refresh token default

      'refresh_token': localStorage.getItem("refereshToken"), //here you have to pass previous refresh token value

      'resource': ‘https://example.sharepoint.com/’,  //here you need to pass your site url

      'redirect_uri': 'urn:ietf:wg:oauth:2.0:oob',

    }

    this.getAccessToken(reqData)

  }

//This method is common for access both above mentioned methods.

getToken(requestData) {           

        let headers = {

            'Content-Type': 'application/x-www-form-urlencoded'

        };

        this.http.post(this..AccessTokenURL, requestData, headers)

        .then((result:any) => {

            if(result){

                debugger;

                console.log("Response",JSON.parse(result.data));

                //here set token value as internal storage future purpose.

                localStorage.setItem("token",JSON.parse(result.data).access_token);   

                //here set refresh token value as internal storage future purpose.

                localStorage.setItem("refereshToken",JSON.parse(result.data).refresh_token);                

            }         

        })     

        .catch((error) => {

            console.log(error);

        });

    }

Screenshots :

outlook signinoffice365 signinIonic Creation

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

You will be able to get these below shown screenshot data.

SharePoint access token

From above screenshot you will be able to understand what the response are you received. In SharePoint access token only available for above mentioned expires_in field time. Once expired we need to again get token. So, we have already mentioned refresh token method so we can use for every time once token is expired.

↓ Download Source Code Here

For more reference, we have added full source code as attachments. Download and do npm install. This command will install all dependencies for project.  Further details visit official website. 

HTTP:

 https://ionicframework.com/docs/native/http/

Summary:

In this article, we discussed how to get access token and refresh token for SharePoint from ionic 3 mobile app using native ionic HTTP plugin. Using this result token we can see next article How to Get Site Users Details SharePoint from Ionic 3 Mobile App. The aforementioned article is very important for performing Rest Api in SharePoint.

If you have any questions/issues about this article, please let me know in comments.