Meeting Web SDK + Server to Server App

longoff · April 30, 2024, 12:39pm

Hello,

I had already posted a question but could not solve my problem. For now I am testing on a local server without https.

I had started by creating a normal app (Develop → Build App) and added client_id and client_secret Web SDK js/index.js. But it was resulting in an invalid signature error. So I thought, as Web SDK was not creating the meeting, I needed to create it through REST API. For that, I needed to create Server to Server App as ZAK needed an account ID.

Using Server to Server App, Meetings are successfully created on zoom.us and I can see urls, passwords, etc. I have tested, and those meetings work, but those are external urls (zoom.us)

Before trying anything again, I need some advice. So, please let me explain what my actual requirement is:

I need to add zoom interface to my own website. The user should not leave the website to either create or join the meeting.
There will be multiple users created on our own backend, and they will be added to Zoom as well (email will match). I will automatically access their details to create meetings for them through REST API.
Those users will click ‘Create meeting’ on my website, and it will automatically create a meeting (without any user intervention) and launch the web interface for that user, but user will remain on my website, and that is why I need web SDK to work on the front end.
Other users will get notifications internally and either get a passcode or some meeting ID / url, etc., which they can click to join the meeting.
I do not want any user to even know that it is all happening through zoom or go through OAuth manually to allow me to create a meeting or join it.

I am not sure but I think Web SDK APP OAuth requires user to manually authorize access to their account and that is not what I need.

So now, please tell me the correct and the best way to go about it is.

Thank you

chunsiong.zoom · May 2, 2024, 4:34am

@longoff after creating a General App, you need to go to Embed, and turn on the toggle button for Meeting SDK

longoff · May 3, 2024, 6:37am

Hello,

Thank you for replying.

I am not sure if that was the issue. Whether I had enabled that option to allow embedding or not at that time.

I seem to have made it working using my developer account.

I used one Server to Server App to Create the meeting using RES T API and One normal App for the front end.

The server to server app credentials were passed to get the authentication token (using account id, client id and client secret) and, to create the meeting, I used the access token (using the REST API). I was retrieving the ZAK token as well but meetings seem to work without it, but I am not sure right now.

Then after creating the meeting, I saved the meeting details into the database and redirected the user to the page having Web SDK CDN JavaScript and CSS files only.

On that page, based on whether the user was host or a normal user, I used role=0 or role=1 to generate the signature using normal SDK app’s credentials and passed those to join meeting.

use Firebase\JWT\JWT;

$signature = generateSignature($sdk_key, $sdk_secret, $meeting->meeting_id, $role);

    function generateSignature($sdk_key, $sdk_secret, $meeting_number, $role)
    {
        $iat = time();
        $exp = $iat + 60 * 60 * 2;
        $token_payload = [
            'appKey' => $sdk_key,
            'sdkKey' => $sdk_key,
            'mn' => $meeting_number,
            'role' => $role,
            'iat' => $iat,
            'exp' => $exp,
            'tokenExp' => $exp
        ];

        $jwt_token = JWT::encode($token_payload, $sdk_secret, 'HS256');
        return $jwt_token;
}

Then passed all the details to web sdk init and join function.

       let leave_url = '{{ $leave_url }}'
        let sdk_key = '{{ $sdk_key }}';
        let signature = '{{ $signature }}';
        let meeting_number = '{{ $meeting_number }}';
        let meeting_password = '{{ $meeting_password }}';

        //let zak_token = '{{-- $zak_token --}}';
        let user_name = '{{ $user_name }}';
        let email = '{{ $email }}';

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

        ZoomMtg.init({
            leaveUrl: leave_url,
            success: (success) => {
                ZoomMtg.join({
                    sdkKey: sdk_key,
                    signature: signature, // 1
                    meetingNumber: meeting_number,
                    passWord: meeting_password,
                    userName: user_name,
                    //zak: zak_token, // the host's zak token
                    disableRecord: false,
                    /* videoDrag: true,
                    sharingMode: 'both',*/
                    success: (success) => {
                        console.log(success)
                    },
                    error: (error) => {
                        console.log('Join error');
                        console.log(error)
                    }
                })
            },
            error: (error) => {
                console.log(error)
            }
        })

I am not sure whether this is the right way or not but it seems to work for developer account at least.

Thank you.

chunsiong.zoom · May 3, 2024, 7:53am

@longoff

S2S OAuth is used to access API, and scheduling meeting is one of those scenarios
General App can be used for multiple scenarios, and the front end (Meeting SDK) is one of those scenarios.

longoff · May 8, 2024, 4:25am

@chunsiong.zoom

What are those multiple scenarios?

Can it be used to create/schedule a meeting? If yes, please tell me how, because I was just struggling with that.

I was not able to create a meeting, using front end SDK and normal APP, so I used Server to Server App to create meetings. I tried to figure out how it all works for 2-3 days, and with trail and error, I used the above combination, and it seems to have worked using a developer account. I am yet to test it with multiple user accounts.

