chatbot
clear chat
Skip to main content

Connect a new front-end application

Prerequisites

Create a developer account in the Developer Console.

Step 1: Connect frontend through Developer Console

To connect a new frontend from Developer Console, navigate to Applications page from the main navbar and then click on Connect button inside the Connect Front-End box.

Connect start

Step 2: Configure the app

After clicking on connect button, you will need to configure the new app. You will be asked to type a name for the app, set the valid redirect URIs (URI pattern that a browser can redirect to after a succesful login) and enable or disable the allow only Client Admins (disabled by default).

Connect configuration

Step 3: Client ID and Issuer URL

After saving, a client ID and issuer URL will be produced. Client ID and issuer URL are mandatory for setting up your front-end app.

Connect values

Examples

Prerequisites

Create a developer account in the Developer Console and follow previous steps in order to get issuer URL and client id values.

User authentication

Create a new Angular application

Create a new Angular application using the Angular CLI by running the following command in your terminal:

ng new my-app

Learn more here.

Install the OIDC library

In order to implement OpenId Connect/OAuth2 in an Angular project, we are going to use an OIDC client. Install angular-oauth2-oidc library by running the following command in your terminal:
npm install angular-oauth2-oidc --save
or with Yarn
yarn add angular-oauth2-oidc

Authentication configuration

In order to implement runtime configuration, create and add a configuration file to /src/assets folder. This file should contain the authentication configuration properties such as issuer, clientId, scope, response type etc. Issuer and clientId should be replaced with the corresponding values that have been produced in Developer console.Consequently, create a configuration service by using Angular CLI command ng g s configuration. This service will be injected whenever you need the configuration values.

{
"apiUrl": {{API_URL}},
"oAuthConfig": {
"issuer": {{Issuer_URL}},
"clientId": {{Client_ID}},
"scope": "openid",
"responseType": "code",
"strictDiscoveryDocumentValidation": false
}
}

User authentication flow

Use the services and methods that angular-oauth2-oidc library provides in order to configure the authentication client (using the configuration service from previous step), load the discovery document and redirect to provider's login page. SetupAutomaticSilentRefresh() will setup up silent refreshing for when the token is about to expire, while OAuthService events informs about events, for instance when a token has been received. After a succesfull login or an event firing, we call handleLogin() where you can load user's profile and store user's info such as name, access token etc.

import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AppConfigService } from './services';
import { filter } from 'rxjs';
import { Constants } from './app.constants';
import { AuthConfig, OAuthEvent, OAuthService } from 'angular-oauth2-oidc';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {

constructor(
private router: Router,
private configService: AppConfigService,
private oauthService: OAuthService
) {
configService.resolve().subscribe(() => {
const oAuthConfig: AuthConfig = {
...this.configService.getConfig().oAuthConfig,
redirectUri: window.location.origin + '/'
};
oauthService.configure(oAuthConfig);
this.oauthService.loadDiscoveryDocumentAndLogin().then(r => {
this.handleLogin();
this.router.navigate(['/home']);
});
this.oauthService.setupAutomaticSilentRefresh();
this.oauthService.events.pipe(
filter((e: OAuthEvent) => e.type === 'token_received')
).subscribe((e: OAuthEvent) => this.handleLogin());
});
}

handleLogin = () => {
this.oauthService.loadUserProfile()
.then(p => localStorage.setItem(Constants.LOCAL_STORAGE_FIRST_NAME, p['info']['given_name'] || ''));
};
}