Using loginPopup with SAML

[mschersten]

This is the standard way to inititalize Connect:

connect.core.initCCP(containerDiv, {
  ccpUrl: ccpUrl,        
  loginPopup: true,
  softphone: {
   allowFramedSoftphone: true
  }
})

loginPopup gives a login window that stays open as a CCP afterward. To close this automatically and return to my custom page, I do the following once the agent is available:

const w = window.open('', connect.MasterTopics.LOGIN_POPUP);
if (w) {
  w.close()
}

As I'm integrating with SAML, though, I want a different performance. I need a different login page entirely, but I still want the extra tab to close automatically, and I want to do it all without setting timers to see if I've logged in yet. In other words, I want it to work just like it does now, but with SAML.

So I've added the following parameter for connect.core.initCCP (specific to this SAML IdP):

loginUrl: 'https://DOMAIN.auth0.com/samlp/CLIENT_ID?RelayState=https://REGION.console.aws.amazon.com/connect/federate/INSTANCE_ID?destination=%2Fconnect%2Fccp'

Then I hacked into streams. Currently, this is where the login URL comes from:

   /**
    * @deprecated
    * We will no longer need this function soon.
    */
   var createLoginUrl = function(params) {
      var redirect = "https://lily.us-east-1.amazonaws.com/taw/auth/code";
      connect.assertNotNull(redirect);

      if (params.alias) {
         return LOGIN_URL_PATTERN
            .replace("{alias}", params.alias)
            .replace("{client_id}", CLIENT_ID_MAP["us-east-1"])
            .replace("{redirect}", global.encodeURIComponent(
               redirect));
      } else {
         return params.ccpUrl;
      }
   };

I've modified this to add:

...
      if (params.loginUrl) {
        return params.loginUrl
      } else if (params.alias) {
         return LOGIN_URL_PATTERN
...

Any thoughts? Presumably this is being deprecated for the alias, but it could be repurposed for this.

[electronicalias]

+1

[electronicalias]

Hey @mschersten

Where did you add the following, I'm trying to achieve exactly the same:
const w = window.open('', connect.MasterTopics.LOGIN_POPUP); if (w) { w.close() }

[mschersten]

That part (not specific to using SAML) needs to be called after the agent is initialized, so

connect.agent(function(agent) { //Do that in here })

[electronicalias]

Awesome, works perfectly now, thank you.

[0-g-r-e-g-0]

This was really informative - thank you very much.
Given that the createLoginUrl function is deprecated, I'm interested to see where it is going. It seems that the alias handling is not flexible when it comes to regions.
It seems pretty clear that your approach needs to be integrated into a long term solution for SSO since the Amazon approach requires a separate URL for authentication+authorisation, which then leads to the CCP URL.

[jagadeeshaby]

Awesome work here.

Just to keep in mind that - createLoginUrl is the internal only method and which is no longer required and it's best to rely on the initCCP method by adding additional loginUrl parameter
which defaults to /connect/login?landat=/connect/ccp (Relative to CCP URL) and in case of SAML we can have the SSO endpoint instead.

and in case of a logout which is -> /connect/logout (Relative to CCP URL)-> would again create this refused to display error as it tries to reload the frame which redirects back to /login by default (not controlled by the initCCP popup manager)

So we could do the following

• same approach -> take the loginUrl as a parameter for initCCP and use the same with the popup manager
• in case of a logout -> instead of reloading the iframe which leads to auto redirection -> we could either open the login popup and refresh after some interval or directly load SSO URL within IFRAME( Note: this needs x-frame-options on the SSO URL set correctly)

[Exponent500]

Awesome work here.

Just to keep in mind that - createLoginUrl is the internal only method and which is no longer required and it's best to rely on the initCCP method by adding additional loginUrl parameter
which defaults to /connect/login?landat=/connect/ccp (Relative to CCP URL) and in case of SAML we can have the SSO endpoint instead.

and in case of a logout which is -> /connect/logout (Relative to CCP URL)-> would again create this refused to display error as it tries to reload the frame which redirects back to /login by default (not controlled by the initCCP popup manager)

So we could do the following

• same approach -> take the loginUrl as a parameter for initCCP and use the same with the popup manager
• in case of a logout -> instead of reloading the iframe which leads to auto redirection -> we could either open the login popup and refresh after some interval or directly load SSO URL within IFRAME( Note: this needs x-frame-options on the SSO URL set correctly)

It's still not clear to me what the resolution is. How do you directly load the SSO URL within the IFRAME when the user clicks to logout?

[jagadeeshaby]

@Exponent500 - As mentioned earlier only possible way is to open the SAML url on the new popup to avoid the additional x-frame settings.

Code changes are merged to the 1.3.2 version.

Closing the issue. please feel free to re-open if the issue still persists.