I could not find any step-by-step guides for my requirements. It was just experimentation. If any such guide exists, please provide a link so that it can help others.

SDK App seems to allow joining using an existing meeting and communicating. Am I wrong in my thinking?

chunsiong.zoom · May 8, 2024, 5:37am

@longoff

General App can be used for

Zoom Apps
Web Hooks
Meeting SDK
Zoom Phone
OAuth

General App’s OAuth functionality can be used to schedule a meeting.

If you are using Server to Server OAuth App, you can typically create meeting only for your users in your own tenant.

If you want to create meeting in users who are not under your tenant, it is recommended to use General App’s OAuth functionality.

SDK App seems to allow joining using an existing meeting and communicating. Am I wrong in my thinking?

Could you clarify on this above point?

fahadbm3234 · May 8, 2024, 9:42am

@chunsiong.zoom
Hello. I have a similar issue that needs to be addressed.
Right now I have used the REST API to create meetings.
I have a business plan in the account and using server to server app.
I am also using custCreate Method for creating sub users in my account so that they dont need to login to zoom.
This is working properly working as external urls.
But we need the Zoom to be embedded in our website.
Can you give me a go through to do so using the rest API to create meeting as custCreate?

chunsiong.zoom · May 9, 2024, 3:46am

@fahadbm3234 I don’t understand the question. Can you be more specific?

You want to embed Zoom Meeting in your website or
You would like some guidance on how to use REST API to create custCreate users or
You need something about working with external URLs

longoff · May 9, 2024, 11:59am

That is what I needed to do. I was using Web SDK on the front end. I do not want any user to go through OAuth steps.

If, possible, could you please share any link?

That is what I need to do. Hosts in my account can create meeting and anyone who has the meeting link can join (the links are internal and user stays on my website), as I use Web SDK on the front end.

On the first day, as I did not understand how it all worked, I was trying to create a meeting using WEB SDK calling its join method. But I don’t think Web SDK can do that.

I am almost there, just need to test with multiple hosts.

Thank you.

longoff · May 9, 2024, 12:06pm

I think I have mentioned the method that used, it may not be the right way, but it has worked.

Use Server to Server App to create the meetings and save those details into the database.
Create a Normal App and copy SDK key and SDK secret.
Send the user to Web SDK page (I have posted sample below) passing the meeting id (or your internal database ID, anything that you can use to get the data out on the next step).
Using the meeting ID (or any id that you passed) to fetch the meeting details from the database and pass the those to front end Web SDK. Use Normal App SDK Key and SDK secret to generate the signature (not server to server app client id and client secret)

This is a simple html page which uses web SDK CDN JS/CSS on the website

<html>

<head>
    <title>
        Live Session {{ $meeting_topic ?? ''}}
    </title>
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.17.0/css/bootstrap.css" />
    <link type="text/css" rel="stylesheet" href="https://source.zoom.us/2.17.0/css/react-select.css" />
    <meta name="format-detection" content="telephone=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="origin-trial" content="">
</head>

<body>
    <script src="https://source.zoom.us/3.6.0/lib/vendor/react.min.js"></script>
    <script src="https://source.zoom.us/3.6.0/lib/vendor/react-dom.min.js"></script>
    <script src="https://source.zoom.us/3.6.0/lib/vendor/redux.min.js"></script>
    <script src="https://source.zoom.us/3.6.0/lib/vendor/redux-thunk.min.js"></script>
    <script src="https://source.zoom.us/3.6.0/lib/vendor/lodash.min.js"></script>
    <script src="https://source.zoom.us/zoom-meeting-3.6.0.min.js"></script>


    <script>
        let leave_url = '{{ $leave_url }}'; /// any url
        let sdk_key = '{{ $sdk_key }}'; // SDK app key (not server to server app client ID)
        let signature = '{{ $signature }}'; // created using the method I posted earlier passing SDK App key and SDK App secret (not Server to Server App client ID and client secret)
        let meeting_number = '{{ $meeting_number }}'; // returned by create meeting api using Server to Server app
        let meeting_password = '{{ $meeting_password }}';// returned by create meeting api using Server to Server app

        //let zak_token = '{{-- $zak_token --}}'; // do not think it is needed
        let user_name = '{{ $user_name }}'; // any user name of your choice, not sure whether it has to be unique.
        let email = '{{ $email }}'; // passing any userEmail is not returning in webhooks so far, hosts email id is being returned

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

        ZoomMtg.init({
            leaveUrl: leave_url,
            success: (success) => {
                ZoomMtg.join({
                    sdkKey: sdk_key,
                    signature: signature, 
                    meetingNumber: meeting_number,
                    passWord: meeting_password,
                    userName: user_name,
                    disableRecord: false,
                    /*videoDrag: true,
                    sharingMode: 'both',*/
                    success: (success) => {
                        console.log(success)
                    },
                    error: (error) => {
                        console.log('Join error');
                        console.log(error)
                    }
                })
            },
            error: (error) => {
                console.log(error)
            }
        })
    </script>
