ng2-oauth2 v0.0.5

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

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();