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.
Prerequisites
- Ngrok
- A Zoom account
- A Zoom user that has Zoom App Developer permissions in their role
Using Ngrok
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.
Create a New Zoom App
Now that you're settled and logged in to your Zoom account, head over to the Zoom App Marketplace at https://marketplace.zoom.us to start.
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:
App Name
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.
Choose app type
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.
Distribution
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.
Configure Your App
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.
App Credentials
Home URL
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.
Client ID and Client Secret
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.
Redirect URL for OAuth
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:
OAuth Allow List
These are the domains the app can use for OAuth redirects, so make sure to add the Redirect URL from above here.
Domain Allow List
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:
appssdk.zoom.us
Additionally, if we connect to any domains from our app, we'll want to add them here too.
Information
Make sure to fill out the information tab with details relevant to your app.
Features
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.
Scopes
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.
Install Your App
Navigate to the Activation tab and click the Add button to install your app:
🎉 Congratulations! 🎉 You've just created your very own Zoom App.
Run Your 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.
Top comments (0)