(Legacy Chat) Enabling authenticated visitors in the Chat widget

Return to top

1 Comments

  • Andrea Rochira

    Hi there and thanks for this article. 

    This is my objective: enabling Messaging for a closed Zendesk instance (only internal users) and authenticate our users in the web widget of our help center (namely Zendesk Guide, so, I'm not trying to embed the web widget on another public website).

    I'm not a developer but I'm familiar with JavaScript and APIs (I have successfully customized our help center in the past). 

    I figured out how to build and sign a JWT token (by leveraging Crypto-JS in the document_head.hbs file and adding a plain JS snippet in the script.js file, kudos to Jonathan Petitcolas), but I'm stuck at the "$zopim.livechat.authenticate Javascript API" part. 

    What I cannot figure out is how to reach or successfully call this "zopim" API endpoint(s) from the script.js file (if that's the correct location). I keep receiving the message "is not defined" (I don't have this problem if I use the classic web widget and the zE syntax).

    It's all a bit confusing because, as explained here, zopim "API calls must be inserted after the Live Chat Script and wrapped within $zopim(function() { ...  })", but I'm just "automatically embedding the web widget in our help center" (which is a checkbox in the Messaging settings): 

    So my questions are essentially 2:

    1. In my specific scenario (which should be very common), how do I correctly call the zopim APIs and from where?
    2. If step 1 is feasible and provided the snippet I'm using to create/sign a JWT token (see below), how should I customize the $zopim.livechat.authenticate snippet included in this article to work properly in our help center (from the most relevant location)?

    My snippet:

      // Base64 URL encoding function (it uses Crypto-JS library, which is loaded via CDN from the document_head.hbs)
      var encodedSource;
      function base64url(source) {
          "use strict";
          // Encode in classical base64
          encodedSource = CryptoJS.enc.Base64.stringify(source);

          // Remove padding equal characters
          encodedSource = encodedSource.replace(/=+$/, '');

          // Replace characters according to base64url specifications
          encodedSource = encodedSource.replace(/\+/g, '-');
          encodedSource = encodedSource.replace(/\//g, '_');

          return encodedSource;
      }

      function getSignedToken(){
        // header
        var header = {
          "alg": "HS256",
          "typ": "JWT"
        };

        var stringifiedHeader = CryptoJS.enc.Utf8.parse(JSON.stringify(header));
        var encodedHeader = base64url(stringifiedHeader);
        // console.log(encodedHeader);

        // payload
        var payload = {
          "name": usr,
          "email": usrEmail,
          "external_id": usrID,
          "iat": Math.floor(Date.now() / 1000)
        };

        var stringifiedData = CryptoJS.enc.Utf8.parse(JSON.stringify(payload));
        var encodedData = base64url(stringifiedData);
        // console.log(encodedData);

        // unsigned token
        var token = encodedHeader + "." + encodedData;

        // generated in Zendesk 
      var secret = "My_Secret_ID";

        var signature = CryptoJS.HmacSHA256(token, secret);
        signature = base64url(signature);
        // console.log(signature);

        // signed token
        var signedToken = token + "." + signature;
        
        return signedToken;
      }
      
      var jwt = getSignedToken();

    Thanks in advance for reading through my long post, I hope I was able to include all the necessary details. 

    Cheers.

    0

Please sign in to leave a comment.

Powered by Zendesk