#2 - Add example of how to use JWT authentication

neil-at-pi · neil-at-pi · commit 33a8ae72b05c · 2023-08-25T11:42:55.000+01:00
diff --git a/jwt_auth/jwt_embed.html b/jwt_auth/jwt_embed.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Dashboard embed with JWT auth</title>
+</head>
+<script type="module" src="piJWT/auth.js"></script>
+<body>
+<iframe id="dashboardIframe" style="width: 1024px; height: 768px"></iframe>
+</body>
+</html>
diff --git a/jwt_auth/keys/createKeys.sh b/jwt_auth/keys/createKeys.sh
@@ -0,0 +1,6 @@
+#!/bin/bash
+ssh-keygen -t rsa -b 4096 -E SHA512 -m PEM -N "" -f signing_key.pkcs1
+openssl rsa -in signing_key.pkcs1 -pubout -outform PEM -out signing_key.pub
+rm signing_key.pkcs1.pub
+openssl pkey -in signing_key.pkcs1 -out signing_key.pkcs8
+rm signing_key.pkcs1
diff --git a/jwt_auth/piJWT/auth.js b/jwt_auth/piJWT/auth.js
@@ -0,0 +1,43 @@
+import { SignJWT, importPKCS8 } from "https://cdnjs.cloudflare.com/ajax/libs/jose/4.14.4/index.bundle.min.js";
+
+const dashboard = 'http://localhost:8224';
+const loginAs = 'admin';
+const algorithm = 'RS512' // or RS384 or RS256 currently supported
+
+async function loginWithJWTAndIframe(){
+    await grabPrivateKeyString(async function (privateKeyString) {
+        let privateKey = await importPKCS8(privateKeyString, algorithm);
+        const jwt = await createJWT(privateKey, algorithm);
+        await initIframe(jwt);
+    })
+}
+
+async function grabPrivateKeyString(onLoad) {
+    const keyFile = new XMLHttpRequest();
+    keyFile.open("GET", "keys/signing_key.pkcs8", true);
+    keyFile.onreadystatechange = async function() {
+        if (keyFile.readyState === 4 && keyFile.status === 200) {
+            const keyText = keyFile.responseText;
+            onLoad(keyText);
+        }
+    }
+    await keyFile.send();
+}
+
+async function createJWT(privateKey, algorithm){
+    /* Supported claims are
+    pi:dashboard_username, pi:dashboard_email and pi:dashboard_userid */
+    return new SignJWT({'pi:dashboard_username': loginAs})
+        .setProtectedHeader({alg: algorithm})
+        .setIssuedAt()
+        .setExpirationTime('1h')
+        .sign(privateKey);
+}
+
+async function initIframe(jwt){
+    document.getElementById("dashboardIframe").src = `${dashboard}/pi/?jwt=${jwt}`
+}
+
+loginWithJWTAndIframe();
+
+
diff --git a/jwt_auth/readme.md b/jwt_auth/readme.md
@@ -0,0 +1,24 @@
+# Login with JWT
+
+## Keys
+To login with JWT you need a private/public key pair. If you sign the JWT with your private key and provide
+the matching public key to the Dashboard the trust is established and you can issue login tokens. You need to set
+one of the supported claims:
+pi:dashboard_username, pi:dashboard_email and pi:dashboard_userid
+
+For this demo if you haven't generated keys use keys/createKeys.sh on linux to generate test keys.
+
+## Demo
+
+### Prerequisites to run this demo
+- Setup trusted hosts in your Dashboard to allow embedding from http://localhost:8081
+- Add the public key from signing_key.pub to the Dashboard on the admin screen (strip the header and footer)
+- Check that auth.js contains valid dashboard and loginAs values
+
+### Running the demo
+To run the demo use run.sh, it uses npx to launch a webserver and you can open localhost:8081 in a browser.
+If all the setup is correct you should be logged in to the Dashboard as that user.
+
+## Important Notes
+- Don't expose your private key in production, it needs to be kept secret!
+- The jwt creation code would typically be run server side, this is just an example!
diff --git a/jwt_auth/run.sh b/jwt_auth/run.sh
@@ -0,0 +1,2 @@
+#!/bin/bash
+npx http-server
