Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@maitrungduc1410

maitrungduc1410/_silent-check-sso.html

Last active January 4, 2023 04:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save maitrungduc1410/d42e8e1c20a2331decf9942b3c08e2d1 to your computer and use it in GitHub Desktop.
Save maitrungduc1410/d42e8e1c20a2331decf9942b3c08e2d1 to your computer and use it in GitHub Desktop.
Download ZIP
Openedx Keycloak Federated Logout (Single sign out)
Raw
_silent-check-sso.html
<html>
<body>
<script>
parent.postMessage(location.href, location.origin)
</script>
</body>
</html>
Raw
logout.html
{% extends "main_django.html" %}
{% load i18n static %}
{% load django_markup %}
{% block title %}{% trans "Signed Out" as tmsg %}{{ tmsg | force_escape }} | {{ block.super }}{% endblock %}
{% block body %}
{% if show_tpa_logout_link %}
<h1>{% trans "You have signed out." as tmsg %}{{ tmsg | force_escape }}</h1>
<p style="text-align: center; margin-bottom: 20px;">
{% blocktrans trimmed asvar sso_signout_msg %}
{start_anchor}Click here{end_anchor} to delete your single signed on (SSO) session.
{% endblocktrans %}
{% interpolate_html sso_signout_msg start_anchor='<a href="'|add:tpa_logout_url|add:'">'|safe end_anchor='</a>'|safe %}
</p>
{% else %}
{% if enterprise_target %}
{% comment %}
For enterprise SSO flow we intentionally drop learner's session.
We are showing this signin message instead of logout message
to avoid any confusion for learner in that case.
{% endcomment %}
<h1>{% trans "We are signing you in." as tmsg %}{{ tmsg | force_escape }}</h1>
<p style="text-align: center; margin-bottom: 20px;">
{% filter force_escape %}
{% blocktrans %}
This may take a minute. If you are not redirected, go to the home page.
{% endblocktrans %}
{% endfilter %}
</p>
{% else %}
<h1>{% trans "You have signed out." as tmsg %}{{ tmsg | force_escape }}</h1>
<p style="text-align: center; margin-bottom: 20px;">
{% blocktrans trimmed asvar signout_msg1 %}
If you are not redirected within 5 seconds, {start_anchor}click here to go to the home page{end_anchor}.
{% endblocktrans %}
{% interpolate_html signout_msg1 start_anchor='<a href="'|add:target|add:'">'|safe end_anchor='</a>'|safe %}
</p>
{% endif %}
<script type="text/javascript" src="{% static 'js/jquery.allLoaded.js' %}"></script>
<!-- CUSTOM CODE -->
<!-- <script type="text/javascript" src="{% static 'js/logout.js' %}"></script> -->
<script type="text/javascript" src="{% static 'js/keycloak.js' %}"></script>
<script>
function initKeycloak() {
const keycloak = new Keycloak({
clientId: 'myclient',
realm: "myrealm",
url: "keycloak.domain",
});
keycloak.init({
onLoad: "check-sso",
silentCheckSsoRedirectUri:
window.location.origin + "/static/_silent-check-sso.html",
flow: "implicit",
}).then(function(authenticated) {
const params = (new URL(document.location)).searchParams;
const next = params.get('next') || '/'
if (authenticated) {
keycloak.logout({
redirectUri: window.location.origin + next
})
} else {
window.location = next
}
}).catch(function() {
alert('failed to initialize');
});
}
initKeycloak()
</script>
<!-- END CUSTOM CODE -->
{% endif %}
<div id="iframeContainer" style="visibility: hidden" data-redirect-url="{{ target }}">
{% for uri in logout_uris %}
<iframe src="{{ uri }}"></iframe>
{% endfor %}
</div>
{% endblock body %}
@maitrungduc1410
Copy link
Author

maitrungduc1410 commented Jan 3, 2023 •
edited

Idea

Custom logout page of Edx, add small piece of JS code, on logout, use keycloak.js to check Keycloak session then call keycloak.logout()

Implementation

We're going to add some CUSTOM CODE to the logout.html page

  • Your Keycloak client must enable Implicit Flow
  • in Keycloak, set Valid post logout redirect URIs and Web origins to your Openedx domain, like https://openedx.mydomain.com
  • in Keycloak >Realm Settings > Security Defenses -> Content Security Policy, add your Edx domain to frame-ancestors. Like: frame-src 'self'; frame-ancestors 'self' openedx.mydomain.com; object-src 'none';
  • comment <script type="text/javascript" src="{% static 'js/logout.js' %}"></script> in logout.html (as shown in logout.html above)
  • need to mount logout.html to path /openedx/edx-platform/lms/templates/logout.html
  • need to have keycloak.js at path /openedx/staticfiles/js/keycloak.js
  • need to place _silent-check-sso.html at path /openedx/staticfiles/_silent-check-sso.html

keycloak.js can be downloaded here: https://www.keycloak.org/downloads

Note that paths above are used in Tutor, update accordingly if you're using different paths

Check my gist for federated login here if you want to have SSO with Keycloak

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment