Hi, we are building an application which displays multiple kind of data, also image data. The frontend is build with React and requests certain backends, i.e. combines them into one UI. In this application we want to add the ohif viewer by using the package @ohif/viewer.
For now it works flawlessly, with the following code:
const Image = (props) => {
const ohifViewerConfig = {
// default: '/'
routerBasename: '#/images',
servers: {
dicomWeb: [
{
name: 'DCM4CHEE',
wadoUriRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/wado',
qidoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
wadoRoot: 'https://server.dcmjs.org/dcm4chee-arc/aets/DCM4CHEE/rs',
qidoSupportsIncludeField: true,
imageRendering: 'wadors',
thumbnailRendering: 'wadors',
},
],
},
};
const containerId = 'ohif'
const componentRenderedOrUpdatedCallback = function() {
console.log('OHIF Viewer rendered/updated');
};
useEffect(() => {
installViewer(
ohifViewerConfig,
containerId,
componentRenderedOrUpdatedCallback
);
});
return (
<React.Fragment>
<div id={containerId} />
</React.Fragment>
)
};
export default Image;
The server entered here, is only an example server taken from your docs. Our server requires authentication and I wonder how we can add the already retrieved JWT into the viewer in the component here. We already have the token, as it is managed by the frontend which requires a login anyways to come to this point. Is there an easy solution?