Post
Ask Question

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

Ionic is an open source and popular cross-platform mobile app framework, that helps to develop or build hybrid mobile apps quicklyly and easily. It saves a lot of time and money.

This article demonstrates how to authenticate with SharePoint & Office 365 from Ionic 3 mobile app using a native In-App Browser plugin. This is the base article for starting SharePoint from Ionic 3 mobile apps.

The following tools and requirements should be in place before starting this article.

Once we have  installed Node.js, we can install other tools on the terminal or command line. Run the following commands step by step.

npm install -g ionic cordova

Once the installation is finished, let’s start creating an Ionic 3 app.

Create Ionic 3 app

Open your node.js terminal and open a specific location to create the Ionic 3 app. Start a new Ionic project using ionic start command,

ionic start TestApp

This command will take a few minutes because it installs all the dependencies and modules to a project.

Now, change the location to TestApp.

cd TestApp

Once you've changed the location to TestApp, add Android platform to your app.

ionic cordova platform add android
ionic cordova platform add browser (For Browser)

Now, run the project using the following commands.

ionic serve (For Browser)
ionic cordova run android (For Device)

Make sure you have connected device and settings and sdk tools has been set.

Now let’s start.

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.

In App Browser

In App Browser is a Cordova plugin that allows you to open a browser in your Cordova app or in our case Ionic app. This in app Browser can be used to open external URLs just like any normal web browser from your app.

Install and configure In App Browser and Splash screen

Follow below mentioned steps.

Step 1

Now we have the ionic app so we can move forward. First install an in app browser plugin to our ionic app using the following steps.

ionic cordova plugin add cordova-plugin-inappbrowser

npm install --save @ionic-native/in-app-browser

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

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

Second, we have used splash screen plugin for showing the loading part. If you don’t have it installed refer to the following steps. If you have already please skip this installation part.

ionic cordova plugin add cordova-plugin-splashscreen
npm install --save @ionic-native/splash-screen

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

Step 2

Now we have successfully installed plugins so we need to add In App Browser Object and Splash Screen Object to our app module file.

app.module.ts file

  1.     //here importing one lines for access In App Browser plugin to our app.  
  2. import { InAppBrowser } from '@ionic-native/in-app-browser';  
  3. import { SplashScreen } from '@ionic-native/splash-screen';  
  4. @NgModule({  
  5.     providers: [  
  6.     //here added class to our provider service block  
  7.    InAppBrowser,  
  8.    SplashScreen  
  9.            ]  
  10. })  
  11. export class AppModule { }  

Step 3

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

app.component.ts file

  1. import { InAppBrowser } from '@ionic-native/in-app-browser';  
  2. import { SplashScreen } from '@ionic-native/splash-screen';  
  3. //here injecting in app browser and splash screen class to our component part as object  
  4. constructor(  
  5. public iab: InAppBrowser,  
  6. public splashScreen: SplashScreen  
  7. ) {  
  8.    this.login();  
  9.  }  
  10.     login() {  
  11.     this.splashScreen.show();  
  12.   
  13.     const url = `https://login.microsoftonline.com/common/oauth2/authorize?client_id=`  
  14.       + “2c3c3de8-aaaaa-bbbbbb-ccccc”+ //here need to paste your client id  
  15.       `&response_type=code&redirect_uri=`  
  16.       + encodeURI("urn:ietf:wg:oauth:2.0:oob") + //here encoding redirect url using default function  
  17.       `&response_mode=query&resource=`  
  18.       + encodeURI("https://example.sharepoint.com") + //here encoding resource url using default function  
  19.       `&state=12345`;  
  20.    //here we create iab browser for login page.  
  21.     const browser = this.iab.create(url, '_blank', {  
  22.       location: 'no',  
  23.       zoom: 'no',  
  24.       hardwareback: 'no',  
  25.       clearcache: 'yes'  
  26.     });  
  27.   
  28.     browser.on("loadstart").subscribe((event) => {  
  29.       this.splashScreen.show();  
  30.     });  
  31.   
  32.     browser.on("loadstop").subscribe((event) => {  
  33.       this.splashScreen.hide();  
  34.       browser.show();  
  35.     });  
  36.   
  37.     browser.on("loaderror").subscribe((event) => {  
  38.       //here we have split our requiring part one.     
  39.       var result = event.url.split("code=");        
  40.       console.log("Authentication result", result);  
  41.       //here we have split our requiring part two.  
  42.       window["AuthResult"] = result[1].split('&')[0];       
  43.       // Authentication Code stored in local for future purpose.  
  44.       // It means get access token and refresh token for sharepoint.        
  45.       localStorage.setItem('AuthCode', window["AuthResult"]);    
  46.       browser.close();  
  47.     });  
  48.     browser.on("exit").subscribe(  
  49.       (event) => {  
  50.         //Below line for checking if closing event  
  51.         if (event) {  
  52.           if (event.type.toLowerCase() == 'exit') {  
  53.             if (localStorage.getItem("AuthCode") && localStorage.getItem("AuthCode") == 'cancel') {  
  54.               this.platform.exitApp();  //This line is used for close a app. In case not logged in.  
  55.               event.preventDefault();  
  56.               return true;  
  57.             }  
  58.           }  
  59.         }  
  60.       },  
  61.       (err) => {  
  62.         console.log("InAppBrowser Loadstop Event Error: " + err);  
  63.       }  
  64.     );  
  65.   }  

Screenshots

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

For more reference, I have added full source code as attachments. For further details visit official website.

In App Browser

https://ionicframework.com/docs/native/in-app-browser/

Splash Screen

https://ionicframework.com/docs/native/splash-screen/

Summary

In this article, I discussed about how to authenticate SharePoint & Office 365 from ionic 3 mobile app using native In App Browser plugin.

This is the base article for starting to  work with SharePoint using Ionic 3. Using this resulting Auth Code we will see in the next article how to get access token and refresh the token for SharePoint from Ionic 3. This is very important for performing Rest Api in SharePoint

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


Similar Articles