Create a new Angular project using the ng new, Let us called it demo:
ng new demo
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS [ https://sass-lang.com/documentation/syntax#scss ]
CREATE demo/README.md (1022 bytes)
CREATE demo/.editorconfig (274 bytes)
CREATE demo/.gitignore (631 bytes)
CREATE demo/angular.json (3638 bytes)
CREATE demo/package.json (1256 bytes)
...
CREATE demo/e2e/src/app.e2e-spec.ts (637 bytes)
CREATE demo/e2e/src/app.po.ts (301 bytes)
✔ Packages installed successfully.
Successfully initialized git.
Change directory into the demo folder and install an Angular OpenID Connect Client and Bootstrap for styling:
cd demo
npm install angular-oauth2-oidc --save
npm install bootstrap jquery popper --save
Integrate Bootstrap into your Angular project within angular.json:
...
"styles": [
"node_modules/bootstrap/dist/css/bootstrap.min.css",
"src/styles.scss"
],
"scripts": [
"node_modules/jquery/dist/jquery.slim.min.js",
"node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
]
...
Create a basic container to hold the different components. Open app.component.html and replace it with the following:
<div class="container border shadow p-3 mt-5">
<router-outlet></router-outlet>
</div>
Create a component called profile which will display the logged in users' information:
ng generate component profile
CREATE src/app/profile/profile.component.scss (0 bytes)
CREATE src/app/profile/profile.component.html (22 bytes)
CREATE src/app/profile/profile.component.spec.ts (635 bytes)
CREATE src/app/profile/profile.component.ts (280 bytes)
UPDATE src/app/app.module.ts (479 bytes)
Create a component called logout which will be the page the user is shown once they log out:
ng generate component logout
CREATE src/app/logout/logout.component.scss (0 bytes)
CREATE src/app/logout/logout.component.html (21 bytes)
CREATE src/app/logout/logout.component.spec.ts (628 bytes)
CREATE src/app/logout/logout.component.ts (276 bytes)
UPDATE src/app/app.module.ts (561 bytes)
Open logout.component.html and add a friendly message:
<p>Thank you for logging out. Click here to visit your <a href="../profile">profile</a> again.</p>
Create a component called pagenotfound which will be the page the user is shown when an unknown path is accessed:
ng generate component pagenotfound
CREATE src/app/pagenotfound/pagenotfound.component.scss (0 bytes)
CREATE src/app/pagenotfound/pagenotfound.component.html (27 bytes)
CREATE src/app/pagenotfound/pagenotfound.component.spec.ts (670 bytes)
CREATE src/app/pagenotfound/pagenotfound.component.ts (300 bytes)
UPDATE src/app/app.module.ts (1083 bytes)
Open pagenotfound.component.html and add a friendly message:
<p>Page not found</p>
Create a component called redirect which will be the component that Keycloak will re-direct the user back to after authentication and includes the OAuth code. This OAuth code will then be exchanged for access and identity tokens from Keycloak:
ng generate component redirect
CREATE src/app/redirect/redirect.component.scss (0 bytes)
CREATE src/app/redirect/redirect.component.html (23 bytes)
CREATE src/app/redirect/redirect.component.spec.ts (642 bytes)
CREATE src/app/redirect/redirect.component.ts (284 bytes)
UPDATE src/app/app.module.ts (651 bytes)
Within app-routing.module.ts configure the routing by importing the previously created components and configuring the routes:
...
import { ProfileComponent } from './profile/profile.component';
import { LogoutComponent } from './logout/logout.component';
import { RedirectComponent } from './redirect/redirect.component';
import { PagenotfoundComponent } from './pagenotfound/pagenotfound.component';
const routes: Routes = [
{ path: 'profile', component: ProfileComponent},
{ path: 'logout', component: LogoutComponent},
{ path: 'callback', component: RedirectComponent},
{ path: '**', component: PagenotfoundComponent}
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
...