intellica-ng2-cordova-oauth v0.0.6
Angular 2 Cordova Oauth
ng2-cordova-oauth is an Angular 2 Apache Cordova Oauth library. The purpose of this library is to quickly and easily obtain an access token from various web services to use their APIs.
Requirements
- Apache Cordova 5+
- Apache Cordova InAppBrowser Plugin
- Apache Cordova Whitelist Plugin
Installing ng2-cordova-oauth Into Your Project
Installing
From the root of your Apache Cordova project, execute the following:
npm install ng2-cordova-oauth --save
This will install ng2-cordova-oauth and its dependencies.
Injecting:
Once installed, you need to inject the library classes into every class in which you wish to use them. For example, if you wish to use Facebook oauth in a particular class, it would look something like:
import {CordovaOauth, Facebook, Google} from 'ng2-cordova-oauth/core';
Each provider will have it's own class. At this point, ng2-cordova-oauth is installed into your project and is ready for use.
Using ng2-cordova-oauth In Your Project
Each web service API acts independently in this library. However, when configuring each web service, one thing must remain consistent. You must use http://localhost/callback as your callback / redirect URI. This is because this library will perform tasks when this URL is found.
Currently it supports several oAuth providers: Facebook, Instagram, LinkedIn, Google, Meetup, Imgur. Example of creating oAuth provider:
const provider = new Facebook({
clientId: string,
appScope?: string[],
redirectUri?: string,
responseType?: string,
authType?: string
});
Each API call returns a promise. The success callback will provide a response object and the error callback will return an Error
object. Not all providers use implicit grants. Any provider that uses an explicit grant will return a code
rather than an access_token
. The code
must be
further exchanged server side for an access_token
. This is for the safety of your users.
const oauth = new CordovaOauth();
const provider = new Facebook({
clientId: "CLIENT_ID_HERE",
appScope: ["email"]
})
oauth.logInVia(provider).then((success) => {
console.log(JSON.stringify(success));
}, (error) => {
console.log(JSON.stringify(error));
});
As of Apache Cordova 5.0.0, the whitelist plugin must be used in order to reach external web services.
This library will NOT work with a web browser, ionic serve, or ionic view. It MUST be used via installing to a device or simulator.
A Working Example
import {Component} from '@angular/core';
import {NavController, Platform} from 'ionic-angular';
import {CordovaOauth, Facebook, Google, LinkedIn} from "ng2-cordova-oauth/core";
@Component({
templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
private cordovaOauth: CordovaOauth = new CordovaOauth();
private facebookProvider: Facebook = new Facebook({
clientId: "CLIENT_ID_HERE",
appScope: ["email"]
})
constructor(private navCtrl: NavController, private platform: Platform) { }
public facebook() {
this.cordovaOauth = new CordovaOauth();
this.platform.ready().then(() => {
this.cordovaOauth.logInVia(this.facebookProvider).then(success => {
console.log("RESULT: " + JSON.stringify(success));
}, error => {
console.log("ERROR: ", error);
});
});
}
}
Version History
Coming soon...
Contribution Rules
All contributions must be made via the development
branch. This keeps the project more maintainable in terms of versioning as well as code control.
Have a question or found a bug (compliments work too)?
This project is maintained by Nic Raboy.
Tweet Nic Raboy on Twitter - @nraboy
Resources
Ionic 2 - http://www.ionicframework.com
Angular 2 - https://www.angular.io
Apache Cordova - http://cordova.apache.org
Nic Raboy's Code Blog - https://www.thepolyglotdeveloper.com
8 years ago