Skip to content

Instantly share code, notes, and snippets.

@maitrungduc1410

maitrungduc1410/_silent-check-sso.html

Created January 4, 2023 04:13
Show Gist options
  • Save maitrungduc1410/ec4641363c13d33e4f4cdd5cd148970a to your computer and use it in GitHub Desktop.
Save maitrungduc1410/ec4641363c13d33e4f4cdd5cd148970a to your computer and use it in GitHub Desktop.
Download ZIP
Openedx Keycloak federated login (SSO)
Raw
_silent-check-sso.html
<html>
<body>
<script>
parent.postMessage(location.href, location.origin)
</script>
</body>
</html>
Raw
main.html
## coding=utf-8
## This is the main Mako template that all page templates should include.
## Note: there are a handful of pages that use Django Templates and which
## instead include main_django.html. It is important that these two files
## remain in sync, so changes made in one should be applied to the other.
## Pages currently use v1 styling by default. Once the Pattern Library
## rollout has been completed, this default can be switched to v2.
<%page expression_filter="h"/>
<%! main_css = "style-main-v1" %>
<%namespace name='static' file='static_content.html'/>
<% online_help_token = self.online_help_token() if hasattr(self, 'online_help_token') else None %>
<%!
import six
from lms.djangoapps.branding import api as branding_api
from django.urls import reverse
from django.utils.http import urlquote_plus
from django.utils.translation import ugettext as _
from django.utils.translation import get_language_bidi
from lms.djangoapps.courseware.access import has_access
from openedx.core.djangoapps.site_configuration import helpers as configuration_helpers
from openedx.core.djangolib.js_utils import dump_js_escaped_json, js_escaped_string
from openedx.core.release import RELEASE_LINE
from common.djangoapps.pipeline_mako import render_require_js_path_overrides
%>
<!DOCTYPE html>
<!--[if lte IE 9]><html class="ie ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]-->
<!--[if !IE]><!--><html lang="${LANGUAGE_CODE}"><!--<![endif]-->
<head dir="${static.dir_rtl()}">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="origin-trial" content="${settings.CHROME_DISABLE_SUBFRAME_DIALOG_SUPPRESSION_TOKEN}">
## Define a couple of helper functions to make life easier when
## embedding theme conditionals into templates. All inheriting
## templates have access to these functions, and we can import these
## into non-inheriting templates via the %namespace tag.
## this needs to be here to prevent the title from mysteriously appearing in the body, in one case
<%def name="pagetitle()" />
<%block name="title">
<title>
${static.get_page_title_breadcrumbs(self.pagetitle())}
</title>
</%block>
% if not allow_iframing:
<script type="text/javascript">
/* immediately break out of an iframe if coming from the marketing website */
(function(window) {
if (window.location !== window.top.location) {
window.top.location = window.location;
}
})(this);
</script>
% endif
<%
jsi18n_path = "js/i18n/{language}/djangojs.js".format(language=LANGUAGE_CODE)
ie11_fix_path = "js/ie11_find_array.js"
%>
% if getattr(settings, 'CAPTURE_CONSOLE_LOG', False):
<script type="text/javascript">
var oldOnError = window.onerror;
window.localStorage.setItem('console_log_capture', JSON.stringify([]));
window.onerror = function (message, url, lineno, colno, error) {
if (oldOnError) {
oldOnError.apply(this, arguments);
}
var messages = JSON.parse(window.localStorage.getItem('console_log_capture'));
messages.push([message, url, lineno, colno, (error || {}).stack]);
window.localStorage.setItem('console_log_capture', JSON.stringify(messages));
}
</script>
% endif
<script type="text/javascript" src="${static.url(jsi18n_path)}"></script>
<script type="text/javascript" src="${static.url(ie11_fix_path)}"></script>
<% favicon_url = branding_api.get_favicon_url() %>
<link rel="icon" type="image/x-icon" href="${favicon_url}"/>
<%static:css group='style-vendor'/>
% if '/' in self.attr.main_css:
% if get_language_bidi():
<%
rtl_css_file = self.attr.main_css.replace('.css', '-rtl.css')
%>
<link rel="stylesheet" href="${six.text_type(static.url(rtl_css_file))}" type="text/css" media="all" />
% else:
<link rel="stylesheet" href="${static.url(self.attr.main_css)}" type="text/css" media="all" />
% endif
% else:
<%static:css group='${self.attr.main_css}'/>
% endif
% if disable_courseware_js:
<%static:js group='base_vendor'/>
<%static:js group='base_application'/>
% else:
<%static:js group='main_vendor'/>
<%static:js group='application'/>
% endif
<%static:webpack entry="commons"/>
% if uses_bootstrap:
## xss-lint: disable=mako-invalid-js-filter
<script type="text/javascript" src="${static.url('common/js/vendor/bootstrap.bundle.js')}"></script>
% endif
<script>
window.baseUrl = "${settings.STATIC_URL | n, js_escaped_string}";
(function (require) {
require.config({
baseUrl: window.baseUrl
});
}).call(this, require || RequireJS.require);
</script>
<script type="text/javascript" src="${static.url("lms/js/require-config.js")}"></script>
<%block name="js_overrides">
${render_require_js_path_overrides(settings.REQUIRE_JS_PATH_OVERRIDES) | n, decode.utf8}
</%block>
<%block name="headextra"/>
<%block name="head_extra"/>
<%include file="/courseware/experiments.html"/>
<%include file="/experiments/user_metadata.html"/>
<%static:optional_include_mako file="head-extra.html" is_theming_enabled="True" />
<%include file="widgets/optimizely.html" />
<%include file="widgets/segment-io.html" />
<meta name="path_prefix" content="${EDX_ROOT_URL}">
<% google_site_verification_id = configuration_helpers.get_value('GOOGLE_SITE_VERIFICATION_ID', settings.GOOGLE_SITE_VERIFICATION_ID) %>
% if google_site_verification_id:
<meta name="google-site-verification" content="${google_site_verification_id}" />
% endif
<meta name="openedx-release-line" content="${RELEASE_LINE}" />
<% ga_acct = static.get_value("GOOGLE_ANALYTICS_ACCOUNT", settings.GOOGLE_ANALYTICS_ACCOUNT) %>
% if ga_acct:
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', '${ga_acct | n, js_escaped_string}']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
% endif
<% branch_key = static.get_value("BRANCH_IO_KEY", settings.BRANCH_IO_KEY) %>
% if branch_key and not is_from_mobile_app:
<script type="text/javascript">
(function(b,r,a,n,c,h,_,s,d,k){if(!b[n]||!b[n]._q){for(;s<_.length;)c(h,_[s++]);d=r.createElement(a);d.async=1;d.src="https://cdn.branch.io/branch-latest.min.js";k=r.getElementsByTagName(a)[0];k.parentNode.insertBefore(d,k);b[n]=h}})(window,document,"script","branch",function(b,r){b[r]=function(){b._q.push([r,arguments])}},{_q:[],_v:1},"addListener applyCode banner closeBanner creditHistory credits data deepview deepviewCta first getCode init link logout redeem referrals removeListener sendSMS setBranchViewData setIdentity track validateCode".split(" "), 0);
branch.init('${branch_key | n, js_escaped_string}');
</script>
% endif
</head>
<body class="${static.dir_rtl()} <%block name='bodyclass'/> lang_${LANGUAGE_CODE}">
<!-- CUSTOM CODE -->
<script type="text/javascript" src="/static/js/keycloak.js"></script>
<script>
const isAuthenticated = ${str(user.is_authenticated).lower()}
function initKeycloak() {
const keycloak = new Keycloak({
clientId: 'openedx',
realm: "STEAM",
url: "https://id.steamforvietnam.net",
});
keycloak.init({
onLoad: "check-sso",
silentCheckSsoRedirectUri:
window.location.origin + "/static/_silent-check-sso.html",
flow: "implicit",
}).then(function(authenticated) {
if (authenticated && !isAuthenticated) {
const params = (new URL(document.location)).searchParams;
const next = params.get('next') || '/'
window.location.href = '/auth/login/keycloak/?auth_entry=login&next=' + encodeURIComponent(next)
} else if (!authenticated && isAuthenticated) {
// force logout
const next = window.location.pathname + window.location.search
window.location.href = '/logout?next=' + encodeURIComponent(next)
}
}).catch(function() {
alert('failed to initialize');
});
}
// in logout page, we handle in different way
if (!window.location.pathname.startsWith('/logout')) {
initKeycloak()
}
</script>
<!-- END CUSTOM CODE -->
<%static:optional_include_mako file="body-initial.html" is_theming_enabled="True" />
<div id="page-prompt"></div>
% if not disable_window_wrap:
<div class="window-wrap" dir="${static.dir_rtl()}">
% endif
<%block name="skip_links"/>
<a class="nav-skip sr-only sr-only-focusable" href="#main">${_("Skip to main content")}</a>
% if not disable_header:
<%include file="${static.get_template_path('header.html')}" args="online_help_token=online_help_token" />
<%include file="/preview_menu.html" />
% endif
<%include file="/page_banner.html" />
<div class="marketing-hero"><%block name="marketing_hero"></%block></div>
<div class="content-wrapper main-container" id="content" dir="${static.dir_rtl()}">
${self.body()}
<%block name="bodyextra"/>
</div>
% if not disable_footer:
<%include file="${static.get_template_path('footer.html')}" />
% endif
% if not disable_window_wrap:
</div>
% endif
<%block name="footer_extra"/>
<%block name="js_extra"/>
<%include file="widgets/segment-io-footer.html" />
<script type="text/javascript" src="${static.url('js/vendor/noreferrer.js')}" charset="utf-8"></script>
<script type="text/javascript" src="${static.url('js/utils/navigation.js')}" charset="utf-8"></script>
<script type="text/javascript" src="${static.url('js/header/header.js')}"></script>
<%static:optional_include_mako file="body-extra.html" is_theming_enabled="True" />
<script type="text/javascript" src="${static.url('js/src/jquery_extend_patch.js')}"></script>
</body>
</html>
<%def name="login_query()">${
u"?next={next}".format(
next=urlquote_plus(login_redirect_url if login_redirect_url else request.path)
) if (login_redirect_url or (request and not request.path.startswith("/logout"))) else ""
}</%def>
@maitrungduc1410
Copy link
Author

Idea

Custom main page of Edx, which all other pages inherit, add small piece of JS code, on load, use keycloak.js to check Keycloak session then navigate to edx oauth route if needed

Implementation

We're going to add some CUSTOM CODE to the main.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';
  • need to mount main.html to path /openedx/edx-platform/lms/templates/main.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

Also note that we're skipping initKeycloak if current url is logout. On logout, please follow my gist for federated logout here

Combine this and federated logout, we have a full, working SSO + SLO flow with Openedx and Keycloak

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