add: shortlink DoB auth page
This commit is contained in:
@@ -3,7 +3,7 @@ window.config = {
|
|||||||
routerBasename: '/',
|
routerBasename: '/',
|
||||||
pacs_document_host: '152.42.173.210',
|
pacs_document_host: '152.42.173.210',
|
||||||
pacs_document_port: 8080,
|
pacs_document_port: 8080,
|
||||||
expertise:false,
|
expertise: false,
|
||||||
enableGoogleCloudAdapter: false,
|
enableGoogleCloudAdapter: false,
|
||||||
// below flag is for performance reasons, but it might not work for all servers
|
// below flag is for performance reasons, but it might not work for all servers
|
||||||
showWarningMessageForCrossOrigin: true,
|
showWarningMessageForCrossOrigin: true,
|
||||||
@@ -48,9 +48,9 @@ window.config = {
|
|||||||
imageRendering: 'wadors',
|
imageRendering: 'wadors',
|
||||||
thumbnailRendering: 'wadors',
|
thumbnailRendering: 'wadors',
|
||||||
enableStudyLazyLoad: true,
|
enableStudyLazyLoad: true,
|
||||||
supportsFuzzyMatching: true,
|
supportsFuzzyMatching: false,
|
||||||
supportsWildcard: true,
|
supportsWildcard: true,
|
||||||
dicomUploadEnabled: true,
|
dicomUploadEnabled: false,
|
||||||
omitQuotationForMultipartRequest: true,
|
omitQuotationForMultipartRequest: true,
|
||||||
configurationAPI: 'ohif.dataSourceConfigurationAPI.google',
|
configurationAPI: 'ohif.dataSourceConfigurationAPI.google',
|
||||||
// defaultDicomStoreConfiguredItems: {
|
// defaultDicomStoreConfiguredItems: {
|
||||||
|
|||||||
131
platform/app/src/routes/ShortlinkLogin.tsx
Normal file
131
platform/app/src/routes/ShortlinkLogin.tsx
Normal 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;
|
||||||
@@ -13,6 +13,7 @@ import PrivateRoute from './PrivateRoute';
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import Login from './Login';
|
import Login from './Login';
|
||||||
|
import ShortlinkLogin from './ShortlinkLogin';
|
||||||
|
|
||||||
const NotFoundServer = ({
|
const NotFoundServer = ({
|
||||||
message = 'Unable to query for studies at this time. Check your data source configuration or network connection',
|
message = 'Unable to query for studies at this time. Check your data source configuration or network connection',
|
||||||
@@ -80,6 +81,10 @@ const bakedInRoutes = [
|
|||||||
path: '/login',
|
path: '/login',
|
||||||
children: Login,
|
children: Login,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/short-auth',
|
||||||
|
children: ShortlinkLogin,
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
// NOT FOUND (404)
|
// NOT FOUND (404)
|
||||||
|
|||||||
@@ -7,6 +7,17 @@ export function initializeCustomAuth(userAuthenticationService) {
|
|||||||
userAuthenticationService.setServiceImplementation({
|
userAuthenticationService.setServiceImplementation({
|
||||||
// Custom implementation to handle unauthenticated users
|
// Custom implementation to handle unauthenticated users
|
||||||
handleUnauthenticated: () => {
|
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
|
// Get the current path for redirect after login
|
||||||
const currentPath = window.location.pathname + window.location.search;
|
const currentPath = window.location.pathname + window.location.search;
|
||||||
|
|
||||||
@@ -21,6 +32,7 @@ export function initializeCustomAuth(userAuthenticationService) {
|
|||||||
},
|
},
|
||||||
|
|
||||||
// Custom implementation to get the authorization header
|
// Custom implementation to get the authorization header
|
||||||
|
// di ohif3.9.1 ini sepertinya masih development
|
||||||
// getAuthorizationHeader: () => {
|
// getAuthorizationHeader: () => {
|
||||||
// const token = window.sessionStorage.getItem('ohif-auth-token');
|
// const token = window.sessionStorage.getItem('ohif-auth-token');
|
||||||
// return token ? `Bearer ${token}` : undefined;
|
// return token ? `Bearer ${token}` : undefined;
|
||||||
|
|||||||
Reference in New Issue
Block a user