Written by

MuthuKumar

Share

  

Category

see all categories
intranet as a service

How to Authenticate SharePoint & Office 365 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 save time and money for the investor.

This piece attempts to show the reader how to authenticate with SharePoint & Office 365 from ionic 3 mobile app using native In App Browser plugin. This article is the beginner’s guide to start SharePoint from ionic 3 mobile app.

Have the following tools handy before starting with this guide:

 Node js
 Latest Ionic 3 CLI
 Latest Cordova
 Node Command Line Window (Windows) or Terminal (OS X, Linux)
 Text Editor or IDE (e.g. Visual Studio Code, Atom,)

Once you install the Node.js, we would be able to install other tools on terminal or command line. Run these following commands step by step:

npm install -g ionic cordova

Once the installation is finished, let’s begin with the process of 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 dependencies and modules into a project.

Now change location to a TestApp

cd TestApp

Once changed a location TestApp, Add android platform to our app.

ionic cordova platform add android

ionic cordova platform add browser (For Browser)

Now run the project using following command.

                ionic serve (For Browser)

ionic cordova run android (For Device)

Make sure you have the connected device and settings and see to that the sdk tools have 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: 

We have the ionic app so we can move forward. First install a In App Browser plugin to our ionic app using following steps:

ionic cordova plugin add cordova-plugin-inappbrowser

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

Ionic nativ

Ionicnativ

We have used splash screen plugin for the show loading part. If you don’t have install using 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

ionic-native splash

ionic-nativesplash

Step2:

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

//here importing one lines for access In App Browser plugin to our app.

import { InAppBrowser } from '@ionic-native/in-app-browser';

import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({

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

   InAppBrowser,

   SplashScreen

           ]

})

export class AppModule { }

Step 3:

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

app.component.ts file

import { InAppBrowser } from '@ionic-native/in-app-browser';

import { SplashScreen } from '@ionic-native/splash-screen';

//here injecting in app browser and splash screen class to our component part as object

constructor(

public iab: InAppBrowser,

public splashScreen: SplashScreen

) {
   this.login();
 }

            login() {

    this.splashScreen.show();

    const url = `https://login.microsoftonline.com/common/oauth2/authorize?client_id=`

      + “2c3c3de8-aaaaa-bbbbbb-ccccc”+ //here need to paste your client id

      `&response_type=code&redirect_uri=`

      + encodeURI("urn:ietf:wg:oauth:2.0:oob") + //here encoding redirect url using default function

      `&response_mode=query&resource=`

      + encodeURI("https://example.sharepoint.com") + //here encoding resource url using default function

      `&state=12345`;

   //here we create iab browser for login page.

    const browser = this.iab.create(url, '_blank', {

      location: 'no',

      zoom: 'no',

      hardwareback: 'no',

      clearcache: 'yes'

    });

    browser.on("loadstart").subscribe((event) => {

      this.splashScreen.show();

    });

    browser.on("loadstop").subscribe((event) => {

      this.splashScreen.hide();

      browser.show();

    });

    browser.on("loaderror").subscribe((event) => {

    //here we have split our requiring part one.  

      var result = event.url.split("code=");     

      console.log("Authentication result", result);

      //here we have split our requiring part two.

      window["AuthResult"] = result[1].split('&')[0];    

      // Authentication Code stored in local for future purpose.

      // It means get access token and refresh token for sharepoint.     

      localStorage.setItem('AuthCode', window["AuthResult"]); 

      browser.close();

    });

    browser.on("exit").subscribe(

      (event) => {

        //Below line for checking if closing event

        if (event) {

          if (event.type.toLowerCase() == 'exit') {

            if (localStorage.getItem("AuthCode") && localStorage.getItem("AuthCode") == 'cancel') {

              this.platform.exitApp();  //This line is used for close a app. In case not logged in.

              event.preventDefault();

              return true;

            }

          }

        }

      },

      (err) => {

        console.log("InAppBrowser Loadstop Event Error: " + err);

      }

    );

  }

Screenshots :

outlook signin

office365 signin

 

 

 

 

 

 

 

Ionic Creation

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

For more reference, we have added full source code as attachments. 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, we discussed how to authenticate SharePoint & Office 365 from ionic 3 mobile app using native In App Browser plugin.

            This is the beginner’s article for working on SharePoint using Ionic 3. Using this result Auth Code we can see next article How to Get Access Token and Refresh Token for SharePoint from Ionic 3. The aforementioned article is very important for performing Rest Api in SharePoint

↓ Download Source Code Here

If you have any questions/issues about this article, please let type them out in the comment section.