Implement Single sign-on

To implement the Single Sign-on option, the Insticator team will set up the SSO option. Your Account manager will provide you with a secret API key:

Step 1:
Collect secret APIkey setup for your domain(website). Note that the key is unique to each domain/website.

Step 2:
Hash and Encrypt data to create a unique SSO token for each user.

We require email, name, and the unique user id from your system. After you’ve got secret apiKey, create a concatenated string as shown below ( User email;secretKey). See the below example.

[email protected];07fd1128962801921a2a24a57cf4ada6

Then use any JS package SHA512 algorithm, which will produce a signature: See below example.

81ce38b7df94822ce6cc6a44b88bdb630932d753e31c95a57601e5d3d8cf412125080e53e484dfa43767c56f7ce4524bae66287ad377f61ddf912f429646c982

Create a JSON payload with Userdata and signature. User data fields ( UUID, Name, and Email - lowercase)

UUID - Any unique identifier that represents a user in your system (alphanumeric value). For e.g. it could be a subscriberId, customerId, any other internal reference that is unique.
Name - First name and Last name of the end-user ( This is used for Display name in comment unit).
Email - Email address associated with the end-user.

{"uuid": "12asd2323", "name": "Sample User Name", "email": "[email protected]", "signature":"81ce38b7df94822ce6cc6a44b88bdb630932d753e31c95a57601e5d3d8cf412125080e53e484dfa43767c56f7ce4524bae66287ad377f61ddf912f429646c982"}

Generating the SSO token is the last stage of the process. Encode the JSON payload with base64 (using UTF8 encoding) to generate the token which will be passed as a JS function in the next step. here is a sample code - DO NOT USE.

eyJ1dWlkIjogIjAwMDAwMDAwLTAwMDAtMDAwMC0wMDAwLTAwMDAwMDAwMDAwMCIsICJ1c2VybmFtZSI6ICJTYW1wbGUgVXNlciBOYW1lIiwgImVtYWlsIjogIm5hbWVAZW1haWwuY29tIiwgInNpZ25hdHVyZSI6IjgxY2UzOGI3ZGY5NDgyMmNlNmNjNmE0NGI4OGJkYjYzMDkzMmQ3NTNlMzFjOTVhNTc2MDFlNWQzZDhjZjQxMjEyNTA4MGU1M2U0ODRkZmE0Mzc2N2M1NmY3Y2U0NTI0YmFlNjYyODdhZDM3N2Y2MWRkZjkxMmY0Mjk2NDZjOTgyIn0=

Step 3:

This code can be placed anywhere between the Insticator header code and the first Insticator product body code on the page). See below code snippet.

window.Insticator.load('customSSO', {
    SSOToken: '',
    openAuth: function () {}
})

Where SSOToken is the token you’ve generated in the previous step, and openAuth is the function that is going to be called, when a not logged user clicked the ‘Log in’ button in one of the Insticator products on your page.

For example, let's place it right after the Insticator header code. So you will have something like this on your page. ( e.g. token - DO NOT USE)

<head>
 <!-- INSTICATOR HEADER CODE -->
 <script data-cfasync="false"
   type="text/javascript">(function (a, c, s, u) { 'Insticator' in a || (a.Insticator = { ad: { loadAd: function (b) { Insticator.ad.q.push(b) }, q: [] }, helper: {}, embed: {}, version: "4.0", q: [], load: function (t, o) { Insticator.q.push({ t: t, o: o }) } }); var b = c.createElement(s); b.src = u; b.async = !0; var d = c.getElementsByTagName(s)[0]; d.parentNode.insertBefore(b, d) })(window, document, 'script', 'https://s3.amazonaws.com/insticator-mks-staging/ads-code/33ba6687-7e9b-4263-b054-04fea9716cfc.js')</script>
 <script async type="text/javascript"
   src="https://product.hunchme.com/product-loader-code/33ba6687-7e9b-4263-b054-04fea9716cfc.js"></script>
 <!-- END INSTICATOR HEADER CODE -->
 <script>
   window.Insticator.load('customSSO', {
     SSOToken: 'eyJ1dWlkIjogIjAwMDAwMDAwLTAwMDAtMDAwMC0wMDAwLTAwMDAwMDAwMDAwMCIsICJ1c2VybmFtZSI6ICJTYW1wbGUgVXNlciBOYW1lIiwgImVtYWlsIjogIm5hbWVAZW1haWwuY29tIiwgInNpZ25hdHVyZSI6IjgxY2UzOGI3ZGY5NDgyMmNlNmNjNmE0NGI4OGJkYjYzMDkzMmQ3NTNlMzFjOTVhNTc2MDFlNWQzZDhjZjQxMjEyNTA4MGU1M2U0ODRkZmE0Mzc2N2M1NmY3Y2U0NTI0YmFlNjYyODdhZDM3N2Y2MWRkZjkxMmY0Mjk2NDZjOTgyIn0=',
     openAuth: function () { alert('Please, log in via the form') }
   })
 </script>
</head>
 

<body>
 <!-- INSTICATOR BODY CODE -->
 <div class="insticator-unit type-products">
   <div class="insticator-ads">
     <div id="div-insticator-ad-cmt-1"></div>
     <div id="div-insticator-ad-cmt-2"></div>
     <script data-cfasync="false"
       type="text/javascript">Insticator.ad.loadAd("div-insticator-ad-cmt-1"); Insticator.ad.loadAd("div-insticator-ad-cmt-2");</script>
   </div>
   <div id="insticator-commenting">
     <div class="instiengage-comments" data-cu-uuid="{cuUuid}" data-ext-page-id="{extPageId}"></div>
     <script>Insticator.load('comments')</script>
   </div>
   <div class="insticator-ads additional">
     <div id="div-insticator-ad-cmt-3"></div>
     <div id="div-insticator-ad-cmt-4"></div>
     <script data-cfasync="false"
       type="text/javascript">Insticator.ad.loadAd("div-insticator-ad-cmt-3"); Insticator.ad.loadAd("div-insticator-ad-cmt-4");</script>
   </div>
 </div>
   <!-- END INSTICATOR BODY CODE -->
</body>

Step 4:
Test the flow to see insticator product load ( For e.g. Comment unit should show up on the page where it’s tested). The user can confirm the login information and can now provide comments. The Single Sign-on option implementation is completed.