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 quickly and easily. 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 apps using native HTTP plugin. This article is continued from my previous article.

• How To Authenticate SharePoint And Office 365 From Ionic 3 Mobile App

Make sure you have the above-mentioned article authentication part implementation in your ionic 3 apps. If not, please visit that article and take a look and download the source code for npm install. This command will install all dependencies for the project. 

Introduction

SharePoint

SharePoint is 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 to set up a project to start this article.

Install and Configure HTTP plugin

Follow the steps mentioned below.

Step 1

We have an ionic app so we can move forward. First, install an HTTP plugin to our ionic app using the following steps. Note this is not predefined HTTP, so don’t compare it with Angular HTTP. Mainly it is used to solve the Access Control Allow Origin Error. 

• ionic cordova plugin add cordova-plugin-advanced-http
• npm install --save @ionic-native/http

 

Screenshots show that it is already installed. If you have already installed then ignore this first step.

 

 

Step 2

Now, we have successfully installed the 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 to follow my previously 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

     

You will be able to get the below-shown screenshot data.

 

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

For more reference, we have added the full source code as attachments. Download and do npm install. This command will install all dependencies for the project. For further details visit the 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 apps using a native ionic HTTP plugin. Using this result token we will see in the next article "How to Get Site Users Details for SharePoint from Ionic 3 Mobile Apps." 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.