Apereo CAS - External Identity Provider Selection

Posted by Misagh Moayyed on December 17, 2020 · 5 mins read ·
Content Unavailable
Your browser is blocking content on this website. Please check your browser settings and try again.

When Apereo CAS is configured to hand off the authentication flow to external identity providers, one use case that often pops up is the ability to auto-select the appropriate identity provider based on user affiliations, scope, or tenancy. In simple scenarios, this selection logic is keyed off of the user identifier. For example, the SSO system should be able to auto-select GitHub as the external identity provider, if the user’s given identifier is in the format of user@example.com and so on.

This post describes a modest enhancement to the CAS user interface to allow automatic selection of the correct identity provider based on user identifiers.

Our starting position is as follows:

Configuration

Let’s suppose that a given CAS server is configured to hand off the authentication flow to the following external identity providers:

To handle automatic selection of the correct identity provider, we can start by customizing the loginProviders.html file that contains the appropriate markup for external identity providers. With a tiny amount of Javascript, we can install an event listener that can auto-redirect the user to the appropriate identity provider based on the structure of the provided user id:

<script type="text/javascript">var providers = [];</script>
<!-- 
  Further down in the loop where 
  identity providers are rendered... 
-->
<script th:inline="javascript">
    /*<![CDATA[*/
    providers.push({
        name: /*[[${entry.name}]]*/ ,
        type: /*[[${entry.type}]]*/ ,
        url: /*[[@{${entry.redirectUrl}}]]*/
    });

    function jqueryReady() {
        $("#fm1 #username").on("focusout", function () {
            let user = $("#fm1 #username").val();
            if (user.endsWith("@example.com")) {
                let provider = providers.find(
                  element => element.name === "GitHub");
                $("#passwordSection").hide();
                location.href = provider.url;
            }
        });
    }
    /*]]>*/
</script>

It is important to emphasize that this is a modest user interface enhancement, mostly designed as a matter of convenience to the user and the overall user experience. Other variations of this flow that force the server to execute authorization logic to determine the user’s home identity provider without providing a selection menu can not be handled via client-side enhancements in a secure way and must be pushed back to the backend server.

Need Help?

If you have questions about the contents and the topic of this blog post, or if you need additional guidance and support, feel free to send us a note and ask about consulting and support services.

So…

I hope this review was of some help to you and I am sure that both this post as well as the functionality it attempts to explain can be improved in any number of ways. Please feel free to engage and contribute as best as you can.

Happy Coding,

Misagh Moayyed