fix JSON login example

[will-moore]

What this PR does

Fixes #6274.
Fixes broken JSON api login example discussed at https://forum.image.sc/t/do-you-have-an-example-of/51887

EDIT: Also includes a big refactor of the JavaScript code to make it more readable and to improve usability of the example.

Testing this PR:

• Serve the page locally:

$ cd openmicroscopy/examples/Training/javascript/
python -m http.server

• Go to http://localhost:8000/ in a 'private' browser tab

• Enter a server address to login to. This needs to be:

  • A server that is not https (cookies won't be set from https response to page hosted on http)
  • A server with CORS enabled (not merge-ci)
  • I have only managed to successfully test with a locally-hosted server
  • You need to enter the full base URL, e.g. http://localhost:4080/

• Click Prepare Login
• This loads a page that contains the server address in the URL and shows a login page (with the various configured servers available)

• Enter login details and click Login
• If successful, you should be logged-in and shown a list of the user's Projects.
• Refreshing the page should again show the list of Projects (still logged in)
• Clicking Log out should log you out and re-show the login form

[imagesc-bot]

This pull request has been mentioned on Image.sc Forum. There might be relevant details there:

https://forum.image.sc/t/do-you-have-an-example-of/51887/3

[jburel]

The example should probably be included in the doc. I cannot find anywhere.
We mention the Python/Java examples in https://github.com/ome/omero-documentation/blob/develop/omero/developers/json-api.rst

[will-moore]

Did a big refactor to update the JavaScript code to use async functions instead of callbacks. Makes the code clearer.
Also moved util functions to utils.js and use fetch() to improve clarity.

[will-moore]

@jburel Added link from docs in ome/omero-documentation#2187

[jburel]

[jburel]

It works locally but I cannot get it to work using other servers

[jburel]

Using for example http://merge-ci.openmicroscopy.org/web/ and click prepare login does not direct me to the login page (Chrome)

[jburel]

Same output when I use https://outreach.openmicroscopy.org/web/ (Chrome)

[jburel]

Same problem on Firefox

[will-moore]

I think that the CORS issue above was due to cached data/js, but the CORS issue we're now seeing is because you need to host locally on https, for cookies to work (reading https://web.dev/when-to-use-local-https/)...
Going to try that...

Also, url = url + '/'; was failing when the trailing slash was missing (Fixed).
Another issue is that the URLs returned in the JSON responses don't include https even if that's the URL you use. e.g. https://merge-ci.openmicroscopy.org/web/api/ (https) returns URL http://merge-ci.openmicroscopy.org/web/api/v0/ (http).

[will-moore]

Hosting locally under https as described https://web.dev/how-to-use-local-https/ using https://www.npmjs.com/package/http-server still gives insecure warnings in Chrome.

But the csrftoken cookie is still not set when coming from https. Need additional cookie flags SameSite=None and Secure. Did this locally (and will now apply to merge-ci):

$ pip install django-cookies-samesite
$ omero config append omero.web.middleware '{"index":0.1,"class":"django_cookies_samesite.middleware.CookiesSameSite"}'
$ omero config append omero.web.django_additional_settings '["SESSION_COOKIE_SAMESITE","None"]'
$ omero config append omero.web.django_additional_settings '["CSRF_COOKIE_SECURE","True"]'

EDIT - This breaks login on webclient! Reverting...

[will-moore]

After updating merge-ci server with config above, I see the csrftoken cookie should be set with this header: set-cookie: csrftoken=cmeDT1SCkvFU16tW3wLWWmBj6h2AHrooyq4PoTXOuoBppQSBaeGEc8Oi6U5bjKaP; expires=Wed, 06-Jul-2022 12:39:13 GMT; Max-Age=31449600; Path=/; SameSite=None; Secure

The cookie is set, since subsequent requests include the cookie (and the same cookie is returned each time) BUT document.cookie is still empty (not accessible to JavaScript) so we can't access it to include in the x-csrftoken header.

Tried another approach to include the csrf token in the token response, so it's accessible to JS:

def api_token(request, api_version, **kwargs):
    """Provide CSRF token for current session."""
    token = csrf.get_token(request)

    from django.template import engines
    django_engine = engines['django']
    template = django_engine.from_string("Hello {% csrf_token %}")
    html = template.render({}, request)
    return {"data": token, "html": html}

but that csrf token is different from what's in the csrftoken cookie and changes on each refresh, same as the token which was already there (and doesn't work for POST etc).

Don't know what else to try. So it seems like we don't have a way to support https servers. :(

[will-moore]

@jburel So, I didn't manage to get it working with https, but at least if it works with http then it's an improvement on the current example code (which is actually broken), so it would still be good to get this PR merged.

[jburel]

We switched to https and many did do. So not having working with https is not great. Any progress since last time you looked at the issue

[imagesc-bot]

This pull request has been mentioned on Image.sc Forum. There might be relevant details there:

https://forum.image.sc/t/do-you-have-an-example-of/51887/12

[jburel]

Comment added to the issue #6274