Page Comparison

...

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

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

Code Block

language	js

<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;
  // This event.data will have the first name and the last name.
  if(event.data == "logoutSuccess") {
    //write code to clear all the session information in your application
  }
  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>

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.

...

Versions Compared

Old Version 15

New Version 16

Key