ng2-oauth2

This package provides a Oauth2 and OpenId Connect implicit flow module for Angular2.

This is a work in progress !!

It has been largely ispired from :

• oauth-ng
• angular2-oauth2
• ng2-translate for packaging

Usage example

Into main.ts:

import { OAUTH2_PROVIDERS } from 'ng2-oauth2/ng2-oauth2';
...
bootstrap(
    ...
    OAUTH2_PROVIDERS
);

Into your main application component:

import { Oauth2Service } from 'ng2-oauth2/ng2-oauth2';
 
export class AppComponent {
    constructor(private oauth2service: Oauth2Service) {
        this.oauth2service.init({
            site: 'https://my.oauth.server.site.com',
            redirectUri: 'http://localhost:3000',
            clientId: 'xxxxxxxxxxxxxxxxxxxxxx',
            wellKnown: true,
            issuer: 'https://my.oauth.server.site.com',
            scope: 'openid profile',
            responseType: 'token id_token',
            useNonce: true,
            profileUri: 'https://my.oauth.server.site.com/oauth/me/',
            destroyTokenPath: '/oauth/destroy/'
        });
    }
}

Into your authentication component (I use it in my navbar):

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Oauth2Service } from 'ng2-oauth2/ng2-oauth2';
 
...
 
@Component({
    selector: 'my-navbar',
    templateUrl: 'app/shared/navbar/navbar.html',
    directives: [ROUTER_DIRECTIVES, CORE_DIRECTIVES]
})
export class NavbarComponent implements OnInit, OnDestroy {
    public profile = {};
    public loggedin = false;
 
    // Injects the service into the component
    constructor(private oAuthService: Oauth2Service, private location: Location) {}
 
    ngOnInit() {
        // Suscribe to interesting events
        Oauth2Service.Authorized.subscribe(item => {
            console.log('Authorized event captured ', item.token);
            this.loggedin = true;
        });
        Oauth2Service.LoggedOut.subscribe(item => {
            console.log('Logged out event captured');
            this.loggedin = false;
            this.profile = {};
        });
        Oauth2Service.Profile.subscribe(item => {
            console.log('Profile event captured');
            this.profile = item.profile;
        });
 
        // At load, tries to login (If contains fragments with "access_token")
        this.oAuthService.tryLogin();
    }
 
    ngOnDestroy() {
        Oauth2Service.LoggedIn.unsubscribe();
        Oauth2Service.Profile.unsubscribe();
        Oauth2Service.Authorized.unsubscribe();
    }
 
    login() {
        this.oAuthService.login(this.location.href);
    }
 
    logout() {
        this.oAuthService.logout();
    }
}

Initialization parameters

Param	type	default	Usage
site	string	undefined	Oauth / OpenId Connect site
redirectUri	string	undefined	Uri for redirection after login
authorizePath	string	'/oauth/authorize'	authorize endpoint
tokenPath	string	'/oauth/token'	token endpoint
destroyTokenPath	string	undefined	token destruction endpoint (called with header 'Authorization: Bearer %access_token%')
responseType	string	'token'	oauth response type ('token id_token' for OpenId Connect)
storage	Storage	sessionStorage	Storage for token, OIDC configuration. Can be sessionStorage or localStorage
profileUri	string	undefined	endpoint to get user Profile in JSON format
generateState	boolean	false	generate or not a state param for request
useNonce	boolean	false	generate or not a nonce param for request (mandatory for OpenId Connect)
issuer	string	undefined	Server where to get OpenIdConnect configuration
wellKnown	bool	false	use OpenId Connect .well-known/configuration endpoint to get informations about the server
logOutPath	string	undefined	If set, user will be redirected to this url to logout the Oauth server
state	string	undefined	set the state to this value in the oauth request
nonce	string	undefined	set the nonce to this value in the oauth request

Observable events

Events are triggered through static objects of service.

For instance:

// Emit event
Oauth2Service.Profile.emit({profile: profileObject});
 
// Subscribe to event
Oauth2Service.Profile.subscribe(
    (item) => console.log('Profile is: ', item.profile);
 
// Unsubscribe to event
Oauth2Service.Profile.unsubscribe();

Event	Observed object	Description
Login	{}	Triggered when user calls the "login()" function
Logout	{}	Triggered when user calls the "logout()" function
LoggedIn	{token: tokenObject}	Triggered when user successfully logs in
Authorized	{token: tokenObject}	Triggered when user is authenticated (from session or hash parameters)
LoginError	{}	Triggered when user login fails
LoggedOut	{}	Triggered when user is not authenticated (no hash parameters, no session data)
TokenExpired	{}	Triggered when the user token is expired
TokenDestroyed	{}	Triggered when the user token is destroyed
TokenDestroyError	{error: errorName, error_description: errorDescriptionString }	Triggered when the user token destruction fails
Profile	{profile: profileObject}	Triggered when the user profile is set from the profileUri
ProfileError	{error: errorName, error_description: errorDescriptionString }	Triggered when the user profile fails
OIDCConfig	{config: configObject}	Triggered when the OIDC config is set from the server
OIDCKeys	{config: configObject}	Triggered when the OIDC keys are set from the server
OIDCConfigError	{error: errorName, error_description: errorDescriptionString }	Triggered when the OIDC config fails
OIDCKeysError	{error: errorName, error_description: errorDescriptionString }	Triggered when the OIDC keys fails