Zoom Meeting Integration in web application — Part 1

Case study how we integrated Zoom Meetings via REST APIs for one our client’s products.

A Little Background

This product is a platform for parents to find and book kids activity classes in their neighbourhood and teachers can use the platform to list their classes, reach out to more moms, and allow them to book the classes online.

The Case

Let the teachers to opt-in and automatically generate a zoom meeting for their configured classes. If a parent books the class, they should be added to that meeting & shall be able to join the meeting hasslefree.

Solution

Our solution is Zoom REST APIs — Zoom’s REST API’s let the application manage users, manage meetings/webinars, pull meeting reports and manage groups and recordings, and many other features.

Step 1: Create an App from Zoom developer account. If you don’t have a developer account, you need to create one from here.

Step 2: Create an OAuth App — app that allows individual users to manage their accounts, which essentially means that teachers will be able to connect there existing zoom accounts, and activate the OAuth App by completing the different steps. Read the further documentation here.
Don’t forget to register “Redirect URL for OAuth”, where the teachers will be redirected after granting access to this OAuth App. Also, the usability of this App is only limited to your own account until it’s successfully published by submitting for a review.

Step 3: Let the teachers authorize the OAuth App to access their zoom accounts. You’ll get the “Publishable URL” specific to your OAuth App from the App profile. This is the URL where the teachers should be redirected.

Get the publish URL for OAuth App

Step 4: Getting an Access Token for the teacher’s account

I. Request User Authorization — When the teacher is redirected at the “Publish URL”, teacher will be presented with a screen to grant access to our OAuth App with the permission scopes we’ve already defined in the OAuth App configuration settings.

Authorize access for our OAuth App — source Zoom docs

If authorized, the teacher will be redirected to the “redirect_uri “with the authorization code in the code query parameter.

https://www.example.com/?code=obBEe8ewaL_KdyNjniT4KPd8ffDWt9fGB

II. Request Access Token — We’ve to make a POST request to this API https://zoom.us/oauth/token with the following query parameters grant_type, code & redirect_uri.
Where the value of grant_type should be authorization_code , code should be code received as a query parameter on the redirect URL & redirect_uri should be the same redirect_uri set in the OAuth App config.

So, finally the API request looks like — https://zoom.us/oauth/token?grant_type=authorization_code&code=obBEe8ewaL_KdYKjnimT4KPd8KKdQt9FQ&redirect_uri=https://www.example.com

Another important parameter is the Authorization token of our OAuth App which tells the zoom which App has request this token. This Authorization token has to sent in “Authorization” header in the below format

{
  "Authorization": "Basic {token}"
}

where the token is generated by encoding a string of the structure Client_ID:Client_Secret in the Base64 format. Here Client_ID & Client_Secret is available in the OAuth App settings.

If successful, the response body will be a JSON representation of the user’s access token:

{
  "access_token": "eyJhbGciOiJIUzUxMiIsInYiOiIyLjAiLCJraWQiOiI8S0lEPiJ9.eyJ2ZXIiOiI2IiwiY2xpZW50SWQiOiI8Q2xpZW50X0lEPiIsImNvZGUiOiI8Q29kZT4iLCJpc3MiOiJ1cm46em9vbTpjb25uZWN0OmNsaWVudGlkOjxDbGllbnRfSUQ-IiwiYXV0aGVudGljYXRpb25JZCI6IjxBdXRoZW50aWNhdGlvbl9JRD4iLCJ1c2VySWQiOiI8VXNlcl9JRD4iLCJncm91cE51bWJlciI6MCwiYXVkIjoiaHR0cHM6Ly9vYXV0aC56b29tLnVzIiwiYWNjb3VudElkIjoiPEFjY291bnRfSUQ-IiwibmJmIjoxNTgwMTQ2OTkzLCJleHAiOjE1ODAxNTA1OTMsInRva2VuVHlwZSI6ImFjY2Vzc190b2tlbiIsImlhdCI6MTU4MDE0Njk5MywianRpIjoiPEpUST4iLCJ0b2xlcmFuY2VJZCI6MjV9.F9o_w7_lde4Jlmk_yspIlDc-6QGmVrCbe_6El-xrZehnMx7qyoZPUzyuNAKUKcHfbdZa6Q4QBSvpd6eIFXvjHw",
  "token_type": "bearer",
  "refresh_token": "eyJhbGciOiJIUzUxMiIsInYiOiIyLjAiLCJraWQiOiI8S0lEPiJ9.eyJ2ZXIiOiI2IiwiY2xpZW50SWQiOiI8Q2xpZW50X0lEPiIsImNvZGUiOiI8Q29kZT4iLCJpc3MiOiJ1cm46em9vbTpjb25uZWN0OmNsaWVudGlkOjxDbGllbnRfSUQ-IiwiYXV0aGVudGljYXRpb25JZCI6IjxBdXRoZW50aWNhdGlvbl9JRD4iLCJ1c2VySWQiOiI8VXNlcl9JRD4iLCJncm91cE51bWJlciI6MCwiYXVkIjoiaHR0cHM6Ly9vYXV0aC56b29tLnVzIiwiYWNjb3VudElkIjoiPEFjY291bnRfSUQ-IiwibmJmIjoxNTgwMTQ2OTkzLCJleHAiOjIwNTMxODY5OTMsInRva2VuVHlwZSI6InJlZnJlc2hfdG9rZW4iLCJpYXQiOjE1ODAxNDY5OTMsImp0aSI6IjxKVEk-IiwidG9sZXJhbmNlSWQiOjI1fQ.Xcn_1i_tE6n-wy6_-3JZArIEbiP4AS3paSD0hzb0OZwvYSf-iebQBr0Nucupe57HUDB5NfR9VuyvQ3b74qZAfA",
  "expires_in": 3599,
  "scope": "user:read:admin"
}

