gl-ionic-oauth-client
v1.0.2
Published
Geek Learning Ionic oAuth Client
Downloads
3
Keywords
Readme
Introduction
This is an OAuth npm component, which can used in any Ionic framework's application. There is a test app using this OAuth Service to show how to configure and use it.
Requirements
- npm
- ionic
- cordova-plugin-inappbrowser
How to configure
In your project folder, install this plugin using npm
npm install git+https://[email protected]/geeklearningio/gl-ionic-oauth-client.git --save
You can use the Typescript (
package/src/AuthenticationService.ts
) or the Javascript ((package/dist/AuthenticationService.js
)) version of the Service.In your application's main module, inject the dependency
gl-ionic-oauth-client
in order to use the Service.
angular.module('mainModuleName', ['ionic', 'gl-ionic-oauth-client']){
//
}
How to use
Init
Init the service by calling the init
function, giving the client-id and the url of your Login function of your OAuth server.
// TODO: change these fields to connect to your oAuth server
var clientId = "clientId";
var oauthUrl = "https://your-oauth-server/Login";
this.authenticationService.init(clientId, oauthUrl);
OAuth call
Call the handleOAuth
function with these params :
- Your API function that will give you the accessToken by getting the accessCode.
- the url and state of the page you want to go to when the Authentication has succeeded. (The url is needed to work in the web version of your app).
- the state to redirect to with the accessCode as a Query param.
var apiOAuthFunction = this.fakeAPIService.connect.bind(this.fakeAPIService);
var oauthRedirectState = 'main';
var successRedirectUrlAndState = {
state: 'success',
url: 'success'
};
this.authenticationService.handleOAuth(apiOAuthFunction, successRedirectUrlAndState, oauthRedirectUrl);
Useful functions and events
Success and Error events
This OAuth Service broadcasts success and error events to let you handle these properly:
this.$rootScope.$on(AuthenticationService.AuthenticationOAuthError, () => {
console.log('connecton error');
});
this.$rootScope.$on(AuthenticationService.AuthenticationOAuthSuccess, () => {
console.log('connecton succeeded');
});
Logout function
You can disconnect the user of your application by calling the logout
function that will clear the accessToken and the refreshToken of your cache. The parameter is the state to go to after the logout.
this.authenticationService.logout('main');
Refresh Token function
You can refresh your accessToken by using the refreshToken given by your API at your first login. Just call the refreshTokenOrLogout
that will refresh your token or logout if it fails doing so. You will have to pass it 2 params:
- the refreshToken function of your API.
- the state to got to after the logout.
var apiRefreshTokenFunction = this.fakeAPIService.refreshToken.bind(this.fakeAPIService);
this.authenticationService.refreshTokenOrLogout(apiRefreshTokenFunction, 'main').then((result) => {
this.newAccessToken = result.data.content.accessToken;
});
How to use the test app
the test app does not have the package as a dependency. It allows you to make changes directly to the package and use it in your test app.
You need to link the package locally.
At the root of the project (containing the package
and the test-app
folders) type this in the terminal:
npm link
It will add gl-ionic-oauth-client
as a global npm module.
Then go in the test-app folder and type this:
npm link gl-ionic-oauth-client
It will link it to the test-app.