Zoom-App-RefApp-Web-Hotfix-20220915

.env.example

@@ -6,8 +6,10 @@ ZOOM_HOST="https://zoom.us"
 # Secret for signing session cookies
 # The reference app uses this to sign the express-session instance
 # Refer to backend/middleware.js line 26
+# Lines starting with a '$' are terminal commands; you'll need the openssl program.  
+#   Run the command in your terminal and capture the output, or you can use what those values are currently set at for now.
 # $ openssl rand -hex 16
-SESSION_SECRET=""
+SESSION_SECRET="YOuCanRePLaCEThiSWithThECommANDAboveLaTER"
 
 # URL where your frontend is served from (can be localhost)
 # Will be set automatically by docker-compose, uncomment if not using docker-compose 
@@ -29,14 +31,18 @@ ZOOM_APP_CLIENT_SECRET=""
 #   https://auth0.com/docs/secure/attack-protection/state-parameters
 #   https://www.rfc-editor.org/rfc/rfc6749#section-10.12
 
+# Lines starting with a '$' are terminal commands; you'll need the openssl program.  
+#   Run the command in your terminal and capture the output, or you can use what those values are currently set at for now.
 # $ openssl rand -hex 16
-ZOOM_APP_OAUTH_STATE_SECRET=""
+ZOOM_APP_OAUTH_STATE_SECRET="YOuCanRePLaCEThiSWithThECommANDAboveLaTER"
 
-# $ openssl rand -hex 16
 # REDIS is used as the DB driver for session management (express-session). Other drivers could be used but
 #   installation of additional packages may be necessary.
 # Refer to the bottom of the README as well
-REDIS_ENCRYPTION_KEY=""
+# Lines starting with a '$' are terminal commands; you'll need the openssl program.  
+#   Run the command in your terminal and capture the output, or you can use what those values are currently set at for now.
+# $ openssl rand -hex 16
+REDIS_ENCRYPTION_KEY="YOuCanRePLaCEThiSWithThECommANDAboveLaTER"
 REDIS_URL=redis://redis:6379/1
 
 # For 3rd party OAuth flow (Auth0 - optional)

README.md

@@ -22,7 +22,8 @@ Requirements:
 Please see the `.env.example` file in the repository.
 
 - Create a `.env` file by copying the example and filling in the values
-  - Lines starting with a '$' are terminal commands; you'll need the openssl program.  Run the command in your terminal and capture the output
+  - If you are in development, use the Client ID and Client secret under `Development`
+  - Lines starting with a '$' are terminal commands; you'll need the openssl program.  Run the command in your terminal and capture the output, or you can use what those values are currently set at for now.
   - Note that the three 'AUTH0' - prefixed fields are optional - see instructions for the Third Party OAuth below.  Leaving out any of these three values will disable this demonstration feature.
 
 ### Start your Ngrok (reverse proxy)
@@ -69,14 +70,49 @@ Follow these instructions for the "Development" section
 
 #### Information
 
-- Please fill out this information accurately, and keep in mind that it will be visible/published to users in production applications. This content will be thoroughly reviewed by the Zoom Apps review team prior to approval of the application.
+- Please fill out the developer contact name and developer contact email fields to test the application locally. In order to submit the application for review, you will need to fill out the rest of the fields. 
 
 #### Features
 
-- Under `Zoom App SDK` click **Add APIs** and add all APIs and events available.
+- Under `Zoom App SDK` click **Add APIs**
+  - For the purposes of this app, please add the following APIs and events:
+    - `allowParticipantToRecord`
+    - `authorize`
+    - `cloudRecording`
+    - `connect`
+    - `expandApp`
+    - `getMeetingContext`
+    - `getMeetingJoinUrl`
+    - `getMeetingParticipants`
+    - `getMeetingUUID`
+    - `getRecordingContext`
+    - `getRunningContext`
+    - `getSupportedjsApis`
+    - `getUserContext`
+    - `listCameras`
+    - `onActiveSpeakerChange`
+    - `onAuthorized`
+    - `onConnect`
+    - `onMeeting`
+    - `onMessage`
+    - `onMyUserContextChange`
+    - `onSendAppInvitation`
+    - `onShareApp`
+    - `openUrl`
+    - `postMessage`
+    - `promptAuthorize`
+    - `removeVirtualBackground`
+    - `sendAppInvitation`
+    - `shareApp`
+    - `showAppInvitationDialog`
+    - `sendAppInvitationToMeetingOwner`
+    - `sendAppInvitationToAllParticipants`
+    - `setVideoMirrorEffect`
+    - `setVirtualBackground`
+    - `showNotification`
   - Users will be asked to consent to these scopes during the add flow before being allowed to use the Zoom App
   - Important: The added or checked items must at least include those in the "capabilities" list in the call to zoomSdk.config in the embedded browser, eg frontend/src/App.js
