Add Zoom Meeting Custom Widget in SAP Analytics Cloud, Analytic Application

[ferrygun18]

In this tutorial, we'll learn how to create a custom widget to launch the Zoom meeting directly from the SAC Analytic App.

Zoom Web SDK

We need to install the Zoom Web SDK and to generate the signature with the following steps:

• Install the Zoom Web SDK from here: zoom.github.io/sample-app-web/.


• Get the API Key and Secret from here: zoom.github.io/sample-app-web/tutorial-register.html.


• Open the file index.js in sample-app-web/Local/js/index.js and replace with your own API Key and Secret.
  


• Run the sample-app-web with command npm start.
  
  


• It will opens up a window at this address: http://127.0.0.1:9999/index.html.
  

Generate the Signature

Each request to start or join a meeting / webinar must be verified by an encrypted signature authorizing each user to enter. A signature must be generated each time you join a meeting or webinar on a backed service where your credentials can be stored securely.

marketplace.zoom.us/docs/sdk/native-sdks/web/build/signature

For quick prototyping (take note that this is not recommended to expose the actual API secret, you should generate it from the server side), we will generate the signature on the client side (custom widget).

We will slightly modify the NodeJS code below to use it in the custom widget code.

Before that, we need to download the following libraries:

• js-base64: www.npmjs.com/package/js-base64
  https://cdn.jsdelivr.net/npm/js-base64@3.5.2/base64.min.js


• crypto-js/hmac-sha256: www.npmjs.com/package/crypto-js
  https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/crypto-js.min.js
  https://cdnjs.cloudflare.com/ajax/libs/crypto-js/4.0.0/hmac-sha256.min.js

And we also need tools.js from the sample app.

This is the final modified code that we will put in the custom widget code:

const data = {

    apiKey: that._export_settings.apiKey,

    apiSecret: that._export_settings.apiSecret,

    meetingNumber: meetingNumber,

    meetingPassword: meetingPassword,

    role: 0

}

let testTool = window.testTool;

let username = testTool.b64EncodeUnicode(name)

let signature = '';

// Prevent time sync issue between client signature generation and zoom

const ts = new Date().getTime() - 30000;

const msg = Base64.encode(data.apiKey + data.meetingNumber + ts + data.role);

const hash = CryptoJS.HmacSHA256(msg, data.apiSecret);

signature = Base64.encodeURI(`${data.apiKey}.${data.meetingNumber}.${ts}.${data.role}.${CryptoJS.enc.Base64.stringify(hash)}`);

console.log(signature);

Custom Widget

We will create a SAPUI5 sap.m.Dialog "Zoom" button and sap.ui.layout.form.SimpleForm for user to enter the meeting number, password and name.

Once user has filled in the information, they click the "Launch" button to launch the Zoom meeting web app.

let joinUrl = 'http://127.0.0.1:9999/meeting.html?name=' + username + '&mn=' + data.meetingNumber + '&email=&pwd=' + data.meetingPassword + '&role=0&lang=en-US&signature=' + signature + '&china=0&apiKey=' + data.apiKey;

console.log(joinUrl);

window.open(joinUrl, "_blank");

Before you run the app, fill in the API Key and Secret properties in the Styling Panel. You can ignore the name, meeting number and password properties. And now you are ready to go.

Demo Video

Conclusion

You can use Zoom API to create a meeting, list meetings, delete a meeting, etc. And you can create any useful functions with those APIs in your custom widget.

marketplace.zoom.us/docs/api-reference/zoom-api/meetings

References

• Build a Custom Widget in SAP Analytics Cloud, Analytics Application


• github.com/ferrygun/SACZoomCustomWidget