</body>

</html>

fahadbm3234 · May 9, 2024, 3:44pm

@longoff
I am confused in the sdk key.
I have configured my server to server app and created meeting using REST Api.
I also want the meeting embedded in thw website and dont want to let the user to go through any login hussle.

I created a normal app and enabled meeting there. But i dont fond anything like sdk key or sdk secret.
I found client ID and client secret.
Are they same? If not can you please share where can i find the sdk key and secret?

Also in the process you mentioned it is like i am creating the meeting with REST api and just doing the meeting using meeting sdk creating a signature of the meeting so that the user doesn’t have to go external of the website.
Am i right here?

Also can you help me with how is the host and normal members will be differentiated here in the process?
Do i need to create different signatures for this two different roles?
Or i just use zak token at one place and dont use on the other place on frontend?

It would be very helpful if i could get the insights from you.
Thank you

fahadbm3234 · May 9, 2024, 3:48pm

@chunsiong.zoom
I am already creating the meetings with the REST API with the custCreate user create action so that the host doesn’t need to login to zoom to host the class.

Now i want to embedd the zoom into our website.
I needed a go through about how i can use the meetings creaed with REST API to be embedded in our website.

Now as i said i am using custCreate action for user creation so the host doesn’t need to login to zoom, i wanted to know that how can i embedd it with web sdk

longoff · May 9, 2024, 4:20pm

Yes I think those were called sdk key and sdk secret earlier. Now those are called client ID and client secret, even for normal app. I just wanted to differentiate between server to server and normal app credentials.

Yes I am doing the same, the only difference is, I am not creating any subuser. Any user with the link can just join. Those users do not need zoom account and they stay on my website. I prefill their username and email from my own database, as user has to log in to access the meeting, so I know:

Who the user is and what their user name and email are.
Whether it is the user who created the meeting, so I set role as 1 to generate the signature for host or 0 for any other user.

As I mentioned, I save all the details returned by create meeting REST API call into the database

I answered part of it above. Zak, I am really not sure about it, at the moment. Things have worked without it for me, so far.

Then there are webhooks, which we will eventually need. Those are notifications sent by zoom for various meeting events the app is interested in listening to. I setup 4-5 events I am interested in listening to, in my server to server app. For example, when the meeting started, ended, when a participant joined or left and so on.

URL validation has to be done first for webhooks, and it is slightly tricky, as I was not able to see what my application was replying with, to the URL validation request by Zoom, it was just saying “failed”

Now regarding finding out whether the host has joined/left the meeting or a normal user (when a notification is posted by webhook), that even I need to know it. I am trying to find a way to differentiate between those. I will check the data posted by webhooks.

Also, as of now, duplicate event notifications are getting posted for the same event by Zoom. May be my server is slow in responding, so Zoom sends the notification again.

So the first thing, that I will do tomorrow is to return 200 response as soon as a notification comes and perform any database related work after that. It may be difficult in a Laravel controller but I will see.

Using a phone to type it all, so, sorry for any mistakes.

fahadbm3234 · May 9, 2024, 8:20pm

@chunsiong.zoom @longoff
I am using the sample web sdk with react provided in documentation of zoom meeting sdk.

I am using the component view.
Here i am getting an error

This is my payload

Can you help me with this?
I saw a related post where @chunsiong.zoom you mentioned that the appKey and sdkKey has to be same for component view. Mine are same but getting fail to join the meeting error.
It would be nice if you could help me with this

longoff · May 10, 2024, 1:03am

In your join function, password should be passWord, W is capital. You need to recheck. Also I have seen that meeting password is normally a few characters 5-6. Not sure how have you generated it.

Try to comment out zak. tk I have not used, I do not know, my be it is for registrants that you created using API. First try to comment out that as well. I do not have my code in front, that is what I remember. You can check my previous post where I have posted a working example of join.

You are using registrants, while so far, I am not. I think it creates custom join urls, which may not keep you on your website.

chunsiong.zoom · May 10, 2024, 4:09am

@fahadbm3234 I’ll PM you for the token and meeting details

system · June 9, 2024, 2:10pm

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

Topic		Replies	Views
Create meeting and join meeting Web	48	10552	March 17, 2021
Host in Browser Web	53	8061	March 16, 2021
JWT App for creating meetings and clarification API and Webhooks	2	1724	August 21, 2020
Use Zoom Meetings SDK embed, but with server-to-server OAuth Meeting SDK	16	2883	August 30, 2023
Joining meeting timeout. Signature is invalid - Web client SDK Web	20	5287	August 28, 2021

Meeting Web SDK + Server to Server App

Related topics