-- Select any additional features you would like to enable, eg Guest mode, In-client OAuth, Collaborate mode, etc.
+- Select any additional features you would like to enable, eg Guest mode, In-client OAuth, Collaborate mode, etc. For this app, have Guest mode, In-client OAuth, and Collaborate Mode turned on.
   - Important: For legacy reasons, Guest mode is NOT enabled by default. Please make sure your app supports this - particularly relevant for applications live prior to June 2022. Newer applications will want to take advantage of these features from the start
 
 
@@ -162,6 +198,7 @@ This Zoom App uses [create-react-app](https://create-react-app.dev/) for the fro
 
 The frontend app is quite simple:
 - It calls a Zoom REST API endpoint for user data via a backend-hosted proxy that adds user access token to the request
+- It imports the Zoom SDK in `index.html` via a script `<script src="https://appssdk.zoom.us/sdk.min.js"></script>`
 - Offers an example Zoom App SDK configuration to get the running context of the Zoom App.
 - Includes examples of Zoom App SDK method invocations
 

backend/util/encrypt.js

@@ -15,8 +15,8 @@ module.exports = {
 
   beforeDeserialization(ciphertext) {
     const ciphertextBytes = Buffer.from(ciphertext, 'base64')
-    const iv = ciphertextBytes.slice(0, 16)
-    const data = ciphertextBytes.slice(16)
+    const iv = ciphertextBytes.subarray(0, 16)
+    const data = ciphertextBytes.subarray(16)
     const aes = crypto.createDecipheriv(
       'aes-256-cbc',
       process.env.REDIS_ENCRYPTION_KEY,

backend/util/zoom-helpers.js

@@ -12,29 +12,29 @@ function decryptZoomAppContext(
 
   // Get iv length (1 byte)
   const ivLength = buf.readUInt8()
-  buf = buf.slice(1)
+  buf = buf.subarray(1)
 
   // Get iv
-  const iv = buf.slice(0, ivLength)
-  buf = buf.slice(ivLength)
+  const iv = buf.subarray(0, ivLength)
+  buf = buf.subarray(ivLength)
 
   // Get aad length (2 bytes)
   const aadLength = buf.readUInt16LE()
-  buf = buf.slice(2)
+  buf = buf.subarray(2)
 
   // Get aad
-  const aad = buf.slice(0, aadLength)
-  buf = buf.slice(aadLength)
+  const aad = buf.subarray(0, aadLength)
+  buf = buf.subarray(aadLength)
 
   // Get cipher length (4 bytes)
   const cipherLength = buf.readInt32LE()
-  buf = buf.slice(4)
+  buf = buf.subarray(4)
 
   // Get cipherText
-  const cipherText = buf.slice(0, cipherLength)
+  const cipherText = buf.subarray(0, cipherLength)
 
   // Get tag
-  const tag = buf.slice(cipherLength)
+  const tag = buf.subarray(cipherLength)
 
   // AES/GCM decryption
   const decipher = crypto

frontend/src/App.js

@@ -1,7 +1,7 @@
 /* globals zoomSdk */
 import { useLocation, useHistory } from "react-router-dom";
 import { useCallback, useEffect, useState } from "react";
-import { apis, invokeZoomAppsSdk } from "./apis";
+import { apis } from "./apis";
 import { Authorization } from "./components/Authorization";
 import ApiScrollview from "./components/ApiScrollview";
 import "./App.css";
@@ -55,7 +55,6 @@ function App() {
             "onMyUserContextChange",
             "sendAppInvitationToAllParticipants",
             "sendAppInvitation",
-            "authorize",
           ],
           version: "0.16.0",
         });

frontend/src/components/ApiScrollview.js

@@ -1,4 +1,4 @@
-import { React, useState, useEffect } from 'react';
+import { React, useState } from 'react';
 import Button from "react-bootstrap/Button";
 import { apis, invokeZoomAppsSdk } from "../apis";
 import "./ApiScrollview.css";
@@ -11,11 +11,11 @@ function ApiScrollview() {
     setApiSearchText(lowerCase);
   };
 
-  const filteredApis = apis?.filter((e) => {
+  const filteredApis = apis?.filter((api) => {
     if (apiSearchText === '') {
-      return e;
+      return api;
     } else {
-      return e.name.toLowerCase().includes(apiSearchText);
+      return api.name.toLowerCase().includes(apiSearchText);
     }
   });