Hey Mo 🫡 we're going to keep on the Zoom gears for this week's ticket. Now that we can get an access token, let's use it to create a meeting on the ithacacommunityrecoverytest@gmail.com account. The deadline for this ticket is April 17th @ 11:59pm, but let me know if you need any extension. Alright, let's get into the details!
Git Thangs
Make sure to run git checkout master and git pull origin. There are a few changes to make note of. I created a dummy "Create Meeting" page with a few fields for inputting the Title, Date, and Times. Treat this as a testing page where you will create meetings based on the inputs on these fields. Some new stuff was added to yarn so make sure to run yarn install and yarn dev.
Once you can locally run the application, please make a branch called zoom-create-meeting. Make all changes on this branch.
From 0 mph to Zooming
As a reminder, here are the credentials of our ICR gmail account for testing just in case you need it for anything:
Also as a reminder, the Zoom App we are using is Server-to-Sever OAuth, meaning we set this account such that we have permission and authentication abilities to perform whatever functions we need in the backend (getting meetings, creating a meeting, etc). It is a type of application that allows for server-to-server authentication without requiring user interaction for authentication purposes. So instead of authenticating each user using OAuth, our system authenticates using the credentials of a Zoom account and is granted a token that can be used to make API requests.
Well, now we have the access token! Now all that's left is to supply this token to API requests using the Zoom API to both create and get a meeting. Let's start with creating a meeting.
The First Zoom Meeting in the World (false)
If you have taken a look at the medium fidelities on the figma file, there are a lot of fields to fill in when making a meeting. But these are all still possible when creating a meeting using the Zoom API. However, in this ticket, we'll be focusing on a specific request body that I added in frontend/app/createmeeting/page.tsx in createZoomMeetingRequestBody. So don't worry about how the request body should look like. However, one thing we do need to focus on is creating the POST function to facilitate the connection between our application and Zoom, specifically prompting their POST /users/{userId}/meetings endpoint (one minor change here is that instead of supplying the userId, you will put the email).
In the frontend/api/zoom/ folder, please make a folder called /CreateMeeting/ and add a file route.ts to it. Here is where we will be making a POST request to our desired endpoint. Please add this to the .env file:
This will show you how to use the Access Token when making the POST request. Oh, on the topic of Acess Tokens, whenever before making a POST request to create a meeting, please generate an Access Token to use in the request body when making a request to Zoom API, like this:
cons req = {
method: 'POST',
// A non-existing sample userId is used in the example below.
url: {URL + endpoint},
headers: {
authorization: 'Bearer {Access Token here}',
},
};
Along with this, you would send the body with createZoomMeetingRequestBody. Please read the next section to see what to return. If there is an error with creating the meeting, there might be something else you can try with one slight difference. Please use the 'me' keyword instead of /{userId}/. For more information on this, please check this link out: https://developers.zoom.us/docs/api/rest/using-zoom-apis/#the-me-keyword .
If you need help with implementation details or how it looks like in code, please refer to this repository as it also uses the server-to-server oauth pipeline. It however does not use Node.js and uses Axios and Express instead. But I recommend taking a look at the middlewares/ folder for making the header (bottom of tokenCheck.js) and routes/api/meetings.js for creating a new meeting. While I do eventually want to use Redis as shown in this repo, it is not a priority. So for now, we'll just generate an access token for every request and send it as the header. If you make an assumptions about the code, please make sure to list them in the PR.
How does one GET Zooming?
From the Zoom API documentation:
Note:
For security reasons, the recommended way to programmatically get the updated start_url value after expiry is to call the [Get a meeting](https://developers.zoom.us/api-reference/zoom-api/methods#operation/meeting) API. Refer to the start_url value in the response.
So for security reasons, we should really use the GET endpoint to retrieve all the details of the meeting. Therefore, you will make a request to your GET meeting function in your POST create meeting function. You will simply return the output of the GET endpoint.
To implement the GET Get a Meeting endpoint, please refer to this documentation under the GET get a meeting section. The example repo from above also has an implementation to look at. The only difference here is you need to supply the meeting id in the URL. Extract this after making the POST /users/{userId}/meetings request and send it in the request body to your GET function. For the access token, I think it is fine to pass in the same token from the POST request as well.
Similar to other GET methods we have done in the past, please return a Response object with the Meeting data and a status code or just a failure status code. If you need further clarification about anything, lmk!
Testing your Zooming Limits
Navigate to frontend/app/createmeeting/page.jsx. As I mentioned above, I added a few fields here to have some testing liberty when creating a new meeting, specifically to put the title, date, and times of the meeting. One thing you must do here is make a 'Create' button under these fields. Connect to a handleClick function that will call your POST create a meeting endpoint that you created. This function should look similar to other handleClick functions we implemented in the TestPage. Following that structure. Then console.log() the returned data. If all works out, log into the ithacacommunityrecoverytest@gmail.com account and take a screenshot of the new zoom meeting scheduled. Also, please take a screenshot of the console output and put it in a PR, along with a 2-3 sentence description of what you did!
jeugarte
commented
6 months ago
Hey Mo 🫡 we're going to keep on the Zoom gears for this week's ticket. Now that we can get an access token, let's use it to create a meeting on the
ithacacommunityrecoverytest@gmail.comaccount. The deadline for this ticket is April 17th @ 11:59pm, but let me know if you need any extension. Alright, let's get into the details!Git Thangs
Make sure to run
git checkout masterandgit pull origin. There are a few changes to make note of. I created a dummy "Create Meeting" page with a few fields for inputting the Title, Date, and Times. Treat this as a testing page where you will create meetings based on the inputs on these fields. Some new stuff was added to yarn so make sure to runyarn installandyarn dev.Once you can locally run the application, please make a branch called
zoom-create-meeting. Make all changes on this branch.From 0 mph to Zooming
As a reminder, here are the credentials of our ICR gmail account for testing just in case you need it for anything:
Also as a reminder, the Zoom App we are using is Server-to-Sever OAuth, meaning we set this account such that we have permission and authentication abilities to perform whatever functions we need in the backend (getting meetings, creating a meeting, etc). It is a type of application that allows for server-to-server authentication without requiring user interaction for authentication purposes. So instead of authenticating each user using OAuth, our system authenticates using the credentials of a Zoom account and is granted a token that can be used to make API requests.
Well, now we have the access token! Now all that's left is to supply this token to API requests using the Zoom API to both create and get a meeting. Let's start with creating a meeting.
The First Zoom Meeting in the World (false)
If you have taken a look at the medium fidelities on the figma file, there are a lot of fields to fill in when making a meeting. But these are all still possible when creating a meeting using the Zoom API. However, in this ticket, we'll be focusing on a specific request body that I added in
frontend/app/createmeeting/page.tsxincreateZoomMeetingRequestBody. So don't worry about how the request body should look like. However, one thing we do need to focus on is creating the POST function to facilitate the connection between our application and Zoom, specifically prompting theirPOST /users/{userId}/meetingsendpoint (one minor change here is that instead of supplying the userId, you will put the email).In the
frontend/api/zoom/folder, please make a folder called/CreateMeeting/and add a fileroute.tsto it. Here is where we will be making a POST request to our desired endpoint. Please add this to the.envfile:This is the base URL of all Zoom API endpoints. Please use these secrets whenever needed instead of actually writing out the entire URL. To reach the endpoint, please refer the documentation here: https://developers.zoom.us/docs/api/rest/reference/zoom-api/methods/#operation/meetingCreate
This will show you how to use the Access Token when making the POST request. Oh, on the topic of Acess Tokens, whenever before making a POST request to create a meeting, please generate an Access Token to use in the request body when making a request to Zoom API, like this:
Along with this, you would send the body with
createZoomMeetingRequestBody. Please read the next section to see what to return. If there is an error with creating the meeting, there might be something else you can try with one slight difference. Please use the 'me' keyword instead of /{userId}/. For more information on this, please check this link out: https://developers.zoom.us/docs/api/rest/using-zoom-apis/#the-me-keyword .If you need help with implementation details or how it looks like in code, please refer to this repository as it also uses the server-to-server oauth pipeline. It however does not use Node.js and uses Axios and Express instead. But I recommend taking a look at the
middlewares/folder for making the header (bottom oftokenCheck.js) androutes/api/meetings.jsfor creating a new meeting. While I do eventually want to use Redis as shown in this repo, it is not a priority. So for now, we'll just generate an access token for every request and send it as the header. If you make an assumptions about the code, please make sure to list them in the PR.How does one GET Zooming?
From the Zoom API documentation:
So for security reasons, we should really use the GET endpoint to retrieve all the details of the meeting. Therefore, you will make a request to your GET meeting function in your POST create meeting function. You will simply return the output of the GET endpoint.
To implement the GET Get a Meeting endpoint, please refer to this documentation under the GET get a meeting section. The example repo from above also has an implementation to look at. The only difference here is you need to supply the meeting id in the URL. Extract this after making the
POST /users/{userId}/meetingsrequest and send it in the request body to your GET function. For the access token, I think it is fine to pass in the same token from the POST request as well.Similar to other GET methods we have done in the past, please return a Response object with the Meeting data and a status code or just a failure status code. If you need further clarification about anything, lmk!
Testing your Zooming Limits
Navigate to
frontend/app/createmeeting/page.jsx. As I mentioned above, I added a few fields here to have some testing liberty when creating a new meeting, specifically to put the title, date, and times of the meeting. One thing you must do here is make a 'Create' button under these fields. Connect to a handleClick function that will call your POST create a meeting endpoint that you created. This function should look similar to other handleClick functions we implemented in the TestPage. Following that structure. Then console.log() the returned data. If all works out, log into the ithacacommunityrecoverytest@gmail.com account and take a screenshot of the new zoom meeting scheduled. Also, please take a screenshot of the console output and put it in a PR, along with a 2-3 sentence description of what you did!