VL User Session Management

This article is intended to guide you to maintain user session obtained using VL Login API from a non-VL website (Eg: Wordpress etc) to VL website.
Note: The below steps are valid only if the domain names your non-VL website and website are part of a same parent domain.

Eg:
Wordpress site domain -> app.something.com
VL Website domain -> something.com

VL system expects the 'token' and 'user' keys with valid values in browser's localStorage to recognize it at as a valid user session.

On your non-VL website:

To start with the process, generate a random browser session GUID using below code and pass the output response in VL login API query param.

function generateId () {
  const id = _ => Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1)
  return 'browser-'+id() + id() + '-' + id() + '-' + id() + '-' + id() + '-' + id() + id() + id()
}

Sample output browser GUID: browser-3dc4ad87-7ae8-8bc6-5b4b-9df69db9b2a2

Note: It is mandatory that the GUID starts with keyword 'browser'.

Sample Login API:

https://prod-api.viewlift.com/identity/signin?site={site_name}&deviceId=browser-3dc4ad87-7ae8-8bc6-5b4b-9df69db9b2a2

1. Once you use the above VL Login API to login a user on non-VL Website (Wordpress etc.), store the API output in a local javascript object.

Note:

Once you hit the VL Login API, always check the API response for key named as 'code'.

Sample Login API Response:

{
    "authorizationToken": "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1c2VySWQiOiJlNmQwY2ZkYy1kNzQ0LTQ0MzUtOGYxZC1jZjEyMTJiOWZkYTgiLCJzc",
    "refreshToken": "4298b40ba3f4c24ef60e9acf1901f782b2a8b9ed008831d4b55bf9be66cc35aa",
    "userId": "e6d0cfdc-8f1d-cf1212b9fda8",
    "email": "test@viewlift.com",
    "name": "Test",
    "isSubscribed": true,
    "provider": "viewlift",
    "code": "DEVICE_LIMIT_EXCEEDED"
}

In the API response as above, if the value of code is "DEVICE_LIMIT_EXCEEDED" , then merge the key in above local JS object in your code.
This key value pair is used the VL Website system to identify if a user has exceeded the deivce limit or not.

In this case, you can start showing Device Limit Exceeded banner on the top of the page (or whichever designs suits better to your need), so that user can be aware that they will not be able to play any content untill they delete some devices from the "My Account -> Manage Devices" page in web.

2. Update the above obejct by adding a key 'login' in it with value 'email' (if you are using email and password based VL APIs to allow user login).
   If you have enabled mobile number based OTP login in VL APIs, then add the key 'login' with values as 'phone'.

login: "email"

OR

login: "phone"

3. After step 2, store the object in a browser cookie (any name) as:

function setCookie(cname, cvalue, exdays){
 var expires = "expires="+ exdays;
 document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

let userState = {};
userState.user = API_Output;
setCookie('vl-user-data', JSON.stringify(userState));

Final object to be stored in cookie should look like this:

{
   "user":{
      "authorizationToken":"LTMzY2NlYTc5IiwiaWF0IjoxNTk2OTA4OTY1LCJleHAiOjE1OTc1MTM3NjV9.wNY2xEh4xkMCrqRoY0nDb0SzsDWVVHE9jk-Ss9zGnWk",
      "refreshToken":"bfd9fa031808ee1fc1e341839f0ea5deb",
      "userId":"1954b2d-42b4-4970-bde5",
      "email":"test@test.com",
      "name":"Customer Name",
      "isSubscribed":true,
      "provider":"viewlift",
      "login":"email"
   }
}

Note: If you miss to add login:email or phone in above cookie, you might see issues on Account Settings page on VL Website. Some user options like Edit Profile or Change Password will not be visible.

On VL website, using GTM:

1. After the valid logged-in user is redirected to VL website from non-VL website, fetch the 'vl-user-data' cookie from the browser cookies.

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}
var vl-user-data = getCookie("vl-user-data")

2. Store the above complete 'vl-user-data' cookie value in 'user' key in cookie.

function setCookie(cname, cvalue, exdays){
 var expires = "expires="+ exdays;
 document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

function getCookie(cname) {
    var name = cname + "=";
    var decodedCookie = decodeURIComponent(document.cookie);
    var ca = decodedCookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
}

var vl-user-data = getCookie("vl-user-data")

var userData = JSON.parse(vl-user-data);
var parsedUserData = userData.user;
setCookie('user', JSON.stringify(parsedUserData),365);

The final structure after storing should look like this:

{   "authorizationToken":"eymZGI0MTZmYTQ4M2UiLCJzaXRlIjoiaG9pY2hvaXR2Iiwic2l0ZUlkIjoiN2ZhMGVhOWEtOTc5OS00NDE3LTk5ZjUtY2JiNTM0M2M1NTFkIiwiZW1haWwiOiJrYXBpbEB2aWV3bGlmdC5jb20iLCJpcGFkiOjE2MjE5NTkzMTAsImV4cCI6MTYyMjU2NDExMH0.-d432JvgEOj9fDMB06m9Jpf7QFTpE2kMvM4ryVfQYc0",
"refreshToken":"895cea0185961bc67c2a2b1b550e637eea2e43f2b06c7d843cf54bbc14b",
   "userId":"1e9-b497-fdb416fa483e",
   "email":"ddfd@viewlift.com",
   "name":"test",
"picture":"https://lh3.googleusercontent.com/AAAAAAAAA/AMZuucnJc2YCOJYjkQsBH2Co7YLHqdHcbA/s96-c/photo.jpg",
   "isSubscribed":true,
   "provider":"viewlift",
   "providers":[
      "google",
      "viewlift"
   ],
   "passwordEnabled":true,
   "phoneNumber":"+18597626",
   "phoneCode":1,
   "login":"email",
   "country":"BD",
   "registeredOn":"2019-01-24T16:54:22.407Z",
   "registerdVia":"web_browser",
   "emailConsent":false,
   "subscriptionStatus":"DEFERRED_CANCELLATION",
   "idpLogo":null,
   "idpName":null,
   "mvpdProvider":null,
   "purchasedItems":[],
   "whatsappConsent":null
}

Note: The below point is valid only for customers that are using new Monetization Flow.

3. Once the key value in Point 7 is successfully set in localStorage, you need to add below key in browser's session storage.

window.sessionStorage.setItem("sessionFlag", false);