npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gl-ionic-oauth-client

v1.0.2

Published

Geek Learning Ionic oAuth Client

Downloads

7

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

How to configure

  1. In your project folder, install this plugin using npm npm install git+https://[email protected]/geeklearningio/gl-ionic-oauth-client.git --save

  2. You can use the Typescript (package/src/AuthenticationService.ts) or the Javascript ((package/dist/AuthenticationService.js)) version of the Service.

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