How to Generate the Authorization Token in JavaScript by Using the Embed Secret Key

Published:

Updated:

To render the report in the report server configuration, the serviceAuthorizationToken, reportPath, and reportServiceUrl are required to embed the report viewer reports. Obtain this information from the report server. The authorization token for the user in Bold Reports can be generated using the Embed Secret Key. To do this, pass the following parameters in the request body:

username - Email address of the user.

grant_type - This credential is used to authorize the request for an access token. Valid values: embed_secret.

embed_nonce - A random string value that restricts attackers from hacking. Example 5ff24040-cd74-42cf-a168-57f8cb7dafed.

timestamp - The current time as UNIX timestamp. Example: 1583934776

embed_signature - By using the username, embed_nonce, timestamp, and the embed secret key(which can be generated from Bold Reports Reports server Embed settings) values, the embed_signature value can be generated using the HMACSHA256 algorithm.

To generate an authorization token for JavaScript using the Embed Secret Key in Bold Reports, follow these steps:

Retrieve the Embed Secret Key by referring to this document here and replacing EMBED_SECRET_KEY with the actual Embed Secret Key obtained from Bold Reports.
Change the user name and URL, and run the following code to generate the authorization using the Embed Secret Key.

<html>

<head>  
   <title>Report Viewer first HTML page</title>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>  
   <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/crypto-js.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/hmac-sha256.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/crypto-js/3.1.9-1/enc-base64.min.js"></script>
</head>

<body>  
   <div>
      <div>
         <button onclick="GetTokenWithEmbedSecreKey()">Generate_Token</button>
      </div> 

      <script type="text/javascript">              
         function GetTokenWithEmbedSecreKey(args) {
            var secretCode = "S0HvXs4TQpO9wFKtqtiwmyT5mVh8YVw";  // secret code generated under Embed settings 
            var userName = "guest@boldreports.com"; // email address of the user
            var reportServiceUrl = 'https://on-premise-demo.boldreports.com/reporting/api/site/site1/token'; //Bold Reports Server URL
            var timeStamp = DateTimeToUnixTimeStamp(Date.now()); // current time as UNIX time stamp
            var nonce = createGuid(); // random string
            var embedMessage = "embed_nonce=" + nonce + "&user_email=" + userName + "&timestamp=" + timeStamp;
            var signature = SignURL(embedMessage.toLowerCase(), secretCode);

            $.ajax({
               url: reportServiceUrl,
               dataType: 'json',
               type: 'post',
               contentType: 'application/json',
               data: JSON.stringify({ "grant_type":"embed_secret", "userName": userName, "Embed_Signature" : signature,
                  "Embed_Nonce" : nonce, "timeStamp": timeStamp }),
               processData: false,
               success: function( data, Status){
                  $('#response').html( JSON.stringify( data ) );
                  document.write("Token generated by embed secret key  :\n" + data.access_token);
               },
               error: function(Status, errorThrown ){
                  document.write( errorThrown );
               }
            });
         }

         function SignURL(embedMessage, secretcode){
            var hash = CryptoJS.HmacSHA256(embedMessage, secretcode);
            var hashInBase64 = CryptoJS.enc.Base64.stringify(hash);
            return hashInBase64;
         }
           
         function DateTimeToUnixTimeStamp(date){
            var unixTimeStampInSeconds  =  Math.floor(date / 1000);
            return unixTimeStampInSeconds;
         }

         function createGuid(){  
            function generateGuid() {  
               return (((1+Math.random())*0x10000)|0).toString(16).substring(1);  
            }  
            return (generateGuid() + generateGuid() + "-" + generateGuid() + "-4" + generateGuid().substr(0,3) + "-" + generateGuid() + "-" +
               generateGuid() + generateGuid() + generateGuid()).toLowerCase();  
         } 

        </script>
    </div>
</body>

</html>

Kindly refer to the following screenshot of the output for your reference.

How to Generate the Authorization Token in JavaScript by Using the Embed Secret Key

See Also

Access denied