@horizon3/t1-app-zoom

t1-app-zoom

Overview

t1-app-zoom is a Tier1 Frontend Zoom App that integrates with Zoom's OAuth 2.0 authorization flow. This app allows administrators to authorize and interact with Zoom's API securely at the account level. It supports various OAuth scopes and handles the authorization process, including redirecting users to Zoom's authorization endpoint and processing the authorization callback.

TODO

• [ ] Implement Webhooks

Features

• OAuth 2.0 authorization with Zoom
• Supports multiple OAuth scopes
• Handles authorization redirects and callbacks
• Fetches user information from Zoom API
• Verifies Zoom webhooks using a secret token

Publish

To publish this, cd into the US_ZOOM/frontend directory and type:

npm publish

Installation

To install the @horizon3/t1-app-zoom package, you can use yarn in the front end:

yarn add @horizon3/t1-app-zoom

Local Zoom Integration Setup

This section explains how to configure your local development environment to connect with Zoom. It covers common issues (like invalid redirect/callback URL errors) and the necessary steps to create a dedicated Zoom app for your local server.

Error Overview

When testing Zoom integration locally, you may encounter an error like:

Invalid Redirect/Callback URL

This happens when the Zoom account you're using isn't set up to allow the redirect URLs used by your local development server (for example, when using ngrok).

Requirements

• Zoom Account-Level App: Create a new Zoom account-level app dedicated to your local environment following Zoom's Create an OAuth App guide.

• Callback URL Configuration: Ensure the Zoom app is configured with your callback URL, e.g.: https://YOURACCOUNT.ngrok-free.app/api/apps/US_ZOOM/callback

• Environment Variables: Set the following environment variables:

  • APP_US_ZOOM_CLIENT_ID
  • APP_US_ZOOM_CLIENT_SECRET
  • APP_US_ZOOM_SECRET_TOKEN (for verifying webhooks)

• Scopes: At the very least, you must have these two:

  View all user information: user:read:user:admin View and manage sub account's user information: user:read:user:master

Steps to Setup

1. Create a New Zoom App:

   • Visit the Zoom App Marketplace.
   • Select "Create" under the OAuth app type and choose "Account-level app."
   • Enter an app name and click "Create."

2. Configure App Credentials:

   • Note your "Client ID" and "Client Secret."
   • Set the "Redirect URL for OAuth" to your callback URL.
   • Add the same URL to the "Whitelist URL."

3. Define Scopes:

   • Select necessary scopes, e.g., user:read:user:admin, user:read:user:master, and any others, ideally marked at optional.

4. Webhook Configuration:

   • Enable webhooks in your Zoom app settings.
   • Set the webhook endpoint URL to:
     https://YOURACCOUNT.ngrok-free.app/api/apps/US_ZOOM/webhook
   • Generate and configure the secret token for webhook verification.
   • Subscribe to relevant events such as meeting start, end, participant joining, etc.

5. Activate the App:

   • Activate your Zoom app to make it live.

6. Set Up Environment Variables:

   • Set the following environment variables in your local environment:
     • APP_US_ZOOM_CLIENT_ID
     • APP_US_ZOOM_CLIENT_SECRET
     • APP_US_ZOOM_SECRET_TOKEN (for webhook verification)

7. Surface Configuration:

   • Enable app for use in "Meetings" and "Team Chat."
   • Set the home URL for your app:
     https://YOURACCOUNT.ngrok-free.app
   • Address OWASP header warnings by configuring required security headers.

8. Team Chat Subscription:

   • Enable the chatbot functionality to send and receive chat messages.

9. Test the Connection:

   • Run your local environment and initiate the OAuth flow.
   • Verify OAuth and webhook functionality.

Important Notes

• Using Ngrok: Ensure the ngrok URL matches what's configured in your Zoom app.

• Webhook Verification: Your webhook endpoint should verify incoming requests using the APP_US_ZOOM_SECRET_TOKEN.

• Documentation: Update documentation as the integration evolves.