Technical Articles
Add Zoom Meeting Custom Widget in SAP Analytics Cloud, Analytic Application
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