Do you have an Example of ...?

Dear OME Team - I have a technical web programming question.

I have created a web application that serves HTML pages, and these pages URL include URLs to retrieve Images from OMERO servers, eg. “https://omero-czi-cpw.mvm.ed.ac.uk/webgateway/render_birds_eye_view/57/175”. However, I have to be logged into the matching OMERO web client in the same browser, for that image to be displayed - otherwise, I get a 404 error - see attached.

I think looking at your documentation (eg. Publishing data using OMERO.web — OMERO 5.6.3 documentation “Reusing OMERO Sessions”) I can supply additional parameters to the Image URL to access the image correctly and not get a 404.

Do you have an example of what these parameters are and how I create them?
(FYI I build the URL by accessing the Server via the JSON API, so I don’t have an existing session)

Many thanks in advance for your help!

Cheers
Mike W

PS. I guessed somewhat at the Topic/Subject to log this under - please amend as you see fit!

1 Like

Hi Mike,

You’ll need to create an OMERO.server session by logging in with a username and password, either via the webclient login page (as you’ve been doing) or via the JSON api.

There’s an example of this at openmicroscopy/index.html at 08e77ac103841d61349283b9e66d445fdbb0fde6 · ome/openmicroscopy · GitHub but it needs some fixing (the CSRF token that’s required to login is not being accepted when I tried it just now).

I’ll have a look and see if I can fix that up.
But it may be easier for you to simply direct your users to the webclient login page, with a query parameter ?url=your-app-url to redirect back to app.
NB: If you’re using omero-web 5.9.0 or later, you’ll need to set Configuration properties glossary — OMERO documentation
$ omero config set omero.web.redirect_allowed_hosts '["your-app-host"]'

Hope that helps,
Will.

OK, I got that example code fixed: (fix JSON login example by will-moore · Pull Request #6276 · ome/openmicroscopy · GitHub).
That could be a starting point if you want to create your own login form?
Regards,
Will.

Fantastic Will - I’ve been on holiday last week (dealing with a toddler), so I’ll look at this tomorrow when I’m back at my “desk”

Many thanks
Mike W

Hi Mike,

OK, so the example above essentially works like this:

  • When you first load the page, it asks you for the server address you wish to connect to. E.g. https://demo.openmicroscopy.org/ (trailing slash is important).
  • From that, it loads the “api” base URL, e.g. https://demo.openmicroscopy.org/api/ to get the available versions of the API supported. Currently there is just one e.g. (https://demo.openmicroscopy.org/api/v0/). From loading that URL, we get the URLs that are needed.
  • It checks for an existing login (in case you’ve already logged-in) by trying to load the Projects.
  • If not logged-in, then it loads the available servers (e.g. https://demo.openmicroscopy.org/api/v0/servers/) since an OMERO.web server can potentially be configured to log into multiple different OMERO servers.
  • It also loads a CSRF token (e.g. https://demo.openmicroscopy.org/api/v0/token/) needed for any POST requests (such as logging in). However, in the bug-fix above, I realise that the token provided by the JSON response cannot be used, but the request does set a csrftoken cookie, and that cookie can be used to retrieve the token and use it for login.
  • When the user chooses a server from the list, and enters their username and password, then we POST to the login url (e.g. https://demo.openmicroscopy.org/api/v0/login/) with the form data of username, password and server (id) along with the csrftoken in the Header as x-csrftoken.
  • If successful, this returns the eventContext as JSON and the page then loads the user’s Projects.

NB: if you try running the code above, serving locally (e.g. with python -m http.server, then this isn’t https and you won’t be able to log into an https server (as in the example URLs above).
Also, the server you’re logging in to, needs to have CORS configured (e.g. see OMERO.web installation on CentOS 7 and IcePy 3.6 — OMERO 5.6.3 documentation)

You can shorten the number of steps above if you already know the OMERO.web server (and OMERO.server) you wish to log in to, only needing to ask users for username and password.

The alternative, it to use the existing webclient login page, with a ?url=... to redirect back to your app.

Hope that helps,
Will.

Many thanks for this Will - this looks like precisely what I need.

I’m just checking about the possibility of getting our OMERO server changed to be CORS enabled and visible via HTTP …

Otherwise, I’m looking at the Redirection solution!

Awesome
MW

1 Like