The login button is configured to show a Twitter Bootstrap modal dialog.

<a href="#ca-login" data-toggle="modal">Login<Login>

The page contains a Handlebars template for the login form.

<script id="ca-login-template" type="text/x-handlebars-template">

The default tenantlogin.jsp has been modified to return JSON instead of HTML. Show me...

{
  "methods":[
    {
      "logo":{"url":"https:\/\/www.example.com\/static\/img\/login-tiles\/facebook\/facebook.svg"}
      ,"description":"Login with your Facebook account"
      ,"name":"Facebook"
      ,"url":"https:\/\/www.example.com\/affwebservices\/public\/oauthtokenconsumer\/facebook?AuthzServerID=Facebook&RelayState=https%3A%2F%2Fwww.example.com%2Fchs%2Fredirect"
    }
  ]
  ,"application":{"selfregistration":{"enabled":true}}
  ,"tenant":{
    "logo":{"url":"\/static\/img\/ca-logos-svg\/CA_r_1cR.svg"}
    ,"description":null
    ,"name":"CA SiteMinder"
    ,"footerlinks":[
      {"name":"Contact Us","url":"http:\/\/www.ca.com\/us\/contact.aspx"}
      ,{"name":"Privacy Policy","url":"http:\/\/www.ca.com\/"}
      ,{"name":"About Us","url":"http:\/\/www.ca.com\/us\/about-us.aspx"}
    ]
  }
  ,"label":{
    "chsui":{
      "loginscreen":{
        "noauthschemesfound":"No Authentication schemes found"
        ,"login":"Login"
        ,"logintitle":"CA SiteMinder - Login"
      }
    }
  }
}
                

The 'show.bs.modal' event of the modal overlay is triggered and a AJAX request to the SAML2 SP Initiated SSO URL provides a redirect to the modified tenantlogin.jsp. The JSON from tenantlogin.jsp is combined with the login template and the resulting html is shown in the modal login dialog.

$(function(){
  // Triggered on the login show event
  $('#ca-login').on('show.bs.modal', function () {
    // follow redirects and load the JSON data from the modified tenantlogin.jsp
    $.getJSON('/affwebservices/public/saml2authnrequest?ProviderID=authidp')
    .done(function(data) {
      // get and compile the inline template
      var template = Handlebars.compile($('#ca-login-template').html());
      // apply data and inject the template
      $('#ca-login').html(template(data));
    });
  });
});
              

A jquery module (jquery-smsession) was created to make AJAX requests to an unprotected and protected URL to retrieve HTTP Headers for the logged in user.

The URLs are part of an example application that returns HTTP Headers as a JSON object. Show me...

{
  "accept":["text\/html,application\/xhtml+xml,application\/xml;q=0.9,image\/webp,*\/*;q=0.8"]
  ,"accept-encoding":["gzip,deflate,sdch"]
  ,"accept-language":["en-US,en;q=0.8"]
  ,"connection":["keep-alive"]
  ,"content-length":["0"]
  ,"host":["www.example.com"]
  ,"sm_authtype":["Not Protected"]
  ,"sm_sdomain":[".ca.com"]
  ,"sm_transactionid":["181dba63-5fa7da8b-3cada8eb-2dddf7d1-d28124c0-f594"]
  ,"sm_user":[""]
  ,"sm_userdn":[""]
  ,"user-agent":["Mozilla\/5.0 (Windows NT 6.1; WOW64) AppleWebKit\/537.36 (KHTML, like Gecko) Chrome\/31.0.1650.57 Safari\/537.36"]
}
                

After the headers are retrieved, the 'updated.sm.session.user.state' event is triggered.

An event listener updates the visibility of the login and logout buttons based on the user state

// Triggered on user state change
$('body').on('updated.sm.session.user.state', function (e, state) {
  if (state === 'identified') {
    $('#login').addClass('hidden').removeClass('show');
    $('#logout').addClass('show').removeClass('hidden');
  }
  else if (state === 'pending') {
    $('#login').addClass('show').removeClass('hidden');
    $('#logout').addClass('hidden').removeClass('show');
  }
});
              

The AJAX request triggers SiteMinder logout, receives new HTTP Headers as a JSON object, and triggers the 'updated.sm.session.user.state' event.

// Logout
$('#logout').on('click', function (e) {
  e.preventDefault();
  $.smsession('logout');
});