Embedded viewer within Vue.js app and Google Cloud Healthcare routing

Context

I am trying to embed the OHIF viewer within a Vue.js application. To achieve this i simply followed the embedded viewer deployment recipe. This setup worked and I was able to display the study list and visualise DICOMs properly.

Now, I wish to configure the OHIF viewer to use the Google Cloud Healthcare API as my data source. I also have for goal to hide the study list from the viewer (using the showStudyList: falseoption), and instead rely on custom Vue.js components, filling a similar role but with specific filtering / searching.

Issue

I have to say I am a bit lost on how to configure the viewer properly to route to specific DICOM instances. Actually, I was not even able to display the study list, so that it could handle the routing to the DICOM instances itself.

I followed the Google Cloud Healthcare recipe, and also changed the viewer’s configuration to enable the Google Cloud adapter (comments are from the original config/google.js file):

var containerId = "root";
var componentRenderedOrUpdatedCallback = function() {
    console.log("OHIF Viewer rendered/updated");
};

window.OHIFViewer.installViewer(
    {
        routerBasename: "/",
        enableGoogleCloudAdapter: true,
        servers: {
            // This is an array, but we'll only use the first entry for now
            dicomWeb: []
        },
        // This is an array, but we'll only use the first entry for now
        oidc: [{
            // ~ REQUIRED
            // Authorization Server URL
            authority: "https://accounts.google.com",
    	    client_id: "XXXXXXXXXXXX-XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.apps.googleusercontent.com",
    	    redirect_uri: "/callback", // `OHIFStandaloneViewer.js`
            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
        }],
        studyListFunctionsEnabled: true
    },
    containerId,
    componentRenderedOrUpdatedCallback
);

When landing on the page responsible for installing the viewer, I get prompted to login with a google account (so far so good), but get redirected to the /callback route, which lands I believe nowhere. The comment // OHIFStandaloneViewer.js seems to indicate the callback route is not meant to work with the embedded viewer.

What do you think I am missing here ? Are there any pointers I could follow to make this work ?

[HowardLander]

@dannyrb I actually have what I think may be the exact same question as @Diex. We have already, elsewhere in our platform, performed the Google OIDC workflow and have the token. What I would really like is to be able to set the token as an environment variable: much like the CLIENT_ID env variable directs the viewer to the Google Health API, I’d like to be able set an ENV var called (for example), GOOGLE_CLIENT_TOKEN which when set would bypass the OIDC workflow and provide the token directly to the OHIF code. Does that sound feasible?

[Diex]

in my case (angular) I added:

{ path: 'dicoms', component: OhifComponent }, { path: 'dicoms/callback', component: OhifComponent}, in my Routes[] list.

@dannyrb my question is : how could I override the OHIF Viewer’s auth to simply use the provided token? thx