Native Typescript Keycloak library for angular2/4.
To install this library, run:
$ npm install @ebondu/angular2-keycloak --saveTo generate all *.js, *.js.map and *.d.ts files:
$ npm run tscTo lint all *.ts files:
$ npm run lintDeclare 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));
}
...
}See angular2-webpack-product-app
Apache2 © ebondu
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent