DEV Community: just-zoomit

Troubleshooting Zoom Meeting SDK signature validation

just-zoomit — Thu, 01 Jun 2023 01:35:41 +0000

In this guide, we’ll cover common issues you may run into when generating a signature for the Zoom Meeting SDK.

The Zoom Meeting SDK uses a JSON Web Token (JWT) signature to authorize the SDK and validate your client’s requests to start or join a meeting.

Documentation on this is available here: Meeting SDK Authorization .

We also have a sample signature application which can be used as a good starting point: Sample Meeting SDK Signature App - Node JS

If the signature provided is invalid, the SDK will most commonly respond with one of the following error messages:

Signature is invalid
Invalid SDK App Keys

Invalid signature tokens

Signature tokens may be invalid if they are missing expected formats or fields. If you have an invalid signature, verify the following:

The token has all required fields.
Values in the token are correct
The token exp date matches the expected rules.

Timestamps and expired tokens

Zoom uses Unix Epoch time to determine the creation and expiration time of the token.

The Meeting SDK expects a minimum JWT exp date of 1800 seconds (30 mins) greater than iat value and a maximum value of 48 hours greater than the iat value.

When checking timestamps and expiration, ensure the following:

iat value is the current time.
iat value is long format, not a string.
tokenExp or exp should be in Unix Epoch time.
exp value is greater than tokenExp.

Ensure your server clock has not drifted, and verify the token’s validity period. Epochconverter provides an easy-to-use interface for getting the current date and time in epoch format and future dates.

Example Meeting SDK JWT payloads

The header for the Meeting SDK JWT will be the same across all platforms; however, the payload properties for Mobile/Desktop and Web are slightly different. See examples below:

Web SDK signature payload

For the Web Meeting SDK, include the sdkKey, mn, role, iat, exp, and tokenExp properties. The values for exp and tokenExp will be the same.



{

  "sdkKey": SDK_KEY,

  "mn": MEETING_NUMBER,

  "role": ROLE,

  "iat": 1646937553,

  "exp": 1646944753,

  "tokenExp": 1646944753

}

Mobile/Desktop SDK signature payloads

For apps built using a mobile or desktop Meeting SDK (iOS, Android, macOS, Windows, Electron), include the appKey, exp, and tokenExp properties. The values for exp and tokenExp will be the same.



{

  "appKey": SDK_KEY,

  "iat": 1646937553,

  "exp": 1646944753,

  "tokenExp": 1646944753

}

Web and Mobile/Desktop signatures

For a signature generation function that works across web, mobile, and desktop platforms, include the appKey, sdkKey, exp, tokenExp, mn, and role properties. The values for appKey and sdkKey will be the same, and the values for exp and tokenExp will be the same.



{

  "appKey": SDK_KEY,

  "sdkKey": SDK_KEY,

  "mn": MEETING_NUMBER,

  "role": ROLE,

  "iat": 1646937553,

  "exp": 1646944753,

  "tokenExp": 1646944753

}

Steps to troubleshoot

Reproduce with the sample Node.js app
If you are generating a signature in your application and still getting an invalid signature error, the best first step is to test your credentials with the sample app. For a low-effort way to test manually, take the generated signature from the sample app and enter the signature property value for the SDK. This helps to compare your signature and isolate whether your function is generating the signature correctly.
Verify with JWT.io

JWT.io provides an excellent tool to decode and debug a JSON Web Token. You can use this tool to verify your token’s structure or build a token using a header and payload.

The header includes the signing algorithm and the token type. The payload section describes the authorization granted. It contains the token’s claims, the information passed about the user, and any metadata required.

If signature validation is failing, use JWT.io to decode the signature and verify its format and property values. Here is a demo of what that looks like :

While JWT.io is a great tool for decoding the signature and verifying its format and property values, it's also useful to know how to manually generate an SDK JWT with JWT.io. The video below provides a step-by-step walkthrough of how to do this when starting with the macOS Meeting SDK. In the walkthrough, the SDK JWT used to authorize the SDK is manually generated to rule out any issues with SDK JWT authentication.

Common SDK JWT Validation Issues:

If none of the above works, here are common issues we’ve seen:

Make sure you’re using a Meeting SDK app type, not OAuth or server-to-server OAuth.
If you’re using Math.round() in JavaScript, verify that you’re not returning a timestamp 10-30 seconds greater than your intended value.
Verify the local time on your computer is auto-syncing the system time correctly. It is recommended to generate the signature on the server side, in UTC / GMT to avoid timezone/time sync issues, and also to keep your Client Secret, Secret!
Verify the JSON header or payload uses curly quotes instead of straight quotes.
Verify tokenExp is larger than exp
Verify timestamps are in Unix epoch format and satisfy the following:

Conclusion

In this article, we discussed the process of troubleshooting and resolving Zoom Meeting SDK JWT signature validation issues. We covered how to manually encode and decode SDK JWT, along with methods to validate the signature JSON headers or payload. You can apply this process to other similar situations where you have leveraged JWT with your application. Keep in mind that these methods are not exhaustive, so feel free to share any tips in the comments if anything was missed.

Additional Resources :

Part 2: Section 3 - Building a meeting application in React with Zoom APIs and SDKs

just-zoomit — Tue, 28 Mar 2023 16:45:05 +0000

Build Application components continued

So far we have everything we need to interact with Zoom REST APIs and start/join the Meeting SDK. In the second part of this section, we will focus on creating the necessary React Application components.

Buttons -- InstantMeetingButton

Next we will be developing the Instant Meeting Button component, which will provide users with the ability to join an instant meeting with a single click. To begin, go to the "Button" directory located in the src/pages folder. Inside this directory, run the commands below to create the "InstantMeetingButton.js" file:

// Working DIR: frontend/src/Home/Buttons

 cd ../Home/Buttons 
touch InstantMeetingButton.js

InstantMeetingButton.js

Our next step involves creating a button that triggers the initiation of an instant Zoom meeting. To achieve this, we will make an API request to our application's backend, which will respond with the necessary information. Once we receive the response, we will use a specialized library called "useNavigate," which is built on the React framework to navigate to the Application SDK page and join the meeting successfully. To accomplish this, add the following code:

// Working Directory : frontend/src/components/pages/Dialogs
// File: InstantMeetingButton.js

import React from "react";
import { useNavigate } from "react-router-dom";

import { OrangeButton as InstantMeetingButton } from "./buttonComposition";


export function NewMeetingButton() {
  const navigate = useNavigate();

  const handleSubmit = async (event) => {
    event.preventDefault();

    try {
      const POST_OPTIONS = {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          type: 1,
        }),
      };

      const response = await fetch("/api/zoom/create", POST_OPTIONS);
      const json = await response.json();

      if (!response.ok) {
        throw new Error("Network response was not ok");
      }

      if (json.id && json.password) {
        navigate(`/msdk/?mn=${json.id}&pw=${json.password}`);
      } else {
        console.log("Error: No data received");
      }
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <InstantMeetingButton
          type="submit"
          text="videocam"
          label="New Meeting"
        />
      </form>
    </div>
  );
}

Create Dialogs

Now we're going to create the component that will handle the process of joining a meeting through a dialog box. To get begin, in your terminal navigate to the Home directory and run the following commands to create a new directory called "Dialogs" and generate a new file named "JoinMeetingModal.js":

// Working DIR: frontend/src

cd ../ && mkdir Dialogs && cd  Dialogs 

touch JoinMeetingModal.js && touch Styles.css

JoinMeetingModal

Our next step involves creating the dialog component, which will be developed using React Modal. This library provides an overlay on the screen, giving it visual precedence over all other elements. By using Modal, we can direct the user's attention to a specific point on the screen, show feedback based on our needs, and improve the user experience. The primary advantage of using modals is their independence from the active page, which enables them to add, update, delete, or view information without changing the current URL. Additionally, they are easy to open and close, and the background information is often fully or partially visible.

In the JoinMeetingModal.js file, add the following code:

import React, { useRef, useState } from "react";
import { useNavigate } from "react-router-dom";
import ReactDom from "react-dom";

import "./styles.css";

// Adpoted Component Composition pattern and pass data from child to parent pattern

export const JoinMeetingModal = ({ setShowModal }) => {
  const modalRef = useRef();

  const closeModal = (e) => {
    if (e.target === modalRef.current) {
      setShowModal(false);
    }
  };

  const [state, ] = useState({ role: 1 });
  const { role } = state;
  const id = useRef();
  const password = useRef();
  const navigate = useNavigate();

  const handleSubmit = (event) => {
    event.preventDefault();

    try {
      if (id.current.value === "" || password.current.value === "") {
        alert("Please enter a valid meeting ID and password");
      } else {
        setShowModal(false);
        navigate(`/msdk/?mn=${id.current.value}&pw=${password.current.value}`);
      }
    } catch (error) {
      console.error(error);
    }
  };

  // render the modal JSX in the portal div.
  return ReactDom.createPortal(
    <div className="container" ref={modalRef} onClick={closeModal}>
      <div className="modal">
      <h2>Join Meeting</h2>
        <div>
          <form onSubmit={handleSubmit}>
            <div>
              <input
                type="text"
                id="topic"
                placeholder="Meeting ID"
                ref={id}
                required={true}
              />
            </div>
            &nbsp; &nbsp;
            <div>
              <input
                type="text"
                id="topic"
                placeholder="Meeting Password"
                ref={password}
                required={true}
              />
            </div>
            <hr class="solid"></hr>
            <div>

              <button
                type="submit"
                style={{
                  background: "#808080",

                }}
                onClick={() => setShowModal(false)}
              >
                Cancel
              </button>

              &nbsp; &nbsp;

              <button
                type="submit"
                style={{ background: "#316efd" }}
              >
                {role === 1 ? "Join Meeting" : "Start Meeting"}
              </button>

            </div>

          </form>
        </div>
      </div>
    </div>,
    document.getElementById("portal")
  );
};

Add Modal Styles -- (Convert To Styled Components)

Next we will use the styled-components library, which enables developers to write CSS inside their component files. This library is highly advantageous because it simplifies the process of working with props and state. With styled-components, we do not need to manually pass props to CSS; it is automatically available. This simplifies the process of writing styles that depend on data from the component. Furthermore, styled-components make it possible to keep everything in one file, making it easy to export and reuse components throughout the application.

In the styles.css file, add the following code:

#portal .container {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
  }

  .container .modal {
    z-index: 1;
    width: 350px;
    height: 300px;
    background: white;
    display:grid;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    position: relative;
    animation: animate 0.3s;
  }

  .modal input {
    border-radius: 8px;
  }

  .modal button {
    position: relative;
    bottom: 0px;
    left: 7px;
    width: 140px;
    padding: 4px 5px;
    background: grey;
    color: white;
    font-weight: bold;
    border: none;
    outline: none;
    border-radius: 12px;
    cursor: pointer;
    float : left;
    margin-right: 7px;
  }

  @keyframes animate {
    from {
      transform: scale(0.5);
    }
    to {
      transform: scale(1);
    }
  }

Install Table Dependencies

Our next step involves displaying the Zoom API response data on the UI. To achieve this, we will use the React Data Table Component, which is a simple yet flexible table library that comes with out-of-the-box features such as built-in sorting and pagination.

To install react-data-table-component, in the terminal, run the following command:


Working directory : frontend/src

cd ../../..
npm install -d react-data-table-component

Create Table

Now we're going to create the Table component directory, which will include the TableComponents.js file that will handle component styles and the dateTime.js file that will handle the rendering of the date. To begin, run the following commands in the src directory to create a new directory called "Table" and generate the necessary files - Table.js, TableComponents.js, and dateTime.js:

// Working DIR: frontend/src

cd pages/Home && mkdir Table && cd Table
touch Table.js TableComponents.js dateTime.js

Date & Time

The Date & Time will handle render the date and to the table. In the dateTime.js file, add the following code:


// Working Directory : frontend/src/components/pages/Home/Table/
// File: dateTime.js

const timeOptions = { hour: "2-digit", minute: "2-digit" };
const dateOptions = {
  weekday: "long",
  year: "numeric",
  month: "long",
  day: "numeric",
};

export const element = (
  <div>
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      <h1>{new Date().toLocaleTimeString([], timeOptions)}</h1>
      <h2>{new Date().toLocaleDateString("en-us", dateOptions)}</h2>
    </div>
  </div>
);

Styled Components : TableComponents.js

Next lets create the table styles in a separate file and exporting styled components from it. To achieve this, add the following code to the TableComponents.js file, and then we can import them in the desired files.

In the TableComponents.js file, add the following code:

// Working Directory : frontend/src/components/pages/Home/Table/


import styled from 'styled-components';

const CenterDiv = styled.div`
display: "flex";
flexDirection: "column";
alignItems: "center";
`;

const TableContainer = styled.div`
border: solid .2em #f5f5f5;  
border-radius: 2.5em;
width: auto;
height: auto;
background-color:#ffffff;
`;


const HoverButton = styled.button`
  transition: transform 0.2s cubic-bezier(0.235, 0, 0.05, 0.95);
  box-shadow: 0px 15px 20px rgba(81, 83, 82, 0.4);

  &:hover {
    transform: perspective(1px) scale3d(1.044, 1.044, 1) translateZ(0) !important;
  }

  &:disabled {
    background: grey;
    cursor: not-allowed;
  }
`;


export { TableContainer, CenterDiv, HoverButton }

Table.js

Now we're going to create the Table component, which will handle the retrieval and listing of Zoom Meeting Response data inside a table. To achieve this, add the following code to the Table.js file:

// Working Directory : frontend/src/components/pages/Home/Table/

import React from "react";

import DataTable from "react-data-table-component";

import { useResource } from "../../../hooks/useResource";

import { TableContainer } from "./TableComponents";

import { element } from "./dateTime";

const customStyles = {
  rows: {
    style: {
      minHeight: "35px",
    },
  },
  headCells: {
    style: {
      paddingLeft: "8px",
      paddingRight: "8px",
    },
  },
  cells: {
    style: {
      paddingLeft: "8px",
      paddingRight: "30px",
    },
  },
};


export default function Table({shouldFetch, onRequestClearData}) {

  const listmeetings = useResource("api/zoom/listmeetings");
  const newData = listmeetings?.resources?.meetings?.map((item) => ({
    keyField: item.id,
    topic: item.topic,
  }));

  const handleDelete = (e) => {
    console.log("handleDelete", e);
    alert(`Are you sure you want to delete meeting ${e} ?`);
  };


  const columns = [
    {
      selector: (row) => (
        <div onClick={(e) => e.stopPropagation()}>{row.topic}</div>
      ),
    },
    {
      selector: (row) => (
        <div onClick={(e) => e.stopPropagation()}>{row.keyField}</div>
      ),
    },
    {
      selector: (row) =>
        row.keyField ? (
          <div>
            <button value={row.keyField} onClick={() => handleDelete(row.keyField)}>
              <i class="material-icons large icon-blue"> delete_forever </i>
            </button>
          </div>
        ) : (
          <p>Loading</p>
        ),
    },
  ];


  return (
    <div style={{ maxWidth: "100vw", overflowX: "scroll" }}>
      <TableContainer>
        <div style={{ margin: "10px" }}>
          <DataTable
            title={element}
            columns={columns}
            data={shouldFetch ? newData : []}
            // progressPending={loading}
            customStyles={customStyles}
            pagination
          />
        </div>
      </TableContainer>
    </div>
  );
}

Button Container

Now we're going to create the component that will hold all of the Application Buttons. In the src, run the following commands to change into Buttons directory and create the ButtonsContainer.js file:


// Working Directory: src/pages/Home/Table

cd ../Buttons/ && touch ButtonsContainer.js

Make Button Container

To create the ButtonsContainer component, add the following code to the ButtonsContainer.js file:

// Working Directory : frontend/src/components/pages/Buttons
// File: ButtonsContainer.js

import React, { useState } from "react";
import styled from "styled-components";

import { BlueButton as ListMeetingsButton } from "./buttonComposition";
import { BlueButton as JoinMeetingButton } from "./buttonComposition";

import { NewMeetingButton } from "../Buttons/InstantMeetingButton";
import { JoinMeetingModal } from "../Dialogs/JoinMeetingModal";

const DivContainer = styled.div`
  display: grid;
  grid-template-columns: repeat(3, 2fr);
  grid-gap: 80px;
  padding: 1;
  width: 50%;
  height: 200px;
  flex-direction: row | row-reverse | column | column-reverse;
`;

export default function ButtonsContainer(props) {
  const [showModal, setShowModal] = useState(false);

  const openModal = () => {
    setShowModal(true);
  };

  // Handle data received from child component table switch button
  const handleListMeetingsClick = (event) => {
    event.preventDefault();
    try {
      props.onDataReceived(true);
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <>

        <DivContainer>
          <NewMeetingButton />

          <ListMeetingsButton text="list" label="List" onClick={handleListMeetingsClick} />

          <JoinMeetingButton text="add" label="Join" onClick={openModal} />

          {showModal ? <JoinMeetingModal setShowModal={setShowModal} /> : null}

        </DivContainer>

    </>
  );
}

Create Home Page

Next we are going to create the Home component that will hold the Button Container and Table. In the src, run the following commands to change into Home directory and create the home.js file:

// Working DIR: frontend/src


cd pages/Home && touch Home.js

Home.js

To create the Home component, add the following code to the home.js file:

// Working Directory : frontend/src/components/pages/Home
// File: Home.js

import React, { useState } from "react";
import ButtonsContainer from "./Buttons/ButtonsContainer";

import Table from "./Table/Table";

function Home() {
  const [dataFetched, setDataFetched] = useState(false);

  // Set data received from child component table switch button
  const handleDataReceived = (newData) => {
    console.log(" Handle Data received in Home.js", newData);
    setDataFetched(newData);
  };


  return (
    <>
      <div
        style={{
          display: "flex",
          margin: "auto",
          flexDirection: "row",
          height: "100vh",
          alignItems: "center",
          justifyContent: "center",
        }}
      >
        <div style={{ margin: "auto" }}>
          {" "}
          <ButtonsContainer onDataReceived={handleDataReceived} />
        </div>

        <div style={{ margin: "auto" }}> 
        {" "}

        <Table shouldFetch={dataFetched} onRequestClearData={ ()=> setDataFetched(false)} /> 
        </div>

      </div>
    </>
  );
}

export default Home;

Update App.js

Finally, update the App.js to handling the routing between home and sdk page.

import React from "react";
import { Route, Routes } from "react-router-dom";

import Home from "./components/pages/Home/Home";
import ZoomMSDK from "./components/pages/ZoomMSDK/ZoomMSDK";

function App() {
  return (
    <div className="App">
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/msdk" element={<ZoomMSDK />} />
      </Routes>
    </div>
  );
}

export default App;

Test Project

In the root, run the following command then navigate to your browser.

npm run dev

You should see the following:

Conclusion

In the blog, you built a full stack React Application with Zoom Developer tools: Zoom Rest APIs and Zoom Web Meeting SDK. The app includes some commonly used features such as starting an instant meeting, making Zoom Rest APIs calls to retrieve users Zoom data, and joining Meetings with the click of a button. Hope this blog was helpful! If you're looking for help, know that you’re not alone: you can always come to the Zoom Developer Forum for help or try Developer Support.

Part 2: Section 2 - Building a meeting application in React with Zoom APIs and SDKs

just-zoomit — Tue, 28 Mar 2023 16:43:21 +0000

Build components for Meeting Conference React Application

Up until now, we have constructed the backend and started setting up the frontend. Our next step is to create the React Application components. To do so, let's first create a directory named "components" within the "src" folder, and a subdirectory within it named "hooks". The Application components will be organized into separate folders for each individual component. Each component folder will contain a JavaScript and style sheets that utilize styled components file.

In the src, run the following commands to create a components folder and hooks subdirectory folder:

#Working Directory : frontend/src/

cd frontend/src
mkdir components && cd components
mkdir hooks && cd hooks

touch useResource.js

hooks

We will begin by creating a custom hook that handles making requests to our backend server to retrieve information from Zoom. This approach allows us to separate the component logic and create reusable functions.

import { useState, useEffect } from "react";
import axios from "axios";

export const useResource = (resourceUrl) => {
    const [resources, setResources] = useState([]);
    const [error, setError] = useState(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        (async () => {
            try {
            const response = await axios.get(resourceUrl);
            setResources(response.data);
            setLoading(false);
        } catch (err) {
            setError(err);
            setLoading(false);
        }
        })();
    }, [resourceUrl]);

    return { resources, error, loading };
};

pages

Now we're going to make a folder called "pages". Inside that folder, we'll have separate folders for each page. First, we need to go to the "src" folder and make a new folder called "pages". Then, inside the "pages" folder, we'll make another folder called "Home":

// Working DIR: frontend/src

 cd ../ 

mkdir pages && cd pages && mkdir Home && cd Home

Then inside of the Home, create another folder named "Buttons":

// Working DIR: frontend/src/pages/Home

mkdir Buttons && cd Buttons

Next, we will generate a file named "buttonComposition.js". For this component, we will employ the React component composition pattern, which involves constructing components from other components using explicitly defined props. In this instance, we will implement this pattern to attain reusable application buttons.

// Working DIR: frontend/src

touch buttonComposition.js

Button Composition

Add the following code to defined the styles for the buttons in our application:

// Working Directory : frontend/src/components/pages/buttons
// File: buttonComposition.js

import { HoverButton} from "../Table/TableComponents";

export const Button = ({ size, color, text, label, ...props }) => {
  return (
    <div
      style={{
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      <HoverButton
        style={{
          padding: "0",
          frontSize: size === "large" ? "32px" : "16px",
          background: "#316efd",
          backgroundColor: color,
          display: "grid",
          placeItems: "center",
          borderRadius: "25px",
          width: "100px",
          height: "100px",
          lineHeight: "100px",
          color: "white",
          transition: "transform 0.2s cubic-bezier(0.235, 0, 0.05, 0.95)",
        }}
        {...props}
      >
        <span style={{fontSize: "55px" }} class="material-icons md-55"> {text} </span>
      </HoverButton>

      <p> {label}</p>
    </div>
  );
};

export const OrangeButton = (props) => {
  return <Button {...props} color="#faa92f" />;
};

export const BlueButton = (props) => {
  return <Button {...props} color="#316efd" size="large" />;
};

Embed Zoom Meeting SDK

So far we've used design patterns to achieve component usability and make interacting with our Zoom Rest API's easier to use. Now, we're going to put Zoom Meetings and Webinars right into our React app using something called a CDN. The Zoom Meeting SDK for web has different ways to do this and we'll explore them:

The client view which provides the option to display the Meeting SDK for web as a full page.
The component view which provides the option to display the Meeting SDK for web in components on your page.

In this project, we'll use "client view" for a familiar Zoom Meeting experience. Client view is like the Zoom web client, but it's inside our own web page.

Install Meeting SDK from CDN

To install the Meeting SDK for web via the Meeting SDK CDN, we'll need to add the following scripts and elements to the index.html found in the public folder:

CDN & Dependencies scripts for client view
CSS styles element
zmmtg-root element which will handle client overlays and accessibility.

Here is what the final index.html file looks like:



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">   <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->

    <title>Zoom Clone</title>

     <!-- Add CSS scripts for Client View -->
     <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.6.0/css/bootstrap.css" />
     <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.6.0/css/react-select.css" />

     <!-- Add Meta tag to enable SharedArrayBuffer Web SDK Gallery View and Virtual Backgrounds -->
    <meta http-equiv="origin-trial" content=%REACT_APP_MSDK_ORIGIN_TRAIL% />



  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <div id="portal"></div>

       <!-- Add Scripts for Client View  -->
       <script src="https://source.zoom.us/2.6.0/lib/vendor/react.min.js"></script>
       <script src="https://source.zoom.us/2.6.0/lib/vendor/react-dom.min.js"></script>
       <script src="https://source.zoom.us/2.6.0/lib/vendor/redux.min.js"></script>
       <script src="https://source.zoom.us/2.6.0/lib/vendor/redux-thunk.min.js"></script>
       <script src="https://source.zoom.us/2.6.0/lib/vendor/lodash.min.js"></script>


       <script src="https://source.zoom.us/zoom-meeting-2.6.0.min.js"></script>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

Manage the Zoom Meeting SDK DOM element with CSS

When imported, the Meeting SDK for Web adds new elements to the DOM to handle client overlays and accessibility elements. To manage the Zoom Meeting SDK DOM element within the application, we need to hide the DOM element until it is needed. To do this, simply set the display to none. Otherwise, the screen will be black.

To achieve this, add the following code to the index.css file located in frontend/src/:

/* To hide */
#zmmtg-root {
  display: none;
}

Add Zoom MSDK Code

After adding the Zoom Meeting SDK to the project, we can expect the ZoomMtg to be accessible in the window.To begin, let's create a folder and file for the Zoom SDK. In the 'src' directory, run the following command :

// Working DIR: frontend/src

cd ../.. && mkdir ZoomMSDK
cd ZoomMSDK && touch ZoomMSDK.js

The Zoom Meeting SDK page

We can now proceed to importing the Zoom Meeting SDK into the desired component file. This file will be responsible for performing the following tasks:

Importing the necessary assets for the Zoom Meeting SDK dependency.
Calling a function to obtain an SDW JWT Token that will allow for authorized use of the Zoom Meeting SDK.
Calling a function to initialize and start/join the Zoom Meeting SDK.

To achieve this, copy and paste the code snippet provided below into the ZoomMSDK.js file:

// Working Directory : frontend/src/components/pages/buttons
// File: Buttons.js


import React, {useEffect} from "react";

declare var ZoomMtg;

ZoomMtg.setZoomJSLib("https://source.zoom.us/2.6.0/lib", "/av");

ZoomMtg.preLoadWasm();
ZoomMtg.prepareWebSDK();


function ZoomMSDK() {
// Get Zoom MSDK KEY, Signature endpoint, and leave URL environment variables
const {
  REACT_APP_ZOOM_MSDK_KEY = "",
  REACT_APP_MSDK_SIGNATURE_ENDPOINT = "",
  LEAVE_URL = "http://localhost:3000/",
 } = process.env;

 // Get the meeting number and password from the URL parameters
 const queryParams = new URLSearchParams(window.location.search);
 const mn = queryParams.get("mn");
 const pw = queryParams.get("pw");

// Assign meeting role based on user type
const role = "1"; // 1 for host, 0 for attendee


  const getSignature = (e) => {

    if (e) e.preventDefault();


    const SIGNATURE_OPTIONS = {
      method: "POST",
      headers: { "Content-Type": "application/json"},
      body: JSON.stringify({
        meetingNumber: mn,
        role:  parseInt(role, 10),
      }),
    };

    fetch(REACT_APP_MSDK_SIGNATURE_ENDPOINT, SIGNATURE_OPTIONS)
      .then((data) => data.json())
      .then(({ signature }) => !!signature && startMeeting(signature));
  };


const startMeeting = (signature) => {
  document.getElementById("zmmtg-root").style.display = "block";

  ZoomMtg.init({
      leaveUrl: LEAVE_URL,
      success: (success) => {
        console.log(success)

        ZoomMtg.join({
          signature,
          meetingNumber: mn,
          sdkKey: REACT_APP_ZOOM_MSDK_KEY,
          userName: "Your-UserName",
          passWord: pw,
          success: (success) => {
            console.log(success)
          },
          error: (error) => {
            console.log(error)
          }
        })
      },
      error: (error) => {
        console.log(error)
      }
    })
  }


useEffect(() => {
  const mn = queryParams.get("mn");
  const pw = queryParams.get("pw");
  console.log(mn, pw)


  if (mn && pw) getSignature();

 }, []);


  return (
    <div>zoomMSDK</div>
  )
}

export default ZoomMSDK

At this point, we have what we need to intact with Zoom REST APIs and start/join the Meeting SDK. For the second part of this section, we will focus on creating the React Application components.

Part 2: Section 1 - Building a meeting application in React with Zoom APIs and SDKs

just-zoomit — Tue, 28 Mar 2023 16:43:03 +0000

Setup Zoom Rest APIs & Meeting SDK Frontend integration

Update install concurrently

Before building the frontend, we need a way to run both the server and frontend simultaneously. To achieve this, we'll use a task automation npm package called "concurrently." This package will enable us to run both the frontend and backend from the root of the application.In the root install concurrently with the following command:

npm install -d concurrently

Modify package.json

We also will need to add concurrently to the ‘scripts’ property of your package.json file in the root. In the Package.json file, add the following to the script object to start frontend and backend:

...
"scripts": {
    "start": "nodemon backend/server.js",
    "client": "npm start --prefix frontend",
    "dev": "concurrently \"npm start\" \"npm run client\"",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
...

Creating a React Project

Once the backend is set up, we can proceed with developing the frontend of the application using React. We chose React primarily because of its user-friendly learning curve and ability to reuse components. The next step involves creating a React application using Create React App.

To begin, you'll need to create a new application named "frontend" on your local machine using Create React App. Simply run the following command in your terminal to create a new application and run the project:

npx create-react-app frontend
cd frontend
npm start

When the last command runs, you’ll receive output with the URL for the local development server.Open a browser to http://localhost:3000 and you’ll find your project:

Clean-up frontend

Now that you have a working React application,let's update the App.js file in your working React application by replacing the code in the src/App.js file.To update the App.js file, follow these steps:

Open the App.js file located in the src folder of your React application.

2.Replace the entire code block with the following:

import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">

      <h1>Zoom Dev-Tools Demo</h1>
      </header>
    </div>
  );
} 

export default App;

Save the file and ensure that the changes have been successfully applied to your React application.

Open a browser to http://localhost:3000 and you’ll find your project

Install React Router

To enable navigation between views of different components in the React application, we need to install library to handle routing.In this tutorial we will use a widely used library called React Router. In order to use React Router, we need to run npm i react-router-dom to install React Router. Also, we will install styled-components for later use.

npm i react-router react-router-dom styled-components

Once React Router is installed, you can import and use its components to set up the routing in your React application.

Configuring The Router

The next thing we need to do is configuring the router. Setting up your router is incredibly simple. To get started, all you need to do is import the BrowserRouter and wrap your entire application in the router.

In the Index.js file, replace the existing code block with the following code to configure the router:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
  <BrowserRouter>
    <App />
    </BrowserRouter>
  </React.StrictMode>

);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Add Proxy to frontend/Package.json

To enable communication between the React application and the backend via API/HTTP requests, a Proxy Package.json file is required. To accomplish this, we must configure a proxy in the package.json file of the React project. By doing so, the application can simulate requests originating from the same server port. To configure the proxy, add the following line to your package file:

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://127.0.0.1:30010", // Add this

  ....

Setup .env.local file

The last thing we need to create .env.local file to set up environment variables for the frontend application.Add the following code to the .env.local file, and insert your Zoom SDK App's Key found on the App Credentials page in the Zoom App Marketplace, Meeting SDK Signature endpoint, and the Origin Trail token enable gallery mode:

SECURITY NOTE: .env.local file is local-only and can contain sensitive variables. You should add *.local to your .gitignore to avoid them being checked into git.

REACT_APP_ZOOM_MSDK_KEY = "YOUR_ZOOM_MSDK_KEY"

REACT_APP_MSDK_SIGNATURE_ENDPOINT = "http://localhost:30010/api/zoom/msig"

REACT_APP_MSDK_ORIGIN_TRAIL =""

Root folder structure

Here's how the Root folder structure should look with frontend added:


backend/
    api/
        api.js
        ...
    controllers/
        zoomControllers.js
        ...
    middlewares/
        ...
    routes/
        zoomRoutes.js
        ...
    server.js

frontend/
    node_modules/
        ...
    public/
        ...
    src/
        components/
            index.js
            ...
    .env.local
    .gitignore
    package.lock.json
    package.json
    README.md
.env/
.gitignore
package.lock.json
package.json
README.md

Test Frontend

In the root, run the following command then navigate to your browser.

npm run dev

You should see the following :

Part 1: Section 2 - Building a meeting application in React with Zoom APIs and SDKs

just-zoomit — Tue, 07 Feb 2023 17:52:39 +0000

Set up Zoom Rest APIs & Meeting SDK Backend integrations

In the first part of this blog we setup Node.js/Express, organized the files in a way that makes maintenance easy, and used the .env file to securely store the API & SDK keys and secrets. Now we ready to add the backend logic.

Install dependencies for Meeting SDK JWT

Now let's set up our Meeting SDK JWT SDK signature endpoint which will be used to authorize the Meeting SDK. To begin, in the root folder, run the following command to install the required dependencies:

npm i axios btoa jsrsasign

API File

Now we are ready to add our functions to api file which making the HTTP requests and processing the responses from the Zoom Rest APIs. In the api/api.js file, add the following functions to the code:


// Working File: api/api.js

require("dotenv").config();
const axios = require("axios");
const btoa = require("btoa");

const getAccessToken = async () => {
  try {
    base_64 = btoa(process.env.CLIENT_ID + ":" + process.env.CLIENT_SECRET);

    const resp = await axios({
      method: "POST",
      url:
        "https://zoom.us/oauth/token?grant_type=account_credentials&account_id=" +
        `${process.env.ACCOUNT_ID}`,
      headers: {
        Authorization: "Basic " + `${base_64} `,
      },
    });

    return resp.data.access_token;
  } catch (err) {
    // Handle Error Here
    console.error(err);
  }
};

const listZoomMeetings = async () => {
  try {
    const resp = await axios({
      method: "get",
      url: "https://api.zoom.us/v2/users/me/meetings",
      headers: {
        Authorization: "Bearer " + `${await getAccessToken()} `,
        "Content-Type": "application/json",
      },
    });
    const meetings = resp.data.meetings;

    const newArray = meetings.map((obj) =>
      ["id", "topic"].reduce((newObj, key) => {
        newObj[key] = obj[key];
        return newObj;
      }, {})
    );

    return newArray;
  } catch (err) {
    if (err.status == undefined) {
      console.log("Error : ", err);
    }
  }
};

const createZoomMeeting = async (type) => {
  try {


    const data = JSON.stringify({
      type: type,
    });

    const resp = await axios({
      method: "post",
      url: "https://api.zoom.us/v2/users/me/meetings",
      headers: {
        Authorization: "Bearer " + `${await getAccessToken()} `,
        "Content-Type": "application/json",
      },
      data: data,
    });

    const { id, password } = resp.data;

    return { id, password };
  } catch (err) {
    if (err.status == undefined) {
      console.log("Error : ", err);
    }
  }
};
function generateOTP() {
  var digits = "0123456789";
  let OTP = "";
  for (let i = 0; i < 6; i++) {
    OTP += digits[Math.floor(Math.random() * 10)];
  }
  return OTP;
}

// ...

module.exports = {
  createZoomMeeting, 
  listZoomMeetings,
  thirdPartyAPICall,
};

Controllers File

The next thing we need to implement are the functions that will be called from the routes to perform the desired actions. In controllers/Zoomcontrollers.js file, add the following Application functions:

Meeting SDK JWT signature generation endpoint for authorized use of the Meeting SDK.
Create Appointment Endpoint, which handle creating Zoom Meetings.
List Meeting Endpoint, which handles get Zoom Meetings.

// Working File: controllers/Zoomcontrollers.js

const asyncHandler = require("express-async-handler");

require("dotenv").config();
const KJUR = require("jsrsasign");

const {
  createZoomMeeting,
  listZoomMeetings,
  thirdPartyAPICall,
  } = require("../api/zoomAPI.js");

  const getMsdkSignature = asyncHandler(async (req, res) => {
    const iat = Math.round(new Date().getTime() / 1000) - 30;
    const exp = iat + 60 * 60 * 2;

    const oHeader = { alg: "HS256", typ: "JWT" };

    const oPayload = {
      sdkKey: process.env.ZOOM_MSDK_KEY,
      mn: req.body.meetingNumber,
      role: req.body.role,
      iat: iat,
      exp: exp,
      tokenExp: iat + 60 * 60 * 2,
    };

    const sHeader = JSON.stringify(oHeader);
    const sPayload = JSON.stringify(oPayload);
    const signature = KJUR.jws.JWS.sign(
      "HS256",
      sHeader,
      sPayload,
      process.env.ZOOM_MSDK_SECRET
    );

    res.json({
      signature: signature,
    });
  });

const CreateAppointment = asyncHandler(async (req, res) => {
  const { type} = req.body;

  if (!type) {
    res.status(400);
    throw new Error("Please Fill all the fields");
  } else {
    const { id, password } = await createZoomMeeting(type);

    res.status(201).json({ id, password });
  }
});


  const ListMeeting = asyncHandler(async (req, res) => {
    const meetings = await listZoomMeetings();
    if (meetings === undefined) {
      res.status(400);
      throw new Error("No meeting found");
    } else {
      res.status(201).json({ meetings });
    }
  });


// ...

   module.exports = {
    getMsdkSignature,
    CreateAppointment,
    ListMeeting,
    ThirdPartyAPICall,
  };

routes File

Next, all we need to do is define the endpoint URLs that will maps incoming requests to the functions. In the zoomRoutes.js, add the getMsdkSignature, CreateAppointment, and ListMeeting endpoints.

// WorkDirectory : backend/routes/
// File : zoomRoutes.js

