SSO Login & Registration

The Frisbii Media JavaScript SDK includes a built-in SSO object — plenigo.SSO — for embedding login, registration, and password reset flows directly in an iframe on your page. All flows fire the same plenigo.LoginSuccess event on completion.

Installation

The SDK installation is identical to the checkout. Place the script at the end of <body> and add a container element for the iframe:

<div id="plenigoLogin"></div>
<script src="https://static.frisbii-media-stage.com/web/v1/frisbii_media.min.js"
        data-company-id="{your_companyId}"
        data-lang="en"></script>

The `LoginSuccess` event

All SSO flows — login, register, and forgot password — complete by firing plenigo.LoginSuccess. The event detail contains a customerSession string that you pass to your backend to create a server-side session.

document.addEventListener("plenigo.LoginSuccess", function(e) {
    console.info("Session:", e.detail.customerSession);
    // Send the session to your backend to create a server-side session
    location.href = "/start-session/?session=" + e.detail.customerSession;
});

See Sessions & Transfer Tokens for the server-side session creation.

Registration

// Checkout finishes with a javascript-Event one have to listen to
document.addEventListener("plenigo.LoginSuccess", function(e) {
        console.info("Event is: " + e.type);
        console.info(e);
        console.info("Custom data is: ", e.detail);
        // here we redirect to a new page
        location.href = "/start-session/?session=" + e.detail.customerSession;
      });
      // start the process
      var config = {
         elementId:"plenigoLogin" // the DOM element you want to put the iframe in
      };
new plenigo.SSO(config).register();

// Checkout finishes with a javascript-Event one have to listen to
document.addEventListener("plenigo.LoginSuccess", function(e) {
        console.info("Event is: " + e.type);
        console.info(e);
        console.info("Custom data is: ", e.detail);
        // here we redirect to a new page
        location.href = "/start-session/?session=" + e.detail.customerSession;
      });
      // start the process
      var config = {
         elementId:"plenigoLogin" // the DOM element you want to put the iframe in
      };
new plenigo.SSO(config).login();

Forgot password

// Checkout finishes with a javascript-Event one have to listen to
document.addEventListener("plenigo.LoginSuccess", function(e) {
        console.info("Event is: " + e.type);
        console.info(e);
        console.info("Custom data is: ", e.detail);
        // here we redirect to a new page
        location.href = "/start-session/?session=" + e.detail.customerSession;
      });
      // start the process
      var config = {
         elementId:"plenigoLogin" // the DOM element you want to put the iframe in
      };
new plenigo.SSO(config).forgotPassword();

To pre-fill the email address in the forgot password form:

// start the process
      var config = {
         elementId: "plenigoLogin", // the DOM element you want to put the iframe in
         email: "john.doe@example.com" // use config attribute email to set the email address in password forgot form
      };
new plenigo.SSO(config).forgotPassword();

Additional config options

The following optional properties can be added to the config object for any SSO flow:

Property	Type	Default	Description
`email`	`string`	`''`	Pre-fills the email address in login, registration, or forgot password forms.
`source`	`string`	`'plenigoSSO'`	A label for the registration origin. Useful for filtering users by where they signed up.
`showTabs`	`boolean`	`false`	Displays login and registration as tabs at the top of the iframe so the user can switch between them.

var config = {
    elementId: "plenigoLogin",
    email: "john.doe@example.com",
    source: "news-website",
    showTabs: true
};
new plenigo.SSO(config).login();

Documentation Index