Giter Club home page Giter Club logo

angular2-keycloak's Introduction

angular2-keycloak

Native Typescript Keycloak library for angular2/4.

Installation

To install this library, run:

$ npm install @ebondu/angular2-keycloak --save

Development

To generate all *.js, *.js.map and *.d.ts files:

$ npm run tsc

To lint all *.ts files:

$ npm run lint

Usage

Declare Keycloak module in angular app :

import { Ng2KeycloakModule } from '@ebondu/angular2-keycloak';
...

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    Ng2KeycloakModule
  ],
  providers: [
    ...
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

To login

import { Keycloak } from '@ebondu/angular2-keycloak';
...

export class MyLoginClass implements OnInit {

  public parsedToken: any;
  public isAuthenticated: boolean;
  public profile: any;

  constructor( private keycloak: Keycloak) {
    Keycloak.authenticatedObs.subscribe(auth => {
      this.isAuthenticated = auth;
      this.parsedToken = Keycloak.tokenParsed;

      console.info('APP: authentication status changed...');
    });
    this.keycloak.init({});
  }

  ngOnInit() {
    // Configure the Keycloak
    Keycloak.config = 'assets/keycloak.json';

    // Initialise the Keycloak
    this.keycloak.init({
      checkLoginIframe: false
    });
  }

  login() {
    Keycloak.login({});
  }

  logout() {
    Keycloak.logout({});
  }

  loadProfile() {
    Keycloak.loadUserProfile().subscribe(profile => {
      this.profile = profile;
    });
  }

  ...
}

Please, use Http interface to get access to Keycloak http proxy (authentication / authorization). Angular will inject the right provider class for you.

import { Http } from '@angular/http';
...

@Injectable()
export class MyClass {
    // Angualar will inject the instance of the KeycloakHttp class
    constructor(private http: Http) {}

    callAPI(): Observable<MyObject> {

      let headers = new Headers({'Accept' :'application/json'});
      let options: RequestOptionsArgs = { headers: headers };
        return this.http.get("http://localhost/myAPI/myMethod",  options)
            .map(res => res.json())
            .catch(err => handleError(err));
     }
     ...
}

Example

See angular2-webpack-product-app

License

Apache2 © ebondu

angular2-keycloak

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.