7 Commits

Author SHA1 Message Date
mario
3a2f54989f simplify config 2025-05-19 11:57:27 +07:00
mario
18d5b6dd9a add: shortlink DoB auth page 2025-05-13 16:15:37 +07:00
mario
7cad1c5e05 prevent patient to see Worklist 2025-05-13 08:52:45 +07:00
mario
7f4548e18c add: Login page and route 2025-05-13 08:51:38 +07:00
mario
eaa18b8389 edit: patch XHR Request dengan coverage lebih luas dari monkeyPatchXML 2025-05-09 16:58:04 +07:00
86ad0b38dd Monkey Patch XMLHttpRequest -- inject bearer token and verify response 2025-04-29 09:42:53 +07:00
cb380a521d default use cloud pacs 2025-04-29 08:44:52 +07:00
12 changed files with 473 additions and 129 deletions

3
.gitignore vendored
View File

@@ -12,6 +12,7 @@ coverage/
.yarn/
.nx/
addOns/yarn.lock
**.zip
# YALC (for Erik)
.yalc
@@ -59,3 +60,5 @@ tests/playwright-report/
# Dummy
/dump
jwt-auth-inject.json
platform/app/dist.zip

View File

@@ -102,8 +102,20 @@ export const studyDataForOverlayItem = (studyInstanceUID: string) => {
try {
const qidoRootUrl = getQidoRootUrl();
// Get the authentication token from session storage
const authToken = window.sessionStorage.getItem('ohif-auth-token');
// Create request headers with Authorization if token exists
const headers: HeadersInit = {};
if (authToken) {
headers['Authorization'] = `Bearer ${authToken}`;
}
const response = await fetch(
`${qidoRootUrl}/studies?limit=101&offset=0&fuzzymatching=false&includefield=00080050,00081030,00101010,0010004&StudyInstanceUID=${studyInstanceUID}`
`${qidoRootUrl}/studies?limit=101&offset=0&fuzzymatching=false&includefield=00080050,00081030,00101010,0010004&StudyInstanceUID=${studyInstanceUID}`,
{
headers,
}
);
if (!response.ok) {

View File

@@ -39,6 +39,15 @@ export default function initWADOImageLoader(
Accept: acceptHeader,
};
// // Patch Mario:
const authToken = sessionStorage.getItem('ohif-auth-token');
if (!authToken) {
window.location.href = '/login';
return;
}
xhrRequestHeaders.Authorization = `Bearer ${authToken}`;
if (headers) {
Object.assign(xhrRequestHeaders, headers);
}

View File

@@ -85,6 +85,14 @@ function createDicomWebApi(dicomWebConfig, servicesManager) {
if (authHeaders && authHeaders.Authorization) {
xhrRequestHeaders.Authorization = authHeaders.Authorization;
}
const authToken = sessionStorage.getItem('ohif-auth-token');
if (!authToken) {
window.location.href = '/login';
return;
}
xhrRequestHeaders.Authorization = `Bearer ${authToken}`;
return xhrRequestHeaders;
};

View File

@@ -1,9 +1,11 @@
/** @type {AppTypes.Config} */
function sas_get_token() {
//implement token here
return '';
}
window.config = {
sasGetToken: sas_get_token,
routerBasename: '/',
pacs_document_host: '152.42.173.210',
pacs_document_port: 8080,
// whiteLabeling: {},
extensions: [],
modes: [],
@@ -26,10 +28,12 @@ window.config = {
prefetch: 25,
},
expertise: false, //* Tambahan untuk enable expertise (CustomizableViewportOverlay)
expertise_host: `https://devone.aplikasi.web.id/one-api/mockup/pacsmwl/Workorder/get_dummy_expertise`, //* Tambahan untuk fetch data Expertise)
pacs_document_host: `152.42.173.210`,
pacs_document_port: 8080,
// filterQueryParam: false,
// defaultDataSourceName: 'dicomweb',
defaultDataSourceName: 'local-proxy',
// defaultDataSourceName: 'GCP',
/* Dynamic config allows user to pass "configUrl" query string this allows to load config without recompiling application. The regex will ensure valid configuration source */
// dangerouslyUseDynamicConfig: {
// enabled: true,
@@ -45,10 +49,10 @@ window.config = {
namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
sourceName: 'local-proxy',
configuration: {
friendlyName: 'DCM4CHEE Server',
friendlyName: 'Static WADO Local Data',
name: 'DCM4CHEE',
qidoRoot: 'http://152.42.173.210:5000/rs',
wadoRoot: 'http://152.42.173.210:5000/rs',
qidoRoot: `http://152.42.173.210:5000/rs`,
wadoRoot: `http://152.42.173.210:5000/rs`,
qidoSupportsIncludeField: false,
supportsReject: true,
supportsStow: true,
@@ -58,100 +62,14 @@ window.config = {
supportsFuzzyMatching: false,
supportsWildcard: true,
staticWado: true,
singlepart: 'bulkdata,video',
singlepart: 'video',
bulkDataURI: {
enabled: true,
relativeResolution: 'studies',
transform: url => url.replace('/pixeldata.mp4', '/rendered'),
},
omitQuotationForMultipartRequest: true,
},
},
{
namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
sourceName: 'dicomweb',
configuration: {
friendlyName: 'AWS S3 Static wado server',
name: 'aws',
wadoUriRoot: 'https://d14fa38qiwhyfd.cloudfront.net/dicomweb',
qidoRoot: 'https://d14fa38qiwhyfd.cloudfront.net/dicomweb',
wadoRoot: 'https://d14fa38qiwhyfd.cloudfront.net/dicomweb',
qidoSupportsIncludeField: false,
imageRendering: 'wadors',
thumbnailRendering: 'wadors',
enableStudyLazyLoad: true,
supportsFuzzyMatching: false,
supportsWildcard: true,
staticWado: true,
singlepart: 'bulkdata,video',
// whether the data source should use retrieveBulkData to grab metadata,
// and in case of relative path, what would it be relative to, options
// are in the series level or study level (some servers like series some study)
bulkDataURI: {
enabled: true,
relativeResolution: 'studies',
transform: url => url.replace('/pixeldata.mp4', '/rendered'),
},
omitQuotationForMultipartRequest: true,
},
},
{
namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
sourceName: 'ohif2',
configuration: {
friendlyName: 'AWS S3 Static wado secondary server',
name: 'aws',
wadoUriRoot: 'https://dd14fa38qiwhyfd.cloudfront.net/dicomweb',
qidoRoot: 'https://dd14fa38qiwhyfd.cloudfront.net/dicomweb',
wadoRoot: 'https://dd14fa38qiwhyfd.cloudfront.net/dicomweb',
qidoSupportsIncludeField: false,
supportsReject: false,
imageRendering: 'wadors',
thumbnailRendering: 'wadors',
enableStudyLazyLoad: true,
supportsFuzzyMatching: false,
supportsWildcard: true,
staticWado: true,
singlepart: 'bulkdata,video',
// whether the data source should use retrieveBulkData to grab metadata,
// and in case of relative path, what would it be relative to, options
// are in the series level or study level (some servers like series some study)
bulkDataURI: {
enabled: true,
relativeResolution: 'studies',
},
omitQuotationForMultipartRequest: true,
},
},
{
namespace: '@ohif/extension-default.dataSourcesModule.dicomweb',
sourceName: 'ohif3',
configuration: {
friendlyName: 'AWS S3 Static wado secondary server',
name: 'aws',
wadoUriRoot: 'https://d3t6nz73ql33tx.cloudfront.net/dicomweb',
qidoRoot: 'https://d3t6nz73ql33tx.cloudfront.net/dicomweb',
wadoRoot: 'https://d3t6nz73ql33tx.cloudfront.net/dicomweb',
qidoSupportsIncludeField: false,
supportsReject: false,
imageRendering: 'wadors',
thumbnailRendering: 'wadors',
enableStudyLazyLoad: true,
supportsFuzzyMatching: false,
supportsWildcard: true,
staticWado: true,
singlepart: 'bulkdata,video',
// whether the data source should use retrieveBulkData to grab metadata,
// and in case of relative path, what would it be relative to, options
// are in the series level or study level (some servers like series some study)
bulkDataURI: {
enabled: true,
relativeResolution: 'studies',
},
omitQuotationForMultipartRequest: true,
},
},
{
namespace: '@ohif/extension-default.dataSourcesModule.dicomwebproxy',
sourceName: 'dicomwebproxy',

View File

@@ -1,37 +1,18 @@
/** @type {AppTypes.Config} */
window.config = {
routerBasename: '/',
pacs_document_host: '152.42.173.210',
pacs_document_host: `${window.location.hostname}`,
pacs_document_port: 8080,
expertise:false,
expertise: false,
enableGoogleCloudAdapter: false,
// below flag is for performance reasons, but it might not work for all servers
showWarningMessageForCrossOrigin: true,
showCPUFallbackMessage: true,
showLoadingIndicator: true,
strictZSpacingForVolumeViewport: true,
// This is an array, but we'll only use the first entry for now
// Remove OIDC configuration since proxy handles authentication
// oidc: [
// {
// // ~ REQUIRED
// // Authorization Server URL
// authority: 'https://accounts.google.com',
// client_id: '382212153306-7q39hdie4ecj0uhemkitvedo93bnvfhn.apps.googleusercontent.com',
// redirect_uri: '/callback',
// response_type: 'id_token token',
// scope:
// 'email profile openid https://www.googleapis.com/auth/cloudplatformprojects.readonly https://www.googleapis.com/auth/cloud-healthcare', // email profile openid
// // ~ OPTIONAL
// post_logout_redirect_uri: '/logout-redirect.html',
// revoke_uri: 'https://accounts.google.com/o/oauth2/revoke?token=',
// automaticSilentRenew: true,
// revokeAccessTokenOnSignout: true,
// },
// ],
extensions: [],
modes: [],
showStudyList: true,
showStudyList: false,
// filterQueryParam: false,
defaultDataSourceName: 'dicomweb',
dataSources: [
@@ -48,17 +29,11 @@ window.config = {
imageRendering: 'wadors',
thumbnailRendering: 'wadors',
enableStudyLazyLoad: true,
supportsFuzzyMatching: true,
supportsFuzzyMatching: false,
supportsWildcard: true,
dicomUploadEnabled: true,
dicomUploadEnabled: false,
omitQuotationForMultipartRequest: true,
configurationAPI: 'ohif.dataSourceConfigurationAPI.google',
// defaultDicomStoreConfiguredItems: {
// id: 'projects/ohifproxy/locations/asia-southeast2/datasets/sas-storage',
// itemType: '3',
// name: 'store-1',
// url: 'https://healthcare.googleapis.com/v1/projects/ohifproxy/locations/asia-southeast2/datasets/sas-storage/dicomStores/store-1'
// },
},
},
{

View File

@@ -36,6 +36,49 @@ import createRoutes from './routes';
import appInit from './appInit.js';
import OpenIdConnectRoutes from './utils/OpenIdConnectRoutes';
import { ShepherdJourneyProvider } from 'react-shepherd';
import { initializeCustomAuth } from './utils/initUserAuthenticationService';
function injectAuth() {
console.log('---> Inject Auth');
const originalXHROpen = XMLHttpRequest.prototype.open;
const originalXHRSend = XMLHttpRequest.prototype.send;
// Kalau ingin disable study list (Role Patient)
// window.config.showStudyList = false;
const authToken = sessionStorage.getItem('ohif-auth-token');
XMLHttpRequest.prototype.open = function (method, url, async, user, password) {
this._url = url; // Save URL if you want conditional logic
return originalXHROpen.apply(this, arguments);
};
XMLHttpRequest.prototype.send = function (body) {
this.setRequestHeader('Authorization', `Bearer ${authToken}`);
this.addEventListener('readystatechange', function () {
if (this.readyState === 4) {
// readyState 4 = DONE
try {
// Check for auth errors (401/403) and redirect to login if needed
if (this.status === 401 || this.status === 403) {
window.sessionStorage.removeItem('ohif-auth-token');
window.location.href = '/login';
}
} catch (e) {
console.error('Error handling auth response:', e);
}
}
});
return originalXHRSend.apply(this, arguments);
};
}
// Setup token access function
window.config.sasGetToken = () => window.sessionStorage.getItem('ohif-auth-token');
// Enable auth token injection
// injectAuth();
let commandsManager: CommandsManager,
extensionManager: ExtensionManager,
@@ -108,6 +151,9 @@ function App({
customizationService,
} = servicesManager.services;
// Initialize our custom authentication service
initializeCustomAuth(userAuthenticationService);
const providers = [
[AppConfigProvider, { value: appConfigState }],
[UserAuthenticationProvider, { service: userAuthenticationService }],

View File

@@ -0,0 +1,129 @@
import React, { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useUserAuthentication } from '@ohif/ui';
const Login = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate();
const location = useLocation();
const [, authContext] = useUserAuthentication();
// Get the intended destination from URL query params or default to home
const searchParams = new URLSearchParams(location.search);
const redirectPath = searchParams.get('redirect') || '/';
// Check if already authenticated
useEffect(() => {
const token = window.sessionStorage.getItem('ohif-auth-token');
if (token) {
// Already logged in, redirect to destination
navigate(redirectPath, { replace: true });
}
}, [redirectPath, navigate]);
const handleLogin = async e => {
e.preventDefault();
setError('');
setIsLoading(true);
try {
// Use window.config.goProxyHost for authentication endpoint
const proxyHost = window.config?.goProxyHost || `http://${window.location.hostname}:5555`;
const authEndpoint = `${proxyHost}/auth/login`;
// Call go-ohif-proxy login endpoint
const response = await fetch(authEndpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ email, password }),
});
if (!response.ok) {
throw new Error('Login failed. Please check your credentials.');
}
const data = await response.json();
// Store token in sessionStorage
window.sessionStorage.setItem('ohif-auth-token', data.access_token);
// Decode token to extract role and user information
let userInfo = data.user;
// Update the auth context
authContext.setUser({
...userInfo,
token: data.access_token,
});
// Set window.config.sasGetToken for the injectAuth function
if (window.config) {
window.config.sasGetToken = () => window.sessionStorage.getItem('ohif-auth-token');
}
// Handle role-specific redirects if specified in response
if (data.redirect_url) {
navigate(data.redirect_url, { replace: true });
} else {
// Redirect to the original destination
navigate(redirectPath, { replace: true });
}
} catch (error) {
console.error('Login error:', error);
setError(error.message || 'Failed to log in. Please try again.');
} finally {
setIsLoading(false);
}
};
return (
<div className="flex h-screen w-screen items-center justify-center bg-black">
<div className="bg-primary-dark w-96 rounded p-8 shadow-lg">
<h1 className="mb-8 text-center text-2xl font-bold text-white">Login to OHIF Viewer</h1>
{error && <div className="mb-4 rounded bg-red-800 px-4 py-2 text-white">{error}</div>}
<form onSubmit={handleLogin}>
<div className="mb-4">
<label className="mb-2 block text-sm font-bold text-white">Email</label>
<input
type="text"
className="focus:shadow-outline w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none"
value={email}
onChange={e => setEmail(e.target.value)}
required
/>
</div>
<div className="mb-6">
<label className="mb-2 block text-sm font-bold text-white">Password</label>
<input
type="password"
className="focus:shadow-outline w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none"
value={password}
onChange={e => setPassword(e.target.value)}
required
/>
</div>
<div className="flex items-center justify-center">
<button
type="submit"
className="focus:shadow-outline w-full rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700 focus:outline-none"
disabled={isLoading}
>
{isLoading ? 'Logging in...' : 'Log In'}
</button>
</div>
</form>
</div>
</div>
);
};
export default Login;

View File

@@ -0,0 +1,131 @@
import React, { useState, useEffect } from 'react';
import { useNavigate, useLocation } from 'react-router-dom';
import { useUserAuthentication } from '@ohif/ui';
const ShortlinkLogin = () => {
const [dob, setDob] = useState('');
const [shortToken, setShortToken] = useState('');
const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate();
const location = useLocation();
const [, authContext] = useUserAuthentication();
// Parse the short token from URL query params
useEffect(() => {
const searchParams = new URLSearchParams(location.search);
const token = searchParams.get('short');
if (token) {
setShortToken(token);
} else {
// No short token found, redirect to regular login
setError('No shortlink token found in URL');
setTimeout(() => {
navigate('/login', { replace: true });
}, 3000);
}
}, [location.search, navigate]);
// Handle form submission
const handleSubmit = async e => {
e.preventDefault();
setError('');
setIsLoading(true);
try {
// Use window.config.goProxyHost for authentication endpoint
const proxyHost = window.config?.goProxyHost || `http://${window.location.hostname}:5555`;
const authEndpoint = `${proxyHost}/auth/shortlink`;
// Call the shortlink authentication endpoint
const response = await fetch(authEndpoint, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ short_token: shortToken, dob }),
});
if (!response.ok) {
throw new Error('Authentication failed. Please check your date of birth and try again.');
}
const data = await response.json();
// Store token in sessionStorage
window.sessionStorage.setItem('ohif-auth-token', data.access_token);
// Decode token to extract user information (if available in token)
let userInfo = data.user;
// Update the auth context
authContext.setUser({
...userInfo,
token: data.access_token,
});
// Set window.config.sasGetToken for the injectAuth function
if (window.config) {
window.config.sasGetToken = () => window.sessionStorage.getItem('ohif-auth-token');
}
// Navigate to the viewer page with the authenticated patient's study
// The actual URL would depend on how studies are loaded in your OHIF instance
if (data.redirect_url) {
navigate(data.redirect_url, { replace: true });
} else {
// Default navigation if no specific redirect is provided
navigate('/', { replace: true });
}
} catch (error) {
console.error('Authentication error:', error);
setError(error.message || 'Failed to authenticate. Please try again.');
} finally {
setIsLoading(false);
}
};
const handleDateChange = e => {
// Format date input as YYYY-MM-DD
setDob(e.target.value);
};
return (
<div className="flex h-screen w-screen items-center justify-center bg-black">
<div className="bg-primary-dark w-96 rounded p-8 shadow-lg">
<h1 className="mb-8 text-center text-2xl font-bold text-white">Patient Access</h1>
{error && <div className="mb-4 rounded bg-red-800 px-4 py-2 text-white">{error}</div>}
<form onSubmit={handleSubmit}>
<div className="mb-6">
<label className="mb-2 block text-sm font-bold text-white">
Please enter your date of birth
</label>
<input
type="date"
className="focus:shadow-outline w-full appearance-none rounded border py-2 px-3 leading-tight text-gray-700 shadow focus:outline-none"
value={dob}
onChange={handleDateChange}
required
/>
<p className="mt-1 text-xs text-gray-400">Format: Bulan - Tanggal - Tahun</p>
</div>
<div className="flex items-center justify-center">
<button
type="submit"
className="focus:shadow-outline w-full rounded bg-blue-500 py-2 px-4 font-bold text-white hover:bg-blue-700 focus:outline-none"
disabled={isLoading || !shortToken}
>
{isLoading ? 'Verifying...' : 'Access My Images'}
</button>
</div>
</form>
</div>
</div>
);
};
export default ShortlinkLogin;

View File

@@ -85,6 +85,38 @@ function WorkList({
const debouncedFilterValues = useDebounce(filterValues, 200);
const { resultsPerPage, pageNumber, sortBy, sortDirection } = filterValues;
/*
* Patch untuk Role checking patient gabisa akses ke study list
*/
const token = window.sessionStorage.getItem('ohif-auth-token');
if (!token) {
return;
}
const decodedToken = decodeToken(token);
// Check jika 'role' = 'patient' tapi akses '/' return ke viewer
if (decodedToken && decodedToken.role === 'patient') {
const currentPath = window.location.pathname + window.location.search;
if (currentPath === '/') {
console.log(
'User is a patient and trying to access the root path. Redirecting to his/her home URL.'
);
window.location.href = `${decodedToken.home_url}`;
}
}
function decodeToken(token) {
try {
const payload = token.split('.')[1];
if (payload) {
return JSON.parse(atob(payload));
}
} catch (e) {
console.error('Error parsing JWT token', e);
}
return null;
}
/*
* The default sort value keep the filters synchronized with runtime conditional sorting
* Only applied if no other sorting is specified and there are less than 101 studies
@@ -542,7 +574,7 @@ function WorkList({
/>
<Onboarding />
<InvestigationalUseDialog dialogConfiguration={appConfig?.investigationalUseDialog} />
<div className="flex flex-col h-full overflow-y-auto">
<div className="flex h-full flex-col overflow-y-auto">
<ScrollArea>
<div className="flex grow flex-col">
<StudyListFilter
@@ -558,9 +590,7 @@ function WorkList({
// ? () => dataSourceConfigurationComponent()
// : undefined
// }
getDataSourceConfigurationComponent={
undefined
}
getDataSourceConfigurationComponent={undefined}
/>
</div>
{hasStudies ? (

View File

@@ -12,6 +12,8 @@ import buildModeRoutes from './buildModeRoutes';
import PrivateRoute from './PrivateRoute';
import PropTypes from 'prop-types';
import { Link } from 'react-router-dom';
import Login from './Login';
import ShortlinkLogin from './ShortlinkLogin';
const NotFoundServer = ({
message = 'Unable to query for studies at this time. Check your data source configuration or network connection',
@@ -74,6 +76,15 @@ const bakedInRoutes = [
path: '/localbasic',
children: Local.bind(null, { modePath: 'viewer/dicomlocal' }),
},
// * Custom Patch untuk Login go-ohif-proxy
{
path: '/login',
children: Login,
},
{
path: '/short-auth',
children: ShortlinkLogin,
},
];
// NOT FOUND (404)

View File

@@ -0,0 +1,72 @@
/**
* Initializes the custom authentication service for OHIF Viewer
* to work with go-ohif-proxy authentication
*/
export function initializeCustomAuth(userAuthenticationService) {
// Set up the authentication service with custom implementation
userAuthenticationService.setServiceImplementation({
// Custom implementation to handle unauthenticated users
handleUnauthenticated: () => {
// Check if there's a shortlink token in the URL
const urlParams = new URLSearchParams(window.location.search);
const shortToken = urlParams.get('short');
// If there's a shortlink token, redirect to the shortlink login page
if (shortToken) {
window.location.href = `/short-auth?short=${shortToken}`;
return null;
}
// Otherwise, handle as normal login flow
// Get the current path for redirect after login
const currentPath = window.location.pathname + window.location.search;
// Clear any existing tokens
window.sessionStorage.removeItem('ohif-auth-token');
// Redirect to login page with the redirect URL in query params
window.location.href = `/login?redirect=${encodeURIComponent(currentPath)}`;
// Return null to prevent rendering while redirecting
return null;
},
// Custom implementation to get the authorization header
// di ohif3.9.1 ini sepertinya masih development
// getAuthorizationHeader: () => {
// const token = window.sessionStorage.getItem('ohif-auth-token');
// return token ? `Bearer ${token}` : undefined;
// },
});
// Set authentication as enabled
userAuthenticationService.set({ enabled: true });
// Check if we already have a token and set the user if we do
const token = window.sessionStorage.getItem('ohif-auth-token');
if (!token) {
return;
}
const decodedToken = decodeToken(token);
// Check jika 'role' = 'patient' tapi akses '/' return ke viewer
if (decodedToken && decodedToken.role === 'patient') {
const currentPath = window.location.pathname + window.location.search;
if (currentPath === '/') {
console.log('User is a patient and trying to access the root path. Redirecting to /patient.');
window.location.href = `${decodedToken.home_url}`;
}
}
function decodeToken(token) {
try {
const payload = token.split('.')[1];
if (payload) {
return JSON.parse(atob(payload));
}
} catch (e) {
console.error('Error parsing JWT token', e);
}
return null;
}
}