Merge pull request #2 from ebondu/ng4

Ng4

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -1,44 +1,6 @@
-#################
-## Misc
-#################
-**/.DS_Store
-nbproject
-manifest.mf
-build.xml
-node_modules/*
+.idea/
+.DS_Store
+node_modules/
+coverage/
 npm-debug.log
-*.js
-!config/*
-!karma.conf.js
-!webpack.config.js
-*.map
-*.d.ts
-!make.js
-coverage
-*.metadata.json
-bundles
-.vscode
-
-#################
-## JetBrains
-#################
-.idea
-.project
-.settings
-
-############
-## Windows
-############
-
-# Windows image file caches
-Thumbs.db
-
-# Folder config file
-Desktop.ini
-
-############
-## Mac
-############
-
-# Mac crap
-.DS_Store
+dist/

.npmignore

@@ -22,3 +22,9 @@ Desktop.ini
 # Mac
 .DS_Store
 **/.DS_Store
+
+/compiled
+
+# or
+
+*.ngFactory.ts

.npmrc

@@ -0,0 +1 @@
+save-prefix=^

.travis.yml

@@ -1,4 +1,21 @@
 language: node_js
-sudo: false
+
 node_js:
-- '4.2.1'
+- '8'
+
+script: npm test
+
+notifications:
+  email: false
+
+cache:
+  directories:
+    - node_modules
+
+after_success:
+- npm run codecov
+
+addons:
+  chrome: stable
+
+dist: trusty

.yo-rc.json

@@ -0,0 +1,14 @@
+{
+  "generator-angular-library": {
+    "githubUsername": "ebondu@gmail.com",
+    "githubRepoName": "ngx-keycloak",
+    "npmModuleName": "ngx-keycloak",
+    "moduleGlobal": "ngxKeycloak",
+    "ngModuleName": "NgxKeycloakModule",
+    "selectorPrefix": "component",
+    "projectTitle": "ngx keycloak",
+    "projectDescription": "An angular keycloak wrapper",
+    "authorName": "ebondu",
+    "packageManager": "npm"
+  }
+}

README.md

@@ -1,6 +1,6 @@
 # angular2-keycloak
 
-Native Typescript Keycloak library.
+Native Typescript Keycloak library for angular2/4.
 
 ## Installation
 
@@ -15,29 +15,24 @@ $ npm install @ebondu/angular2-keycloak --save
 To generate all `*.js`, `*.js.map` and `*.d.ts` files:
 
 ```bash
-$ npm run tsc
-```
-
-To lint all `*.ts` files:
-
-```bash
-$ npm run lint
+$ npm run build:dist
 ```
 
 ## Usage
 
 Declare Keycloak module in angular app :
 
 ```javascript
-import { Ng2KeycloakModule } from '@ebondu/angular2-keycloak';
+import { KeycloakModule } from '@ebondu/angular2-keycloak';
 ...
 
 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
-    Ng2KeycloakModule
+    HttpModule,
+    KeycloakModule.forRoot()
   ],
   providers: [
     ...
@@ -52,7 +47,7 @@ export class AppModule { }
 To login
 
 ```javascript
-import { Keycloak } from '@ebondu/angular2-keycloak';
+import { Keycloak, KeycloakAuthorization } from '@ebondu/angular2-keycloak';
 ...
 
 export class MyLoginClass implements OnInit {
@@ -61,36 +56,39 @@ export class MyLoginClass implements OnInit {
   public isAuthenticated: boolean;
   public profile: any;
 
-  constructor( private keycloak: Keycloak) {
+  constructor( private keycloak: Keycloak, private keycloakAuthz: KeycloakAuthorization) {
     Keycloak.authenticatedObs.subscribe(auth => {
       this.isAuthenticated = auth;
-      this.parsedToken = Keycloak.tokenParsed;
+      this.parsedToken = this.keycloak.tokenParsed;
 
       console.info('APP: authentication status changed...');
     });
-    this.keycloak.init({});
   }
 
   ngOnInit() {
     // Configure the Keycloak
-    Keycloak.config = 'assets/keycloak.json';
+    this.keycloak.config = 'assets/keycloak.json';
 
     // Initialise the Keycloak
+    this.keycloakAuthz.init();
+
     this.keycloak.init({
       checkLoginIframe: false
     });
   }
 
   login() {
+    // you should pass your login options
     Keycloak.login({});
   }
 
   logout() {
+    // you should pass your logout options
     Keycloak.logout({});
   }
 
   loadProfile() {
-    Keycloak.loadUserProfile().subscribe(profile => {
+    this.keycloak.loadUserProfile().subscribe(profile => {
       this.profile = profile;
     });
   }
@@ -100,21 +98,22 @@ export class MyLoginClass implements OnInit {
 ```
 
 Please, use Http interface to get access to Keycloak http proxy (authentication / authorization). 
-Angular will inject the right provider class for you.
+Angular will inject the right provider class for you. Notes that init() methodes for Keycloak and KeycloakAuthz needs to be called first (i.e. in ngOnInit()).
+To pass the Keycloak authorization header, use the 'withCredentials' option.
 
 ```javascript
 import { Http } from '@angular/http';
 ...
 
 @Injectable()
 export class MyClass {
-    // Angualar will inject the instance of the KeycloakHttp class
+    // Angular 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 };
+      let options: RequestOptionsArgs = { headers: headers, withCredentials: true  };
         return this.http.get("http://localhost/myAPI/myMethod",  options)
             .map(res => res.json())
             .catch(err => handleError(err));

custom-typings.d.ts

@@ -0,0 +1,6 @@
+declare module 'fork-ts-checker-webpack-plugin';
+declare module 'webpack-angular-externals';
+declare module 'webpack-rxjs-externals';
+declare module 'webpack-config-utils';
+declare module 'offline-plugin';
+declare module '@mattlewis92/webpack-karma-die-hard';

example/angular2-webpack-product-app/src/app/app.module.ts

@@ -18,7 +18,7 @@ import { removeNgStyles, createNewHosts } from '@angularclass/hmr';
     BrowserModule,
     HttpModule,
     FormsModule,
-    Ng2KeycloakModule,
+    Ng2KeycloakModule.forRoot(),
     routing
   ],
   declarations: [

example/angular2-webpack-product-app/src/app/home/home.component.ts

@@ -1,4 +1,4 @@
-import { Response, Http } from '@angular/http';
+import { Response, Http, Headers, RequestOptionsArgs } from '@angular/http';
 import { Component, OnInit } from '@angular/core';
 import { Keycloak, KeycloakAuthorization } from '@ebondu/angular2-keycloak';
 import 'rxjs/operator/map';
@@ -55,9 +55,11 @@ export class HomeComponent implements OnInit {
   }
 
   reloadData() {
+    let headers = new Headers({ 'Content-Type': 'application/json', 'Accept' :'application/json'});
+    let options: RequestOptionsArgs = { headers: headers, withCredentials: true };
 
     // change regarding your backend address
-    this.http.get('/database/products')
+    this.http.get('/database/products', options)
       .map((res: Response) => res.json())
       .subscribe(prods => this.products = prods,
         error => console.log(error));

example/angular2-webpack-product-app/src/public/angular2-product/keycloak.json

@@ -0,0 +1,7 @@
+{
+  "realm": "demo",
+  "auth-server-url": "/auth",
+  "ssl-required": "external",
+  "resource": "angular2-product",
+  "public-client": true
+}