It’s evident from the expires_in parameter that the above access_token expires in an hour.

Now, after an hour when the access_token expires, teachers doesn’t have to go through the whole process again. We can call the same above API to get new access_token by providing the refresh_token received in the JSON response.

https://zoom.us/oauth/token?grant_type=refresh_token&refresh_token=eyJhbGciOiJIUzUxMiIsInYiOiIyLjAiLCJraWQiOiI8S0lEPiJ9.eyJ2ZXIiOiI2IiwiY2xpZW50SWQiOiI8Q2xpZW50X0lEPiIsImNvZGUiOiI8Q29kZT4iLCJpc3MiOiJ1cm46em9vbTpjb25uZWN0OmNsaWVudGlkOjxDbGllbnRfSUQ-IiwiYXV0aGVudGljYXRpb25JZCI6IjxBdXRoZW50aWNhdGlvbl9JRD4iLCJ1c2VySWQiOiI8VXNlcl9JRD4iLCJncm91cE51bWJlciI6MCwiYXVkIjoiaHR0cHM6Ly9vYXV0aC56b29tLnVzIiwiYWNjb3VudElkIjoiPEFjY291bnRfSUQ-IiwibmJmIjoxNTgwMTQ2OTkzLCJleHAiOjIwNTMxODY5OTMsInRva2VuVHlwZSI6InJlZnJlc2hfdG9rZW4iLCJpYXQiOjE1ODAxNDY5OTMsImp0aSI6IjxKVEk-IiwidG9sZXJhbmNlSWQiOjI1fQ.Xcn_1i_tE6n-wy6_-3JZArIEbiP4AS3paSD0hzb0OZwvYSf-iebQBr0Nucupe57HUDB5NfR9VuyvQ3b74qZAfA

This will give you the same JSON response, which will have the new access_token & refresh_token.

Step 5: Create a zoom meeting for the teacher in the teacher’s zoom account. We’ll use the Meeting APIs provided by Zoom.
API of our need is this one https://api.zoom.us/v2/users/me/meetings, where me represents the teacher or alternatively we can use the userId of the teacher’s zoom account by fetching the teacher’s zoom account profile.

Creating a meeting is as simple as calling this POST API with the JSON body

{
 “topic”: “Test Meeting”,
 “type”: 1,
 “timezone”: “Asia/Calcutta”
}

Whole set of the documentation is available here. Utilizing this API you can create a scheduled meeting, recurring meeting, one time meeting, set password for joining the meeting, and other features.

You’ll receive two URLs (start_url & join_url ) in the API response of the API is executed successfully.

start_url — URL to start the meeting. This URL should only be used by the teacher of the meeting and should not be shared with anyone other than the teacher of the meeting as anyone with this URL will be able to login to the Zoom Client as the host of the meeting.

join_url — URL for the parents/kids to join the meeting. This URL should only be shared with parents/kids that you would like to invite for the meeting.