ContacteIntroducció
En aquesta guia es detallen els passos a seguir per crear una aplicació SPA client que autentifiqui l’usuari amb GICAR. Aquesta SPA utilitzarà les llibreries Javascript que proporciona el producte de Keycloak (llibreria Javascript adapter de Keycloak).
Dades a demanar a la OTGICAR:
Per a fer la integració és necessari sol·licitar a través del JIRA CSTD a la OTGICAR un fitxer de configuració anomenat Keycloak.json, que és el que conté els paràmetres per a fer la connexió correcta contra el Keycloak de GICAR.
Aquest fitxer keycloak.json contindrà els següents paràmetres proporcionats per la OTGICAR:
"realm": "xxxxxxxxx",
"auth-server-url": "xxxxxxxxxxx",
"ssl-required": "xxxxx",
"resource": "xxxxx",
"public-client": xxxxxxxx,
"confidential-port": 0
Construcció del HTML:
-
Al head del HTML carregar la llibreria Javascript que proporcional el producte Keycloak:
<script src="dist/keycloak.js" type="text/javascript"> </script> -
Al body de la petició inicialitzar la llibreria de Keycloak de la següent forma:
var keycloak = Keycloak('http://localhost:3000/keycloak.json'); -
En el onload del HTML fer saltar el login de GICAR a través d’aquesta funció:
keycloak.init({ onLoad: 'login-required' }).success(reloadData); -
Recuperar els valors obtinguts pel Keycloak accedint als atributs de l’objecte Keycloak de la següent manera:
Identificador d'usuari: keycloak.idTokenParsed.preferred_username; Correu electrònic de l'usuari = keycloak.idTokenParsed.email; Nom de l'usuari = keycloak.idTokenParsed.given_name; Cognoms de l'usuari = keycloak.idTokenParsed.family_name; Token de l'usuari = keycloak.token;
Exemple de HTML funcionant que retorna els atributs d’usuari:
Un possible exemple de HTML de SPA funcionant amb Keycloak podria ser aquest:
<html>
<head>
<script src="dist/keycloak.js" type="text/javascript">
</script>
</head>
<body>
<h1>Aplicació de proves Keycloak GICAR</h1>
<div>
L'usuari <b id="subject"></b> ha fet aquesta petició.
<p><b>Detalls de l'usuari (extrets de <span id="profileType"></span>):</b></p>
<p>Nom d'usuari (NIF): <span id="username"></span></p>
<p>Email: <span id="email"></span></p>
<p>Nom complet: <span id="name"></span></p>
<p>Nom: <span id="givenName"></span></p>
<p>Cognoms: <span id="familyName"></span></p>
<p><b>---------------------------------</b></p>
<p><b>Altres dades:</b></p>
<p>Access Token: <span id="tokenbearer"></span></p>
</div>
<script type="text/javascript">
var keycloak = Keycloak('http://localhost:3000/keycloak.json');
var loadData = function () {
document.getElementById('subject').innerHTML = keycloak.subject;
if (keycloak.idToken) {
document.getElementById('profileType').innerHTML = 'IDToken';
document.getElementById('username').innerHTML = keycloak.idTokenParsed.preferred_username;
document.getElementById('email').innerHTML = keycloak.idTokenParsed.email;
document.getElementById('name').innerHTML = keycloak.idTokenParsed.name;
document.getElementById('givenName').innerHTML = keycloak.idTokenParsed.given_name;
document.getElementById('familyName').innerHTML = keycloak.idTokenParsed.family_name;
document.getElementById('tokenbearer').innerHTML = keycloak.token;
} else {
keycloak.loadUserProfile(function() {
document.getElementById('profileType').innerHTML = 'Account Service';
document.getElementById('username').innerHTML = keycloak.profile.username;
document.getElementById('email').innerHTML = keycloak.profile.email;
document.getElementById('name').innerHTML = keycloak.profile.firstName + ' ' + keycloak.profile.lastName;
document.getElementById('givenName').innerHTML = keycloak.profile.firstName;
document.getElementById('familyName').innerHTML = keycloak.profile.lastName;
document.getElementById('tokenbearer').innerHTML = keycloak.token;
}, function() {
document.getElementById('profileType').innerHTML = 'Failed to retrieve user details. Please enable claims or account role';
});
}
};
var loadFailure = function () {
document.getElementById('customers').innerHTML = '<b>Failed to load data. Check console log</b>';
};
var reloadData = function () {
keycloak.updateToken(10)
.success(loadData)
.error(function() {
document.getElementById('customers').innerHTML = '<b>Failed to load data. User is logged out.</b>';
});
}
keycloak.init({ onLoad: 'login-required' }).success(reloadData);
</script>
<br><br>
<button onclick="reloadData()">Reload data</button>
</body>
</html>
Logout
L’aplicació pot implementar el logout de forma nativa contra els següents endpoints:
PRE:
Per autenticació només d'usuaris GICAR: https://preproduccio.autenticaciogicar5.extranet.gencat.cat/realms/gicar-ad/protocol/openid-connect/logout
Per autenticació només d'usuaris GICAR + Ciutadans: https://preproduccio.autenticaciogicar5.extranet.gencat.cat/realms/gicar-anonim/protocol/openid-connect/logout
Per autenticació només d'usuaris Ciutadans: https://preproduccio.autenticaciogicar5.extranet.gencat.cat/realms/gicar-valid/protocol/openid-connect/logout
Per autenticació només d'usuaris GICAR + Administració local + Ciutadans: https://preproduccio.autenticaciogicar5.extranet.gencat.cat/realms/gicar-eacat/protocol/openid-connect/logout
PRO:
Per autenticació només d'usuaris GICAR: https://autenticaciogicar5.extranet.gencat.cat/realms/gicar-ad/protocol/openid-connect/logout
Per autenticació només d'usuaris GICAR + Ciutadans: https://autenticaciogicar5.extranet.gencat.cat/realms/gicar-anonim/protocol/openid-connect/logout
Per autenticació només d'usuaris Ciutadans: https://autenticaciogicar5.extranet.gencat.cat/realms/gicar-valid/protocol/openid-connect/logout
Per autenticació només d'usuaris GICAR + Administració local + Ciutadans: https://autenticaciogicar5.extranet.gencat.cat/realms/gicar-eacat/protocol/openid-connect/logout
Per a que els endpoints de logout no demanin la confirmació, cal invocar-los per OIDC de la següent manera:
/realms/gicar-ad/protocol/openid-connect/logout
?id_token_hint=<ID_TOKEN>
&post_logout_redirect_uri=https://app.exemple/logout-ok
Passant per paràmetre l’ID_TOKEN obtengut en el moment del login, i de forma opcional una post-logout URL a la que es vulgui reenviar de forma automàtica després del logout a GICAR.