Thanks for joining us again for part two of our three-part series on Zoom Apps. If you missed it, the last section introduced what Zoom Apps are and what they can do. In this section, we'll go over how we can create a Zoom App and how we can best use our granular permissions system.
Before we get started, you'll need a Zoom user account with permission to create a Zoom App. If you're the account admin, you're all set. If you're unsure what your role is, you can check the support article here.
- A Zoom account
- A Zoom user that has Zoom App Developer permissions in their role
If you want to follow along with configuring your app and setting up our sample Zoom App, you'll need Ngrok or another local tunneling tool.
Start a Ngrok tunnel and leave it open while testing the sample app:
$ ngrok http 3000
Save the HTTPS forwarding URL that you see for later and leave Ngrok running. We'll refer to this URL as https://example.ngrok.io.
Note, unless you're using a paid Ngrok plan, Ngrok will regenerate a new URL each time you restart, so we'll only want to use this for quick testing purposes.
Ngrok can also impact the latency and bandwidth of the network connection, so you shouldn't use it for performance or latency testing.
Click the dropdown that says Develop and then click Build App:
You should see a few App types listed on the next page. Click Create under the tile that says Zoom Apps. In the dialog that appears, fill out the initial information:
As you may have guessed, this is your app's name. Choose wisely, as you can't change the app's name from now on, and this will be the app's name if published to the Zoom App Marketplace.
At the time of writing, only user-managed apps are available to create. With user-managed apps, each user will install and authorize the app individually. The access token has data access scoped only to the authorized user.
Leave this option checked if you plan to list your app on the Zoom App Marketplace so that anyone with a Zoom account can install it.
After you click Create, a new Zoom App is created and will be ready to configure.
Now that you've created your app, you should see a page similar to this:
Let's review some essential tabs we can use to configure our app.
This is the landing page for your Zoom App and the URL that Zoom will display when a user opens your app. To run the Sample App, enter your Ngrok URL here.
The Client ID and Secret are similar to a username and password of an app. In that sense, you'll always want to securely store your credentials and never share them or commit them to your repositories.
The OAuth Redirect URL is the URL to which the OAuth flow will redirect once the user has authorized your app. Make sure you add this URL to the OAuth allow list and the Domain Allow List below.
To set this up with our sample app, enter your Ngrok URL with the /auth route appended:
These are the domains the app can use for OAuth redirects, so make sure to add the Redirect URL from above here.
First, we'll want to add the domain for our OAuth Redirect URL and Home page here. This is the domain from our Ngrok URL.
The Sample Apps also use our CDN for the SDK to make sure you add the domain for that CDN:
Additionally, if we connect to any domains from our app, we'll want to add them here too.
Make sure to fill out the information tab with details relevant to your app.
Now that we have our credentials and our app connects to our domain (our Ngrok URL), we are ready for the fun part.
When we navigate to the Features Tab, we can see a lot of different functions and capabilities we can enable for our Zoom App to use.
Access to a feature or function will need to be enabled here for your app to use. Here is where you'll enable APIs or features like Guest Mode or Collaborate Mode. Note: If you add new features to an existing app, they can be used by reinstalling your app.
To set up our Hello World app, we need to click Add APIs under the Zoom App SDK section and select the shareApp API.
Moving on to the scopes tab, we can see that we can add OAuth scopes which define the data our credentials can access. Since we're just setting up a simple app today, select the zoomapp:inmeeting scope and click continue.
Navigate to the Activation tab and click the Add button to install your app:
🎉 Congratulations! 🎉 You've just created your very own Zoom App.
Now that we have our credentials and installed our app, we're ready to set up our Hello World Zoom App and run it from the Zoom Client.
Join us in part three of this series, where we'll use our credentials and Ngrok URL to open our app.