Hiding API Secret/Key - Question about using backend server/.env

Meeting SDK Web
1

Description
I am trying to hide my client-side API Secret/Key for my website using the CDN Zoom Web SDK as a base (It is currently not much different than the download). I would like to address hiding API Key/Secret as described in the sample CDN:

var API_KEY = "YOUR_API_KEY";
 
   /**
    * NEVER PUT YOUR ACTUAL API SECRET IN CLIENT SIDE CODE, THIS IS JUST FOR QUICK PROTOTYPING
    * The below generateSignature should be done server side as not to expose your api secret in public
    * You can find an eaxmple in here: https://marketplace.zoom.us/docs/sdk/native-sdks/web/essential/signature
    */
   var API_SECRET = "YOUR_API_SECRET";

What is the best way of achieving this?

I have heard of the .env/.gitignore method. Is this level of security enough?

I have also heard of creating a backend server (using NodeJS) to make calls. I am not sure how to achieve this. If this is the method to go with, any direction on how to achieve would be very much appreciated.

Which version?
1.7.10

2

Hi Frank,

Typically you’d use a backend server + language (like PHP, Python, or NodeJs, etc.) to generate the signature and return it based on a request.

This way, your client ID and secret aren’t exposed on your web page.

You can then retrieve the signature using an HTTP request.

Another way to do it would be to do it on page load using whichever backend language you’re using.

The way we do it, we have a method that generates the signature and returns it on our meeting page. We then store that signature as a JavaScript variable and use it to initialize our web SDK.

As an example, here’s what our code looks like.

// PHP Code to generate the signature:
  public static function generateMeetingSignature($meeting_number, $role)
    {
        $time = time() * 1000 - 30000;

        $data = base64_encode(API_KEY . $meeting_number . $time . $role);

        $hash = hash_hmac('sha256', $data, API_SECRET, true);

        $_sig = API_KEY . "." . $meeting_number . "." . $time . "." . $role . "." . base64_encode($hash);

        return rtrim(strtr(base64_encode($_sig), '+/', '-_'), '=');
    }

This function belongs to a service class. So we just call this function with the meeting number and role when we are initializing our web SDK. So the code there then just looks like this.

    const signature = "<?= ZoomMeetingService::generateMeetingSignature(
        $zoom_meeting_id, $role
    ) ?>";

We store the signature in JS this way, so that when the page loads, we’re ready to go with the signature. This way our API Key and API Secret is not exposed on the frontend, but you just get a string that is our signature.

I hope this helps.

3

Hey @franktc,

You can also reference our docs to generate your Web SDK signature securely:

Thanks for your suggestions @hassan2! :slight_smile:

Thanks,
Tommy

1 Like
4

Hi @tommy @hassan2

Thank you both for your replies.

I am new to backend development and not totally sure how to create a server to generate the signature and how it relates to the hosting for the website (godaddy). This doesn’t really apply to the zoom sdk, but if you have any suggestions on where to start it would be appreciated! If not, no problem - thank you for your help.

5

Hey Frank,

GoDaddy uses a server to host your website as well. Generating a signature on the backend just means that you generate it before it hits the browser. With a backend language like PHP.

I think the best place for you to get started would be a new collection of resources I recently came across.

It’s called https://onramp.dev

It’s a collection of learning resources to get you started. I hope that helps.

6

hey @hassan2

Thank you for the resource!

It’s a big help.

7

Thanks for all of your help, @hassan2! :100:

1 Like
8

Hey @hassan2,

Thank you for the information. If you don’t mind me asking one more question: where do you store your backend .php file?

Do you deploy it to a platform service, such as aws or heroku?

9

Hey @franktc,

Yep, you can deploy it anywhere you can host PHP. DigitalOcean, AWS, Google Cloud Platform, Linode, even shares hosting platforms would work!

2 Likes
10

Does this mean meetings can only be embedded on dynamic pages?

How long does a signature last before it expires?

11

Hi @Dave98,

Signatures are just for authentication before a meeting starts. Once a meeting starts, it will continue running until it ends. If the user navigates to another page and comes back, the signature needs to be generated again.

Here’s the documentation: https://marketplace.zoom.us/docs/sdk/native-sdks/web/build/signature

You need a some more data before you can launch a meeting through the web SDK. Please check this link out: https://marketplace.zoom.us/docs/sdk/native-sdks/web

1 Like
12

Thanks @hassan2 for sharing those answers! :slight_smile:

@Dave98, @franktc, please let us know if you have any additional questions!

-Tommy

13

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.