Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

Version 1 Next »

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

The article below will show you how to:

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.

The Shopping site must be on a different subdomain than the Checkout site. It is optional that the sites are different root domains. If you place your Checkout and Membership sites in separate funnels, those funnels must use the same subdomain.

Login adds a cookie to each domain. That cookie contains an access token that expires in 24 hours.

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 onto all pages in the Shopping site [Chandra - does it matter where on the page this goes? Head or body?]

    • Replace all instances of “shoppingdomain” with your Shopping domain (www.shoppingsite.com would be the replacement value in our Step 1 example).

    • Replace all instances of “membershipdomain” with your Checkout domain (www.membership.com would be the replacement value in our Step 1 example).

    • For Chrome, Firefox, and Edge browsers, line 22 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 need additional attention to properly store the SSO cookie [Chandra - I do not understand the steps in your document. Let us work on steps that are obvious to less experienced developers. Please provide an example.]

<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")){
  ifrm.style.display = "block";
} else {
  ifrm.style.display = "none";
}
document.body.appendChild(ifrm);
window.addEventListener("message", (event) => {
  if (event.origin !== membershipdomain)
    return;
  // 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>

Logout

The script in the Login section contains a logoutMembership() function. Call this function when the user chooses to logout. 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.


  • No labels