const express = require('express');
const router = express.Router();
const {
    getMsdkSignature,
    CreateAppointment,
    ListMeeting,
    ThirdPartyAPICall,
  } = require("../controllers/zoomControllers.js");

router.route('/').post();

// Get MSDK Signature Route
router.route("/msig").post(getMsdkSignature);

// Create routes. Test with Postman
router.route("/create").post(CreateAppointment);

// Create routes Test with Postman
router.route("/listmeetings").get(ListMeeting);

// Get routes Test with Postman
router.route("/thirdparty").get(ThirdPartyAPICall);

module.exports = router; // Export the router so it can be used in server.js

The last thing we need to configure before testing the backend integration with Zoom API and SDK service is the .env file. This file contains the Zoom Rest APIs and MSDK credentials that should not be accessible to others. It is important to note,your Zoom credential should be stored locally and not be uploaded to code repositories online for everyone to read.

In the .env file, add the following code, and insert your Zoom API and Meeting SDK Apps's Key and Secret found on the App Credentials page in the Zoom App Marketplace.

PORT = 30010

# Zoom API Credentials
ACCOUNT_ID = YOUR_ACCOUNT_ID

CLIENT_ID = YOUR_CLIENT_ID

CLIENT_SECRET = YOUR_CLIENT_SECRET

ZOOM_MSDK_KEY =YOUR_ZOOM_MSDK_KEY

ZOOM_MSDK_SECRET =YOUR_ZOOM_MSDK_SECRET

Test with Postman

Now it is time to test with Postman and observe the results of GET request for listmeeting and msig endpoints.You should see your Zoom meeting in the response, assuming you have meetings scheduled !

You should see your Zoom MSDK Signature in the response!

{
    "signature": "YOUR_SIGNATURE_RETURNED"
}

Conclusion

In this tutorial, you created a Node.js / Express server that generates a Zoom Server-to-Server OAuth Token and a Meeting SDK signature via an http request from your frontend for use in the Meeting Conference React Application. In the next section, we will add the frontend for the application to the project.

Part 1: Section 1 - Building a meeting application in React with Zoom APIs and SDKs

just-zoomit — Sun, 29 Jan 2023 18:02:23 +0000

About The Project

Welcome to my blog! I'm so happy you are interested in learning how to build on the Zoom Developer platform. In this blog, we'll be exploring Zoom Developer tools and showing you how to embed a Meeting Conference solution in your very own React Application. We'll be using Zoom's Rest APIs and Meeting SDK to integrate the Zoom Meeting SDK application into a website.

This blog is going to be a two-part series, and in each part, we'll be covering different aspects of the project. Here is the break down:

The first part, we'll start with setting up the Node Js express backend,adding Zoom's Rest API, and the Meeting SDK JWT endpoint used for authorized use of the Meeting SDK.
The second part, we'll move on to setting up the frontend, then we'll finish by building out the different components.

Throughout the blog post, I'll also be including links to the specific Zoom documentation that we'll be using, so you can easily reference it while building your project. So, don't worry if you're new to building apps with Zoom Developer tools, we've got you covered. We'll be explaining how React JS, Node JS, the Express JS Web Framework, and Zoom Developer tools can help you embed the Zoom Meeting and Webinar experience in your app or website.

Here's a sneak peek of what you'll be creating:

Built With

React
Node.js / Express
Zoom Developer Tools:
- Rest APIs & Meeting SDK

Prerequisites

Node.js installed locally
Zoom Account
Zoom Marketplace Apps:
- Zoom Marketplace Server-to-Server App
- Zoom Marketplace Meeting SDK App

Getting Started

Before building with Zoom developer tools, you will need to create a Zoom account, a Zoom Marketplace server-to-server app for using Zoom Rest APIs, a Meeting SDK app to authorize your Meeting SDK, and also you need to have Node installed locally.

Need to create a Zoom account? Don't worry, you can find the links to the documentation to guide you through the process below. If you have already installed node and meet the prerequisites, you are ready to get started. Let's go!

Step 1 — Setting Up the Backend

With a React front-end connected to a Node.js / Express backend server, you've got everything you need to embed Zoom Meeting Conference into your application with ease and efficiency! Let's start by setting up the backend.

Open your terminal and create a new file directory in any location on your local machine that you find convenient. You can name it whatever you'd like, but for this example, we'll call it "zoom-clone".



  mkdir zoom-clone

Now, enter into that file directory:



  cd zoom-clone

The next step is to initialize the project with a package.json file. This file will contain some information about your app and the dependencies that it needs to run. In your text editor, run the following command :



 $ npm init

When prompted enter the package name and entry point for incoming requests:




$ package name: zoom-clone-production #Add This
$ version: (1.0.0) 
$ description: 
$ entry point: (index.js) server.js #Add This
$ test command: 
$ git repository: 
$ keywords: 
$ author: Your Name.
$ license: (ISC)

Should now see the package.json



{
  "name": "zoom-clone",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Your Name",
  "license": "ISC"
}

Step 2 — Setting Up the Node Server

To run your JavaScript code on the backend, you need to spin up a server that will compile your code. This tutorial uses a Express server with Node.js HTTP framework. Why ? Because it handles a lot of things out of the box and requires little code to create fully functional RESTful APIs.

To use Express, install it using npm. We will also install cors which is package that allows a server to indicate any origins (domain, scheme, or port) other than its own from which a browser should permit loading resources.



  npm i express cors

Now, create a file named server.js inside, this will be the entry point. It will handle the routing of incoming requests.



  touch server.js

In the server.js file, type the following code and save.



const express = require("express");

const app = express();
const cors = require("cors");
app.use(cors())

app.use(express.json());

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

const port =  30010;

