Use ng2-cordova-oauth For All Your Ionic Oauth Needs

Previously I wrote about using Oauth within an Ionic 2 mobile application. However, for the typical user that can be a real hassle because it by far isn’t short. This is why I created the library ng2-cordova-oauth on GitHub. This library has numerous web service providers bundled in, making the authentication flow as short as three lines of code.

Now some of you might be familiar with the ng-cordova-oauth library that I wrote for Ionic Framework 1. That library was designed to work with Apache Cordova and AngularJS. This time around I did the same thing for Angular and Apache Cordova.

Let’s take a look at how easy this new library really is.

Before I start, let me start by saying that ng2-cordova-oauth works great for Angular JavaScript and Angular TypeScript applications. You have the freedom of choice on how to use it! Let me also state that this library will not work in your web browser and it probably won’t work with Ionic Serve or Ionic View. The reason for this is that these services alter how the application runs, which isn’t good for us. If you know me, you know that I avoid the web browser, Ionic Serve, and Ionic View like the plague.

With that out of the way, let’s create a new project. From the Command Prompt (Windows) or Terminal (Mac and Linux), execute the following commands:

ionic start ExampleProject blank --v2
cd ExampleProject
ionic platform add ios
ionic platform add android

A few important things to note. First, you must be using the Ionic CLI that supports Ionic 2. Second you must be using a Mac if you want to add and build for the iOS platform.

Next up, our application relies on the Apache Cordova InAppBrowser. It can be added like the following:

ionic plugin add cordova-plugin-inappbrowser

Finally we need to install the ng2-cordova-oauth library. To install this library, execute the following from the Terminal or Command Prompt, with the project as your current working directory:

npm install ng2-cordova-oauth --save

We can now start coding!

We’ll be spending all our time in two files. The app/pages/home/home.html file will contain our UI and the app/pages/home/home.ts file will contain our logic.

Let’s start with the UI file. Open app/pages/home/home.html and change it to the following:

<ion-header>
    <ion-navbar>
        <ion-title>Oauth Project</ion-title>
    </ion-navbar>
</ion-header>

<ion-content padding>
    <button (click)="login()">Facebook Login</button>
</ion-content>

Essentially we have a screen with a button on it. When the button is clicked, the login() function is executed. This function will be found in our logic file.

Now open your project’s app/pages/home/home.ts file and change it to the following:

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';
import { CordovaOauth, Facebook } from "ng2-cordova-oauth/core";

@Component({
    templateUrl: 'build/pages/home/home.html'
})
export class HomePage {

    public oauth: CordovaOauth;
    private provider: Facebook;

    public constructor(public navCtrl: NavController, private platform: Platform) {
        this.oauth = new CordovaOauth();
        this.provider = new Facebook({
            clientId: "CLIENT_ID_HERE",
            appScope: ["email"]
        });
    }

    public login() {
        this.platform.ready().then(() => {
            this.oauth.logInVia(this.provider).then((success) => {
                alert(JSON.stringify(success));
            }, (error) => {
                console.log(JSON.stringify(error));
            });
        });
    }

}

First we are importing the appropriate classes. Inside the constructor we initialize the CordovaOauth object to use Facebook and pass in the configuration options.

When the login() function is executed we first make sure the app is ready. This is necessary when trying to use Apache Cordova plugins to prevent errors. When the app is ready, we call login, which is asynchronous. When the flow finishes or fails, we’ll know about it.

In case you’re wondering where the clientId came from, it is from the Facebook Developer Dashboard. In order to use Facebook, like most providers, you’ll need to configure an app with them.

Conclusion

We saw how to manually design authentication workflows, but the simpler and recommended way would be to use the ng2-cordova-oauth library that I created. This Angular library is similar to my AngularJS wrapper, but now works for Angular JavaScript and Angular TypeScript. Just to be clear, this library works with providers beyond Facebook.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.