Okta hosted sign-in widget customization using embedded HTML editor for SAML application

[thisisraman]

Hello, I have TWO applications that are SAML compliant and I have successfully integrated both with Okta, i.e., when I hit the applications’ URLs they are redirected to Okta prompting for user credentials and on providing the right ids, I am logged into my applications.

I have a requirement to customize the Okta sign-in widget for one of the applications and NOT for the other. The requirement is to add a new Help Link for one application. I am using the embedded HTML editor to make these changes under the helplinks section where I want the “Request for more information” link to appear for one application based on the application label.

On reading the documentation, I decided to use the widget’s application awareness (Customization examples | Okta Developer) for my configurations.

Application 1 is the name of my first SAML application and this is my code.

<!--
    "OktaUtil" defines a global OktaUtil object
    that contains methods used to complete the Okta login flow.
 -->
{{{OktaUtil}}}

<script type="text/javascript">
    // "config" object contains default widget configuration
    // with any custom overrides defined in your admin settings.
    var config = OktaUtil.getSignInWidgetConfig();
var requestContext = OktaUtil.getRequestContext(); 
if (requestContext && requestContext.target && requestContext.target.label) {
	if (requestContext.target.label === 'Application 1') {
		config.helpLinks = {
		  custom: [
		  {
			text: 'Sample Text here',
			href: 'https://example.com/help'
		  }
		  ]
		}
	}
}
    // Render the Okta Sign-In Widget
    var oktaSignIn = new OktaSignIn(config);
    oktaSignIn.renderEl({ el: '#okta-login-container' },
        OktaUtil.completeLogin,
        function(error) {
            // Logs errors that occur when configuring the widget.
            // Remove or replace this with your own custom error handler.
            console.log(error.message, error);
        }
    );
</script>

The code is very simple, but irrespective of what I do, my changes don’t get reflected. I tried adding console.log for my requestContext object and a simple console.log(‘Print this’), but none of these statements are getting logged when I hit my application’s URL which gets redirected to Okta.

What am I missing?

[andrea]

Since you’re trying to get the ID for a SAML app and the example in our guide is about an OIDC app, you will need to look in a slightly different place within the requestContext to get the app ID for your SAML app.

I just tested this out and was able to get the id for my SAML app when I attempted to access it via its App Embed Link:

function getClientId() {
      if (!OktaUtil) return undefined;
      
      var requestContext = OktaUtil.getRequestContext();
      console.log('requestContext: ', requestContext);
      // OIDC Apps
      if (requestContext && requestContext.target && requestContext.target.clientId) {
          return requestContext.target.clientId;
      }
      // SAML Apps
      if (requestContext && requestContext.authentication && requestContext.authentication.issuer.id){
          return requestContext.authentication.issuer.id;
      }         
  }

  const clientId = getClientId();
  console.log('Client/App ID: ', clientId)

[andrea]

Also, in my tests, I modify the config based on the clientId value I get back from that function and simply set the brand color (which changes my sign in button color) for two specific applications. You may just have an issue due to the requestContext being returned as a promise, which is why I’m returning it via my function.

Here’s the full sample of what I’ve got working:

<script type="text/javascript">
    function getClientId() {
        if (!OktaUtil) return undefined;
      
        var requestContext = OktaUtil.getRequestContext();
        console.log('requestContext: ', requestContext);
        // OIDC Apps
        if (requestContext && requestContext.target && requestContext.target.clientId) {
            return requestContext.target.clientId;
        }
        // SAML Apps
        if (requestContext && requestContext.authentication && requestContext.authentication.issuer.id){
            return requestContext.authentication.issuer.id;
        }         
    }

    const clientId = getClientId();
    console.log('Client/App ID: ', clientId);

    var color = '#12736c';
    // for a specific SAML app
    if (clientId == samlAppId){
        color = '#731251';
    }
    // for a specific OIDC app
    if (clientId == oidcAppId){
        color = '#fcc00a';
    }

    // "config" object contains default widget configuration
    // with any custom overrides defined in your admin settings.
    var config = OktaUtil.getSignInWidgetConfig();

    config.colors = {
        brand: color;
    }

[thisisraman]

Thanks Andrea. I followed your instructions, but there is ZERO trace of this code being executed when I invoke my SAML application. I hit the SAML URL - see screenshot, and I had my HTML editor configured to the way you had provided and still have nothing on my console. I do see the console logs when I go to my xxxx.oktapreview.com/login/preview site, but not when I hit the Embed Link.

<script type="text/javascript">
    function getClientId() {
        if (!OktaUtil) return undefined;
      
        var requestContext = OktaUtil.getRequestContext();
        console.log('requestContext: ', requestContext);
        // OIDC Apps
        if (requestContext && requestContext.target && requestContext.target.clientId) {
            return requestContext.target.clientId;
        }
        // SAML Apps
        if (requestContext && requestContext.authentication && requestContext.authentication.issuer.id){
            return requestContext.authentication.issuer.id;
        }         
    }
    const clientId = getClientId();
    console.log('Client/App ID: ', clientId);

    var config = OktaUtil.getSignInWidgetConfig();

    // Render the Okta Sign-In Widget
    var oktaSignIn = new OktaSignIn(config);

[thisisraman]

The CNAME entries hadn’t yet replicated when I tested, so I was using the default xxx.oktapreview.com URL to access my application. Apparently, the requestContext object only appears when the object is served through the custom domain. So, I attribute my issue to DNS replication