feat(auth): Use tokens in params as headers in API requests (#61)

* feat(auth): Use tokens in params as headers in API requests * Test logs * fix(auth): using window.location to properly get params * fix(auth): storing correct token value * feat(auth): Adapting the header key based on the param name * feat(auth): allow multiple params to set multiple headers --------- Co-authored-by: LUC BILLAUD <[email protected]>
orthanc-server · Jul 11, 2024 · 029dca9 · 029dca9
1 parent 2a64072
commit 029dca9
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 2 deletions.
diff --git a/WebApplication/src/main-landing.js b/WebApplication/src/main-landing.js
@@ -10,6 +10,11 @@ import orthancApi from './orthancApi'
 import axios from 'axios'
 
 
+// Names of the params that can contain an authorization token
+// If one of these params contain a token, it will be passed as a header
+// with each request to the Orthanc API
+const VALID_TOKEN_PARAMS = ["token", "auth-token", "authorization"];
+
 
 // before initialization, we must load part of the configuration to know if we need to enable Keycloak or not
 axios.get('../api/pre-login-configuration').then((config) => {
@@ -19,6 +24,18 @@ axios.get('../api/pre-login-configuration').then((config) => {
   app.use(store)
   app.use(i18n)
 
+  // If there is a param with a token in the params, use it as a header in subsequent calls to the Orthanc API
+  const params = new URLSearchParams(window.location.search);
+
+  for (let paramName of VALID_TOKEN_PARAMS) {
+      const paramValue = params.get(paramName);
+
+      if (!paramValue) continue;
+
+      localStorage.setItem(paramName, paramValue);
+      orthancApi.updateAuthHeader(paramName);
+  }
+
   app.mount('#app-landing')
 
 });
diff --git a/WebApplication/src/main-retrieve-and-view.js b/WebApplication/src/main-retrieve-and-view.js
@@ -10,6 +10,11 @@ import orthancApi from './orthancApi'
 import axios from 'axios'
 
 
+// Names of the params that can contain an authorization token
+// If one of these params contain a token, it will be passed as a header
+// with each request to the Orthanc API
+const VALID_TOKEN_PARAMS = ["token", "auth-token", "authorization"];
+
 
 // before initialization, we must load part of the configuration to know if we need to enable Keycloak or not
 axios.get('../api/pre-login-configuration').then((config) => {
@@ -19,6 +24,18 @@ axios.get('../api/pre-login-configuration').then((config) => {
   app.use(store)
   app.use(i18n)
 
+  // If there is a param with a token in the params, use it as a header in subsequent calls to the Orthanc API
+  const params = new URLSearchParams(window.location.search);
+
+  for (let paramName of VALID_TOKEN_PARAMS) {
+      const paramValue = params.get(paramName);
+
+      if (!paramValue) continue;
+
+      localStorage.setItem(paramName, paramValue);
+      orthancApi.updateAuthHeader(paramName);
+  }
+
   app.mount('#app-retrieve-and-view')
 
 });
diff --git a/WebApplication/src/main.js b/WebApplication/src/main.js
@@ -16,6 +16,10 @@ import Datepicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 import mitt from "mitt"
 
+// Names of the params that can contain an authorization token
+// If one of these params contain a token, it will be passed as a header
+// with each request to the Orthanc API
+const VALID_TOKEN_PARAMS = ["token", "auth-token", "authorization"];
 
 // before initialization, we must load part of the configuration to know if we need to enable Keycloak or not
 axios.get('../api/pre-login-configuration').then((config) => {
@@ -92,6 +96,18 @@ axios.get('../api/pre-login-configuration').then((config) => {
             console.log("Could not connect to Keycloak");
         });
     } else {
+        // If there is a param with a token in the params, use it as a header in subsequent calls to the Orthanc API
+        const params = new URLSearchParams(window.location.search);
+
+        for (let paramName of VALID_TOKEN_PARAMS) {
+            const paramValue = params.get(paramName);
+
+            if (!paramValue) continue;
+
+            localStorage.setItem(paramName, paramValue);
+            orthancApi.updateAuthHeader(paramName);
+        }
+
         app.mount('#app')
     }
 });
diff --git a/WebApplication/src/orthancApi.js b/WebApplication/src/orthancApi.js
@@ -4,8 +4,8 @@ import store from "./store"
 import { orthancApiUrl, oe2ApiUrl } from "./globalConfigurations";
 
 export default {
-    updateAuthHeader() {
-        axios.defaults.headers.common['token'] = localStorage.getItem("vue-token")
+    updateAuthHeader(headerKey = null) {
+        axios.defaults.headers.common[headerKey ?? "token"] = localStorage.getItem(headerKey ?? "vue-token")
     },
     async loadOe2Configuration() {
         return (await axios.get(oe2ApiUrl + "configuration")).data;