app.use((req, res, next) => {
  res.send('Welcome to Express');
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

The first two lines of the code import the express module and create an Express app, named "app". This app has methods for routing HTTP requests, configuring middleware, and rendering HTML views. CORS is enabled below that to handle issues when accessing the API from different domains. The middle part of the code defines a route using the app.get() method, which returns the string "Backend is Working!" when an HTTP GET request is made to the site root. The last block starts the server on port 30010, prints a message to the console, and returns the string "Server is running on port 30010". The example response can be seen by visiting localhost:30010 in the browser

It’s time to start your server to see if it works. Open your terminal in the same directory as your server.js file and type:



  node server.js

Navigate to http://localhost:30010/, you should see the following in your browser:



Welcome to Express

Start server from the root folder

Right now, you have to restart the server every time a change is made. To automatically see updates, let's install nodemon to automatically restart Web Server.

Create a new directory named backend for your project and change into the new directory:



//
mkdir backend
cd backend

Then add the script server.js file inside, and then from the root run install nodemon as dependencies:



npm i nodemon

Then in your package.json add a start property to the script object call nodemon to start the server :



...

 "scripts": {
    "start": "nodemon backend/server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

...

Now, from the root, test for automatically Web Server restart:



  npm run start

If everything goes well, you should see the Server is running on port 30010 in your terminal and 'Welcome to Express' in your browser .

Terminal



#Terminal OutPut: 

➜  zoom-clone-production npm run start

> zoom-clone-production@1.0.0 start
> nodemon backend/server.js

[nodemon] 2.0.20
[nodemon] to restart at any time, enter `rs`
[nodemon] watching path(s): *.*
[nodemon] watching extensions: js,mjs,json
[nodemon] starting `node backend/server.js`
Server running on port 30010

Browser




 Browser URl : http://localhost:30010/api

 Welcome to Express

Step 3 — Zoom Developer Tools Utilities

To use Zoom's Rest API and Meeting SDK in your app or website, there are a few things we'll need to handle on the server-side app:

1.) Generating a Meeting SDK JWT Signature for authorized use of the Meeting SDK.

2.) Obtaining a Zoom Access Token to authenticate and authorize users to make requests.

The Zoom Meeting SDKs use a Meeting SDK key and secret to generate a SDK JWT for authorized use of the Meeting SDK. And the Zoom API uses the OAuth 2.0 authorization framework (rfc6749) to authenticate and authorize users to make requests. If you're new to Meeting SDKs authorization and OAuth 2.0, don't worry! I'll be providing links to the documentation to help you understand it better.

Setup .env file

It is important to keep API keys and other sensitive information in a separate file. It is also best practice to keep this information separate from version control for security reasons. The .env file provides a centralized location for storing environment variables, allowing for easy access and management of sensitive information. Additionally, using a .env file helps to keep sensitive information organized and secure, ensuring that it is not accidentally committed to version control.

To implement this solution, let's add a create a .env file in the root of the app:



  touch .env
  npm i dotenv

Then, add your variables and values to it:



PORT = 30010

Now, in the backend/server.js, import dotnet.env:



const express = require("express");
const app = express();

const cors = require("cors");
const dotenv = require("dotenv");

dotenv.config();
const port = process.env.PORT || 30015;
app.use(cors())
app.use(express.json());

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

app.use((req, res, next) => {
  res.send('Welcome to Express');
});

app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

Structure backend folders

When it comes to structuring the backend folders for a Node.js Express application that integrates with a third-party API, it's important to organize your code into separate folders to make it easier to manage and maintain. By breaking your code into smaller, more manageable pieces, you can ensure that your code is easy to understand and debug. So let’s create the following folders directories:

routes - contains the routing logic for your application.
api - contains API calls to Zoom Rest API services
zoomControllers - contain business logic functions for making API calls or processing data
middleware - contains the middleware functions for your application

Create API Directory

Create API directory along with the associated api.js file.



// Working Directory : backend/

mkdir api
cd api
touch zoomAPI.js

Within the API folder, add the following code to the zoomAPI.js file.



 // Working Directory : backend/api/
 // File: zoomAPI.js


 const thirdPartyAPICall = () => {
    try {

        // Make API Call Here 
      return "Third Party API Call";
    } catch (err) {
      // Handle Error Here
      console.error(err);
    }
  };

  module.exports = {
    thirdPartyAPICall,
  };

Create controllers Directory

Create controllers directory along with the associated zoomControllers.js file.



// Working Directory : backend/
// File: zoomControllers.js

mkdir controllers 
cd controllers
touch zoomControllers.js

Within the Controllers folder,add the following code to the zoomControllers.js file.



// Working Directory : backend/controllers/
// file: zoomControllers.js

const asyncHandler = require("express-async-handler");
const {
  thirdPartyAPICall,
  } = require("../api/zoomAPI.js");


const ThirdPartyAPICall = asyncHandler(async (req, res) => {

    const thirdPartyAPI = thirdPartyAPICall();

    if (thirdPartyAPICall === undefined) {
        res.status(400);
        throw new Error("No API Call found");
      } else {
        res.status(201).json({ thirdPartyAPI });
      }
  });

  module.exports = {
    ThirdPartyAPICall,
  };

Create routes Directory

Create routes directory along with the associated zoomRoutes.js file.



// Working Directory : backend/
// File: zoomRoutes.js

mkdir routes 
cd routes
touch zoomRoutes.js

Within the routes folder,add the following code to the zoomRoutes.js file.



// Working Directory : backend/routes/
// file: zoomRoutes.js

const express = require('express');
const router = express.Router();
const {

    ThirdPartyAPICall,

  } = require("../controllers/zoomControllers.js");

router.route('/').post();

// Get routes Test with Postman
router.route("/thirdparty").get(ThirdPartyAPICall);

module.exports = router; // Export the router so it can be used in server.js

In the backend/server.js, add this following line:



...
const zoomRoutes = require("./routes/zoomRoutes")

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept');
  next();
});

app.use("/api/zoom", zoomRoutes); // Add this line

...

Backend folder structure

Here's how the backend folder structure should look:



backend/
    api/
        zoomAPI.js
        ...
    controllers/
        zoomControllers.js
        ...
    middlewares/
        ...
    routes/
        zoomRoutes.js
        ...
    server.js
 node_modules
 .env
 .gitignore
 package.lock.json
 package.json
 README.md

Be sure to keep the API keys and other sensitive information in a .env file, and not to include it in version control.

Testing the API



npm i express-async-handler
npm run start

Now, open postman, create a GET method and navigate to http://localhost:30010.

Test all the API endpoints and make sure they are working. For the endpoints that require body, send JSON back with the necessary fields since it’s what you set up in your code.

Sample GET request:



GET localhost:30010/api/zoom/thirdparty
Body
raw

Sample GET value:



{
    "thirdPartyAPI": "Third Party API Call"
}

Conclusion

In this tutorial, you were guided through the process of setting up Node.js Express and organizing your files in a way that makes maintenance a breeze. You also learned how to use the .env file to securely store sensitive information such as API keys and secrets.

In the next tutorial, you'll delve deeper into the application by adding the backend logic. See you in the next tutorial.