The following example illustrates how SSO can be integrated within your applications' code. The example shows how would an application using Angular enable the SSO feature via OpenID-Connect.
Angular Guide for SSO OpenID-Connect
This Angular guide requires the following dependency via npm:
angular-oauth2-oidc
Run in terminal:
npm install angular-oauth2-oidc --save
Add an environment.ts file to your project directory. This will contain the required credentials to connect to IndustryApps Keycloak OpenID-Connect.
environment.ts
export const environment = {
production: true,
envName: 'local',
keycloak: {
// Url of the Identity Provider
issuer: 'https://auth.uat.industryapps.net/auth/realms/IndustryApps',
// URL of the SPA to redirect the user to after login (Development Env)
redirectUri: 'https://democustomer.uat.industryapps.net/<APPCODE>/',
// The SPA's id.
// The SPA is registerd with this id at the auth-serverß
clientId: 'APPID',
responseType: 'code',
// set the scope for the permissions the client should request
// The first three are defined by OIDC.
scope: 'openid profile email',
// Remove the requirement of using Https to simplify the demo
// THIS SHOULD NOT BE USED IN PRODUCTION
// USE A CERTIFICATE FOR YOUR IDP
// IN PRODUCTION
requireHttps: false,
// at_hash is not present in JWT token
showDebugInformation: true,
disableAtHashCheck: true
}
};
Include an authconfig sub-directory in your project directory. Create an authconfig.module.ts file which initialises an oauth2-oidc module as illustrated below:
Add an auth.config.ts file in the authconfig sub-directory. auth.config.ts would utilise the environment variables configured in the environment.ts file made previously.
auth.config.ts
import { AuthConfig } from 'angular-oauth2-oidc';
import { environment } from '../../environments/environment';
export const authConfig: AuthConfig = {
// Url of the Identity Provider
issuer: environment.keycloak.issuer,
// URL of the SPA to redirect the user to after login
redirectUri: environment.keycloak.redirectUri,
// The SPA's id.
// The SPA is registerd with this id at the auth-serverß
clientId: environment.keycloak.clientId,
responseType: environment.keycloak.responseType,
// set the scope for the permissions the client should request
// The first three are defined by OIDC.
scope: environment.keycloak.scope,
// Remove the requirement of using Https to simplify the demo
// THIS SHOULD NOT BE USED IN PRODUCTION
// USE A CERTIFICATE FOR YOUR IDP
// IN PRODUCTION
requireHttps: environment.keycloak.requireHttps,
// at_hash is not present in JWT token
showDebugInformation: environment.keycloak.showDebugInformation,
disableAtHashCheck: environment.keycloak.disableAtHashCheck
};
export class OAuthModuleConfig {
resourceServer: OAuthResourceServerConfig = {sendAccessToken: false};
}
export class OAuthResourceServerConfig {
/**
* Urls for which calls should be intercepted.
* If there is an ResourceServerErrorHandler registered, it is used for them.
* If sendAccessToken is set to true, the access_token is send to them too.
*/
allowedUrls?: Array<string>;
sendAccessToken = true;
customUrlValidation?: (url: string) => boolean;
}
Add an auth-config.service.ts file to the authconfig sub-directory which sets up OAuthService. auth-config.service.ts initialises a login page if authorisation is required otherwise initialises the app instance.
Be sure to import the environment into the main.ts file in your app directory. e.g.
import { environment } from './environments/environment';
A full main.ts file example is illustrated below, given you've designated both an environment.prod.ts version and environment.ts file in an environments sub-directory.
main.ts
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.error(err));
A full demo sample client-side Angular app is available below provided as a reference.