Suggérer des modifications

Introduction

Ce tutoriel explique comment s’authentifier à TOSIAM depuis une application de type SPA (Single Page Application). Nous nous appuyons sur le framework Frontend Angular, ainsi que sur le protocole OIDC, implémenté par TOSIAM.

Prérequis:

Sur votre machine Windows 10/11 ou Linux, installer Tosiam QuickStart. Nous supposons le serveur TOSIAM démarré.
Récupérer le projet GITHUB Tosiam Samples. Nous appellerons le répertoire de travail local <TOSIAM_SAMPLES>
Installer une version récente de nodejs/npm
Installer une version récente d’Angular.

Pour info, ce tutoriel a été testé avec NodeJS version v20.17.0 et Angular 18.2.2

Installation.

Frontend Angular

Depuis le répertoire mini-angular/frontend, taper, sous windows ou sous linux:

npm install
npm run start

L’application Angular démarre et est accessible sous http://localhost:4200

Configuration TOSIAM.

Depuis le répertoire mini-angular/tosiam, taper:

Windows
Linux

export TOSIAM_HOME=<YOUR_INSTALL>
./configure.sh

set TOSIAM_HOME=<YOUR_INSTALL>
configure.bat

Test de l’application Angular.

Depuis l’écran de connexion de l’application angular, cliquer sur le bouton S’authentifier. Vous êtes redirigés vers la page d’authentification de TOSIAM.

Entrer:

Nom: dduck
Mot de passe: password

Vous arrivez sur la page de bienvenue de l’application. Notez la présence des informations de prénom et de nom de l’utilisateur.

Cliquer que le bouton Id Token: Vous voyez s’afficher le contenu de l’Id Token:

{
  "at_hash": "HsZH1itUUfUs8o14C7ooMA",
  "sub": "dduck",
  "auditTrackingId": "58aac098-bf63-4cc3-91af-f04fe7ee817f-231",
  "iss": "http://localhost:8080/tosiam/oauth2/ref",
  "tokenName": "id_token",
  "given_name": "Donald",
  "nonce": "cml5eWNGb210cjhlYWxjM1ZmczU5RFpqdGx3SmZ3T0tnY1pnT2RxVHpkMUda",
  "aud": "angular",
  "c_hash": "-Sk7U2BBdq4eNcWlQocy8w",
  "acr": "chaine",
  "org.forgerock.openidconnect.ops": "508a2c65-714d-48f0-9465-6f8f03dac586",
  "azp": "angular",
  "auth_time": 1726683837,
  "name": "Donald DUCK",
  "realm": "/ref",
  "exp": 1726687807,
  "tokenType": "JWTToken",
  "iat": 1726684207,
  "family_name": "DUCK",
  "email": "donald_duck@tosiam.io"
}

Analyse du code.

Le fichier de configuration ref-angular_oauth.properties

Notes:

Le client qui émet la demande de token s’exécute sur le browser lui-même. Le client est donc public (pas de mot de passe transmis) et conforme au protocole PKCE (utilisation d’un code de vérification)
On renseigne l’url de destination après un logout
Le scope openid permet d’obtenir un Id Token en même temp qu’un Access Token.

Le fichier de configuration angular_cors.properties

forgerock-am-cors-config-accepted-methods=GET
forgerock-am-cors-config-accepted-methods=POST
forgerock-am-cors-config-accepted-methods=OPTIONS
forgerock-am-cors-config-accepted-origins=http://localhost:4200
forgerock-am-cors-config-enable-cors=true
forgerock-am-cors-config-accepted-headers=content-type

Angular exécute du code Javascript en provenance du serveur: http://localhost:4200. TOSIAM doit être explicitement configuré pour accepter des requêtes depuis cette url. Il s’agit d’une configuration CORS.

Le fichier de configuration ref-OAuth2Provider.properties

Il s’agit du fichier qui configure le royaume ref en tant que serveur OAUTH2/OIDC

clientsCanSkipConsent=true
alwaysAddClaimsToToken=true
forgerock-oauth2-provider-loa-mapping=[chaine]=toto

Notes:

clientsCanSkipConsent: Nous avons supposé que que le royaume (ref) dans lequel est enregistrée l’application SPA est utilisée dans un contexte Intranet. Dans ce cas, il est d’usage de ne pas demander au Resource Owner de consentement explicite.
alwaysAddClaimsToToken: La notion de claim relève du protocole OIDC, on demande au serveur Oauth2 d’ajouter les claims dans l’Id Token.
forgerock-oauth2-provider-loa-mapping: On indique une acr_value, autre notion spécifique OIDC. La valeur indique le nom de la chaine d’authentification (toto) définie pour le royaume ref dans TOSIAM.

Utiliser la librairie angular-oauth2-oidc

Le fichier TypeScript mini-angular/frontend/src/app/auth.service.ts contient la logique d’interaction entre Angular et TOSIAM. Voici le composant de configuration:

const authConfig: AuthConfig = {
  issuer: 'http://localhost:8080/tosiam/oauth2/ref', // Remplacez par l'URL de votre OpenAM
  redirectUri: window.location.origin,
  clientId: 'angular', // Remplacez par votre client_id
  responseType: 'code',
  scope: 'openid profile email',
  showDebugInformation: true,
  oidc: true,
  customQueryParams: {
    acr_values: 'chaine',
  }
}

Notez qu’aucun mot de passe n’est indiqué.

L’acr_value a la valeur chaine, comme indiqué dans le fichier de configuration TOSIAM ref-OAuth2Provider.properties