,
8 | RedirectTo?: string | Function
9 | }
--------------------------------------------------------------------------------
/src/app/forbidden/forbidden.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/czetsuya/keycloak-angular-auth/6bd4a69372270d18f9549cfe6354339d13611b1e/src/app/forbidden/forbidden.component.css
--------------------------------------------------------------------------------
/src/app/forbidden/forbidden.component.html:
--------------------------------------------------------------------------------
1 |
2 | forbidden works!
3 |
4 |
--------------------------------------------------------------------------------
/src/app/forbidden/forbidden.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-forbidden',
5 | templateUrl: './forbidden.component.html',
6 | styleUrls: ['./forbidden.component.css']
7 | })
8 | export class ForbiddenComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/group-restricted/group-restricted-home/group-restricted-home.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/czetsuya/keycloak-angular-auth/6bd4a69372270d18f9549cfe6354339d13611b1e/src/app/group-restricted/group-restricted-home/group-restricted-home.component.css
--------------------------------------------------------------------------------
/src/app/group-restricted/group-restricted-home/group-restricted-home.component.html:
--------------------------------------------------------------------------------
1 | This is a secured module home page.
2 |
--------------------------------------------------------------------------------
/src/app/group-restricted/group-restricted-home/group-restricted-home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-group-restricted-home',
5 | templateUrl: './group-restricted-home.component.html',
6 | styleUrls: ['./group-restricted-home.component.css']
7 | })
8 | export class GroupRestrictedHomeComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/group-restricted/group-restricted-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 |
4 | import { GroupRestrictedHomeComponent } from './group-restricted-home/group-restricted-home.component';
5 |
6 | const routes: Routes = [
7 | { path: '', component: GroupRestrictedHomeComponent }
8 | ];
9 |
10 | @NgModule( {
11 | imports: [RouterModule.forChild( routes )],
12 | exports: [RouterModule]
13 | } )
14 | export class GroupRestrictedRoutingModule { }
15 |
--------------------------------------------------------------------------------
/src/app/group-restricted/group-restricted.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { GroupRestrictedRoutingModule } from './group-restricted-routing.module';
5 | import { GroupRestrictedHomeComponent } from './group-restricted-home/group-restricted-home.component';
6 |
7 | @NgModule({
8 | imports: [
9 | CommonModule,
10 | GroupRestrictedRoutingModule
11 | ],
12 | declarations: [GroupRestrictedHomeComponent]
13 | })
14 | export class GroupRestrictedModule { }
15 |
--------------------------------------------------------------------------------
/src/app/home/home.component.css:
--------------------------------------------------------------------------------
1 | .center {
2 | margin: auto;
3 | width: 50%;
4 | border: 3px solid green;
5 | padding: 10px;
6 | }
--------------------------------------------------------------------------------
/src/app/home/home.component.html:
--------------------------------------------------------------------------------
1 |
2 |
{{stringify(errors)}}
3 |
This is a public page accessible to anyone.
4 |
User edward should be able to call the api while kerri should throw forbidden error since she doesn't have APIAccess role.
5 |
17 |
18 |
Isekai Anime
19 |
22 |
23 |
2 | not-found works!
3 |
4 |
--------------------------------------------------------------------------------
/src/app/not-found/not-found.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-not-found',
5 | templateUrl: './not-found.component.html',
6 | styleUrls: ['./not-found.component.css']
7 | })
8 | export class NotFoundComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/secured-role/home/home.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/czetsuya/keycloak-angular-auth/6bd4a69372270d18f9549cfe6354339d13611b1e/src/app/secured-role/home/home.component.css
--------------------------------------------------------------------------------
/src/app/secured-role/home/home.component.html:
--------------------------------------------------------------------------------
1 | This is a secured page by role!
2 |
--------------------------------------------------------------------------------
/src/app/secured-role/home/home.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component({
4 | selector: 'app-home',
5 | templateUrl: './home.component.html',
6 | styleUrls: ['./home.component.css']
7 | })
8 | export class HomeComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/app/secured-role/secured-role-routing.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { Routes, RouterModule } from '@angular/router';
3 | import { HomeComponent } from './home/home.component';
4 |
5 | const routes: Routes = [
6 | { path: '', pathMatch: 'full', redirectTo: 'home' },
7 | { path: 'home', component: HomeComponent }
8 | ];
9 |
10 | @NgModule( {
11 | imports: [RouterModule.forChild( routes )],
12 | exports: [RouterModule]
13 | } )
14 | export class SecuredRoleRoutingModule { }
15 |
--------------------------------------------------------------------------------
/src/app/secured-role/secured-role.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule } from '@angular/core';
2 | import { CommonModule } from '@angular/common';
3 |
4 | import { SecuredRoleRoutingModule } from './secured-role-routing.module';
5 | import { HomeComponent } from './home/home.component';
6 |
7 | @NgModule({
8 | imports: [
9 | CommonModule,
10 | SecuredRoleRoutingModule
11 | ],
12 | declarations: [HomeComponent]
13 | })
14 | export class SecuredRoleModule { }
15 |
--------------------------------------------------------------------------------
/src/app/secured/secured.component.css:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/czetsuya/keycloak-angular-auth/6bd4a69372270d18f9549cfe6354339d13611b1e/src/app/secured/secured.component.css
--------------------------------------------------------------------------------
/src/app/secured/secured.component.html:
--------------------------------------------------------------------------------
1 | This is a secured page!
2 |
--------------------------------------------------------------------------------
/src/app/secured/secured.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 |
3 | @Component( {
4 | selector: 'app-secured',
5 | templateUrl: './secured.component.html',
6 | styleUrls: ['./secured.component.css']
7 | } )
8 | export class SecuredComponent implements OnInit {
9 |
10 | constructor() { }
11 |
12 | ngOnInit() {
13 | }
14 |
15 | }
16 |
--------------------------------------------------------------------------------
/src/assets/keycloak.json:
--------------------------------------------------------------------------------
1 | {
2 | "realm": "keycloak-angular-auth",
3 | "auth-server-url": "http://localhost:8081/auth/",
4 | "ssl-required": "none",
5 | "resource": "frontend",
6 | "public-client": true,
7 | "confidential-port": 0
8 | }
--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 | production: true
3 | };
4 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // The file contents for the current environment will overwrite these during build.
2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do
3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead.
4 | // The list of which env maps to which file can be found in `.angular-cli.json`.
5 |
6 | export const environment = {
7 | baseUrl: 'http://localhost:4200',
8 | production: false,
9 | apiUrl: 'http://localhost:8080/keycloak-auth-api/rest',
10 |
11 | keycloakRealm: 'keycloak-angular-auth',
12 | keycloakClient: 'auth-client',
13 | keycloakBaseUrl: 'http://192.168.1.101:8080/'
14 | };
--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/czetsuya/keycloak-angular-auth/6bd4a69372270d18f9549cfe6354339d13611b1e/src/favicon.ico
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Secure Angular Application with Keycloak
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { enableProdMode } from '@angular/core';
2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
3 |
4 | import { AppModule } from './app/app.module';
5 | import { environment } from './environments/environment';
6 |
7 | import { KeycloakService } from "./app/core/auth/keycloak.service";
8 |
9 | if (environment.production) {
10 | enableProdMode();
11 | }
12 |
13 | KeycloakService.init()
14 | .then(() => {
15 | console.log("kc init ok");
16 | const platform = platformBrowserDynamic();
17 | platform.bootstrapModule( AppModule );
18 | } )
19 | .catch( function( error ) {
20 | console.log( "kc init ko " + JSON.stringify( error ) );
21 | return;
22 | } );
23 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | /**
5 | * Required to support Web Animations `@angular/platform-browser/animations`.
6 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
7 | **/
8 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
9 |
10 | /**
11 | * By default, zone.js will patch all possible macroTask and DomEvents
12 | * user can disable parts of macroTask/DomEvents patch by setting following flags
13 | */
14 |
15 | // (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
16 | // (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
17 | // (window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
18 |
19 | /*
20 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
21 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
22 | */
23 | // (window as any).__Zone_enable_cross_context_check = true;
24 |
25 | /***************************************************************************************************
26 | * Zone JS is required by default for Angular itself.
27 | */
28 | import 'zone.js/dist/zone'; // Included with Angular CLI.
29 |
30 |
31 |
32 | /***************************************************************************************************
33 | * APPLICATION IMPORTS
34 | */
35 |
--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
1 | /* You can add global styles to this file, and also import other style files */
2 |
--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: any;
11 |
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 | BrowserDynamicTestingModule,
15 | platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 |
--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/app",
5 | "baseUrl": "./",
6 | "types": []
7 | },
8 | "files": [
9 | "main.ts",
10 | "polyfills.ts"
11 | ],
12 | "include": [
13 | "src/**/*.d.ts"
14 | ]
15 | }
16 |
--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.json",
3 | "compilerOptions": {
4 | "outDir": "../out-tsc/spec",
5 | "baseUrl": "./",
6 | "types": [
7 | "jasmine",
8 | "node"
9 | ]
10 | },
11 | "files": [
12 | "test.ts",
13 | "polyfills.ts"
14 | ],
15 | "include": [
16 | "**/*.spec.ts",
17 | "**/*.d.ts"
18 | ]
19 | }
20 |
--------------------------------------------------------------------------------
/src/typings.d.ts:
--------------------------------------------------------------------------------
1 | /* SystemJS module definition */
2 | declare var module: NodeModule;
3 | interface NodeModule {
4 | id: string;
5 | }
6 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compileOnSave": false,
3 | "compilerOptions": {
4 | "downlevelIteration": true,
5 | "importHelpers": true,
6 | "outDir": "./dist/out-tsc",
7 | "sourceMap": true,
8 | "declaration": false,
9 | "moduleResolution": "node",
10 | "emitDecoratorMetadata": true,
11 | "experimentalDecorators": true,
12 | "target": "es2015",
13 | "typeRoots": [
14 | "node_modules/@types"
15 | ],
16 | "lib": [
17 | "es2017",
18 | "dom"
19 | ],
20 | "module": "esnext",
21 | "baseUrl": "./"
22 | }
23 | }
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "rulesDirectory": [
3 | "node_modules/codelyzer"
4 | ],
5 | "rules": {
6 | "arrow-return-shorthand": true,
7 | "callable-types": true,
8 | "class-name": true,
9 | "comment-format": [
10 | true,
11 | "check-space"
12 | ],
13 | "curly": true,
14 | "deprecation": {
15 | "severity": "warn"
16 | },
17 | "eofline": true,
18 | "forin": true,
19 | "import-blacklist": [
20 | true,
21 | "rxjs/Rx"
22 | ],
23 | "import-spacing": true,
24 | "indent": [
25 | true,
26 | "spaces"
27 | ],
28 | "interface-over-type-literal": true,
29 | "label-position": true,
30 | "max-line-length": [
31 | true,
32 | 140
33 | ],
34 | "member-access": false,
35 | "member-ordering": [
36 | true,
37 | {
38 | "order": [
39 | "static-field",
40 | "instance-field",
41 | "static-method",
42 | "instance-method"
43 | ]
44 | }
45 | ],
46 | "no-arg": true,
47 | "no-bitwise": true,
48 | "no-console": [
49 | true,
50 | "debug",
51 | "info",
52 | "time",
53 | "timeEnd",
54 | "trace"
55 | ],
56 | "no-construct": true,
57 | "no-debugger": true,
58 | "no-duplicate-super": true,
59 | "no-empty": false,
60 | "no-empty-interface": true,
61 | "no-eval": true,
62 | "no-inferrable-types": [
63 | true,
64 | "ignore-params"
65 | ],
66 | "no-misused-new": true,
67 | "no-non-null-assertion": true,
68 | "no-shadowed-variable": true,
69 | "no-string-literal": false,
70 | "no-string-throw": true,
71 | "no-switch-case-fall-through": true,
72 | "no-trailing-whitespace": true,
73 | "no-unnecessary-initializer": true,
74 | "no-unused-expression": true,
75 | "no-use-before-declare": true,
76 | "no-var-keyword": true,
77 | "object-literal-sort-keys": false,
78 | "one-line": [
79 | true,
80 | "check-open-brace",
81 | "check-catch",
82 | "check-else",
83 | "check-whitespace"
84 | ],
85 | "prefer-const": true,
86 | "quotemark": [
87 | true,
88 | "single"
89 | ],
90 | "radix": true,
91 | "semicolon": [
92 | true,
93 | "always"
94 | ],
95 | "triple-equals": [
96 | true,
97 | "allow-null-check"
98 | ],
99 | "typedef-whitespace": [
100 | true,
101 | {
102 | "call-signature": "nospace",
103 | "index-signature": "nospace",
104 | "parameter": "nospace",
105 | "property-declaration": "nospace",
106 | "variable-declaration": "nospace"
107 | }
108 | ],
109 | "unified-signatures": true,
110 | "variable-name": false,
111 | "whitespace": [
112 | true,
113 | "check-branch",
114 | "check-decl",
115 | "check-operator",
116 | "check-separator",
117 | "check-type"
118 | ],
119 | "directive-selector": [
120 | true,
121 | "attribute",
122 | "app",
123 | "camelCase"
124 | ],
125 | "component-selector": [
126 | true,
127 | "element",
128 | "app",
129 | "kebab-case"
130 | ],
131 | "no-output-on-prefix": true,
132 | "no-inputs-metadata-property": true,
133 | "no-outputs-metadata-property": true,
134 | "no-host-metadata-property": true,
135 | "no-input-rename": true,
136 | "no-output-rename": true,
137 | "use-lifecycle-interface": true,
138 | "use-pipe-transform-interface": true,
139 | "component-class-suffix": true,
140 | "directive-class-suffix": true
141 | }
142 | }
143 |
--------------------------------------------------------------------------------