lovasoa · mspasiano · Apr 14, 2022 · Apr 14, 2022 · Apr 14, 2022 · Apr 15, 2022
diff --git a/README.md b/README.md
@@ -85,6 +85,16 @@ WBO supports authentication with a JWT. This should be passed in as a query with
 
 The `AUTH_SECRET_KEY` variable in [`configuration.js`](./server/configuration.js) should be filled with the secret key for the JWT.
 
+WBO supports authentication with OIDC based on [`keycloak`](https://github.com/keycloak) 
+Some important environment variables are :
+- `KEYCLOAK_ENABLE` is used for enable OIDC authentication
+- `KEYCLOAK_URL` is the URL of Keycloak, eg, `https://keycloak-server/auth`
+- `KEYCLOAK_REALM` is the Realm name, eg, **myrealm**
+- `KEYCLOAK_CLIENTID` is the Public Client Id, eg, **myapp**
+- `KEYCLOAK_USERINFO_ATTRIBUTE` is the attribute name for authorization, and it is not mandatory 
+
+For any further information you can see [`here`](https://www.keycloak.org/docs/latest/securing_apps/#_javascript_adapter)
+
 ## Configuration
 
 When you start a WBO server, it loads its configuration from several environment variables.

diff --git a/client-data/board.html b/client-data/board.html
@@ -21,6 +21,7 @@
 	<link rel="alternate" hreflang="{{.}}" href="{{../boardUriComponent}}?lang={{.}}" />
 	{{/languages}}
 	<script src="../polyfill.min.js"></script>
+	<script src="../js/keycloak.js"></script>
 </head>
 
 <body>
@@ -90,6 +91,7 @@
 	<script src="../js/minitpl.js"></script>
 	<script src="../js/intersect.js"></script>
 	<script src="../js/board.js"></script>
+	<script src="../tools/keycloak/keycloak.js"></script>
 	<script src="../tools/pencil/wbo_pencil_point.js"></script>
 	<script src="../tools/pencil/pencil.js"></script>
 	<script src="../tools/cursor/cursor.js"></script>

diff --git a/client-data/js/keycloak.js b/client-data/js/keycloak.js
diff --git a/client-data/tools/keycloak/keycloak.css b/client-data/tools/keycloak/keycloak.css
@@ -0,0 +1 @@
+
diff --git a/client-data/tools/keycloak/keycloak.js b/client-data/tools/keycloak/keycloak.js
@@ -0,0 +1,68 @@
+/**
+ *                        WHITEBOPHIR
+ *********************************************************
+ * @licstart  The following is the entire license notice for the 
+ *  JavaScript code in this page.
+ *
+ * Copyright (C) 2013  Ophir LOJKINE
+ *
+ *
+ * The JavaScript code in this page is free software: you can
+ * redistribute it and/or modify it under the terms of the GNU
+ * General Public License (GNU GPL) as published by the Free Software
+ * Foundation, either version 3 of the License, or (at your option)
+ * any later version.  The code is distributed WITHOUT ANY WARRANTY;
+ * without even the implied warranty of MERCHANTABILITY or FITNESS
+ * FOR A PARTICULAR PURPOSE.  See the GNU GPL for more details.
+ *
+ * As additional permission under GNU GPL version 3 section 7, you
+ * may distribute non-source (e.g., minimized or compacted) forms of
+ * that code without the copy of the GNU GPL normally required by
+ * section 4, provided you include this license notice and a URL
+ * through which recipients can access the Corresponding Source.
+ *
+ * @licend
+ */
+
+(function () { //Code isolation
+	if (Tools.server_config.KEYCLOAK_ENABLE) {
+		var keycloak = Keycloak({
+			url: Tools.server_config.KEYCLOAK_URL,
+			realm: Tools.server_config.KEYCLOAK_REALM,
+			clientId: Tools.server_config.KEYCLOAK_CLIENTID
+		  });
+
+		keycloak.init({
+			onLoad: 'login-required'
+		}).catch(function(e) {
+			console.log(e);
+		});
+
+		function onStart() {
+			keycloak.logout({
+				redirectUri: window.location.href.split("/boards/")[0]
+			});	
+		}
+
+		keycloak.onAuthSuccess = function() { 
+			keycloak.loadUserInfo().then(function(userInfo) {
+				if (Tools.server_config.KEYCLOAK_USERINFO_ATTRIBUTE) {
+					if (!userInfo[Tools.server_config.KEYCLOAK_USERINFO_ATTRIBUTE]) {
+						alert("Sitema non disponibile per l'utente " + userInfo.preferred_username);
+						keycloak.logout();
+					}	
+				}
+				var avatar = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><circle cx="500" cy="500" r="500" fill="#d32f2f" /><text x="50%" y="50%" dominant-baseline="central" text-anchor="middle" letter-spacing="-25" font-size="400" fill="#FFFFFF" font-family="sans-serif">' +
+					userInfo.given_name.charAt(0).toUpperCase() + userInfo.family_name.charAt(0).toUpperCase() +
+					'</text></svg>';
+				Tools.add({ //The new tool
+					"name": 'Logout ' + userInfo.given_name + " " + userInfo.family_name,
+					"shortcut": "L",
+					"onstart": onStart,
+					"stylesheet": "tools/keycloak/keycloak.css",
+					"icon": "data:image/svg+xml," + encodeURIComponent(avatar)
+				});
+			}); 
+		}	
+	}
+})(); //End of code isolation
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
     "async-mutex": "^0.3.1",
     "handlebars": "^4.7.7",
     "jsonwebtoken": "^8.5.1",
+    "keycloak-js": "^17.0.1",
     "polyfill-library": "^3.107.1",
     "serve-static": "^1.14.1",
     "socket.io": "^4",

diff --git a/server/client_configuration.js b/server/client_configuration.js
@@ -8,4 +8,10 @@ module.exports = {
   BLOCKED_TOOLS: config.BLOCKED_TOOLS,
   BLOCKED_SELECTION_BUTTONS: config.BLOCKED_SELECTION_BUTTONS,
   AUTO_FINGER_WHITEOUT: config.AUTO_FINGER_WHITEOUT,
+  KEYCLOAK_ENABLE: config.KEYCLOAK_ENABLE,
+  KEYCLOAK_URL: config.KEYCLOAK_URL,
+  KEYCLOAK_REALM: config.KEYCLOAK_REALM,
+  KEYCLOAK_CLIENTID: config.KEYCLOAK_CLIENTID,
+  KEYCLOAK_USERINFO_ATTRIBUTE: config.KEYCLOAK_USERINFO_ATTRIBUTE
+
 };
diff --git a/server/configuration.js b/server/configuration.js
@@ -57,4 +57,15 @@ module.exports = {
 
   /** Secret key for jwt */
   AUTH_SECRET_KEY: (process.env["AUTH_SECRET_KEY"] || ""),
+
+  KEYCLOAK_ENABLE: (process.env["KEYCLOAK_ENABLE"] || false),
+
+  KEYCLOAK_URL: process.env["KEYCLOAK_URL"],
+
+  KEYCLOAK_REALM: process.env["KEYCLOAK_REALM"],
+
+  KEYCLOAK_CLIENTID: process.env["KEYCLOAK_CLIENTID"],
+
+  KEYCLOAK_USERINFO_ATTRIBUTE: process.env["KEYCLOAK_USERINFO_ATTRIBUTE"],
+
 };