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.

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 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

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

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

//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

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.

12 Comments

Join the conversation! Your thoughts help the community grow.

sankar m4y ago
Is this still work in ionic6?
carlos v5y ago
Nice job, is this still valid for Ionic 5? would suppose yes, but just wondering.
suraj patil7y ago
Can you please explain how have you got client id? Is it tenant id or the id of app created in azure.
Payneau Jocelyn8y ago
Hello, when running this code in android emulator it does not work. I have some js errors : Error: Uncaught (in promise): TypeError: browser.on(...).subscribe is not a functionTypeError: browser.on(...).subscribe is not a function
- Muthu Kumar8y ago
  This may help to you. https://stackoverflow.com/questions/44328762/ionic-2-inappbrowser-browser-on-subscribe-is-not-a-function-error
Sanjib Mukherjee8y ago
Actually browser.on("loaderror") is not closing the browser and not setting the rootpage to the homepage
Sanjib Mukherjee8y ago
What I will set in the redirectURl encode uri part? Please clarify
- Muthu Kumar8y ago
  Thanks for your reply. You don't need to change anything. Please pass like this is predefined one encodeURI("urn:ietf:wg:oauth:2.0:oob").
Ravishankar N8y ago
Nice Article .
- Muthu Kumar8y ago
  Thanks Ravi
Jayakumar Balasubramaniam8y ago
Nice Article..
- Muthu Kumar8y ago
  Thanks Jayakumar