SSO with External Sites

It is possible to create a site outside of CheckoutChamp that has login capability to a Membership Portal within CheckoutChamp. Any user that logs in will remain logged in when navigating between the sites. The user may also checkout using their card on file.

  • Assumptions

  • Login (when Shopping site is on a different root domain)

  • Logout (when Shopping site is on a different root domain)

  • Login (when Shopping site is on same root domain)

  • Logout (when Shopping site is on same root domain)

Assumptions

This document is for developers attempting to link a non-CheckoutChamp site (“Shopping”) and a CheckoutChamp site (“Checkout”) with a single sign-on. A returning consumer can login on the Shopping site and remain logged in as they navigate between Shopping, Checkout, and Membership sites.

There are 3 sites available

  1. A Shopping site (not in CheckoutChamp)

  2. A Checkout site (in CheckoutChamp)

  3. A Membership login page (in CheckoutChamp). This can be part of a larger Membership Portal, but it can also be only a login page.

These sites can be on the same or different root domain. Checkout and Membership pages can be in the same funnel within CheckoutChamp. If they are in different funnels those funnels must use the same root domain but can use different subdomains.

Login (when Shopping site is on a different root domain)

Login adds a cookie to the Membership site root domain. That cookie contains an access token that expires in 24 hours. Members must login again after 24 hours. Since the Checkout site and Membership site have the same root domain, they will share cookies and will be automatically logged in. Since the Shopping site is on a different root domain, it needs to include an iframe to the Membership site to read the cookie.

Steps to activate login:

  1. Place some kind of Login option on the Shopping site. When the Login option is chosen, redirect the user to the CheckoutChamp membership login page. The proper redirect format is https://www.membership.com/login?redirectToMe=https://www.shoppingsite.com/home

    • “www.membership.com/login” is the CheckoutChamp login page URL

    • “https://www.shoppingsite.com/home” is the Shopping site page where the user is to be returned after successful login

  2. Place the following script into the body of all pages in the Shopping site

    <script>
var membershipdomain = "https://www.membership.com";
var shoppingdomain = "https://www.shoppingsite.com";
var ifrm = document.createElement("iframe");
ifrm.setAttribute("id", "ifmcrossoriginid");
ifrm.setAttribute("name", "ifmcrossorigin");
ifrm.setAttribute("src", membershipdomain + "/iframe.html?shoppingdomain=" + shoppingdomain);
ifrm.setAttribute("class", "btn-primary");
ifrm.style.width = "109px";
ifrm.style.height = "36px";
ifrm.style.border = "none";
if(!navigator.userAgent.includes("Chrome") && navigator.userAgent.includes("Safari") && document.referrer === membershipdomain){
  ifrm.style.display = "block";
  document.getElementById("modal_request_access").appendChild(ifrm);
} else {
  ifrm.style.display = "none";
  document.body.appendChild(ifrm);
}
window.addEventListener("message", (event) => {
  if (event.origin !== membershipdomain)
    return;
  if(event.data == "logoutSuccess") {
    //write code to clear all the session information in your application
  }
  // This event.data will have the first name and the last name.
  console.log(event.data);
}
, false);
function logoutMembership(){
  var iframe = document.getElementById('ifmcrossoriginid');
  var win;
  try { 
    win = iframe.contentWindow;}
  catch(e) { win = iframe.contentWindow;}
  win.postMessage("logout", membershipdomain);
}
</script>

  3. Edit the script and page as follows:

    • Set the membershipdomain variable on line 2 to your Checkout domain. This should be the domain only, not a specific page.

    • Set the shoppingdomain variable on line 3 to your Shopping domain. This should be the domain only, not a specific page.

    • For Chrome, Firefox, and Edge browsers, line 23 displays the returned value from the login event. The line can be removed. It is listed here as an starting point to display login information on the Shopping site, such as a first and last name. This is optional.

    • Safari browsers require user acceptance of the SSO cookie

      • Add a modal form to the Shopping site. The screenshot below is an example.

      • Inside the modal window, create a container section to display buttons. In the screenshot example, the id of this container is “modal_request_access“. Be sure the id given for the container matches line 14 in the body script.

      • After login the container will be used by the script iframe to display an ‘Allow Access’ button.

      • Once the user clicks the 'Allow Access’ button, the Safari browser will prompt the user to allow access to read the Membership domain storage. Once the user allows that, line number 23 will have the user data.

Logout (when Shopping site is on a different root domain)

The script in the Login section contains a logoutMembership() function. Call this function when the user logs out. The user will be logged out from both the Shopping site and Checkout site. It is advised to also remove any login information that you previously saved in the browser, such as user first and last name.

Login (when Shopping site is on same root domain)

Login adds a cookie to the root domain. That cookie contains an access token that expires in 24 hours. Members must login again after 24 hours. Since all the sites have the same root domain, they will share cookies and will be automatically logged in.

  1. Place some kind of Login option on the Shopping site. When the Login option is chosen, redirect the user to the CheckoutChamp membership login page. The proper redirect format is https://member.shoppingsite.com/login?redirectToMe=https://www.shoppingsite.com/home

    • “member.shoppingsite.com/login” is the CheckoutChamp login page URL

    • “https://www.shoppingsite.com/home” is the Shopping site page where the user is to be returned after successful login

  2. Once the user is redirected back to the shopping site, access document.cookie to read the user information. You can also add the following script to read the cookie and add it as a separate javascript objects.

const cookieData = {};
if (document.cookie) {
    var cookies = document.cookie.split(";")
    cookies.forEach(function (d) {
        var cookieName = d.split("=")[0].trim();
        var cookieVal = d.split("=")[1].trim();
        if (cookieVal) {
            cookieData[cookieName] = cookieVal;
        }
    })
}

Logout (when Shopping site is on same root domain)

Add the following script to the Shopping site. Execute clearCookies() when the user logs out. If you wish to keep some cookies specific to the Shopping site, then rewrite clearCookies() to retain the desired cookies.

function clearCookies() {
    const cookies = document.cookie.split("; ");
    cookies.forEach((cookie) => {
        const name = cookie.split("=")[0];
        if (name) {
            setCookie(name, "", false);
        }
    });
    document.cookie = "";
}
function setCookie(name, value, allowCrossOrigin){
    var sameSite = allowCrossOrigin ? "; SameSite=None; Secure" : ";";
    document.cookie = name + "=" + value + "; domain=" + document.domain.split('.').reverse().splice(0,2).reverse().join('.') +  sameSite;    
}
PreviousCustomer Portal (Without Plugin)NextCustomer/Membership Portal