Web - Joining meeting timeout - Signature is invalid

,

Hi,

I am using web SDK to join a meeting and server-to-server OAuth for creating a meeting.

When joining the meeting I am passing the Role=1 in signature to join as host, but while joining meeting, it says

Joining meeting timeout
Signature is invalid.

With following error message
{
“method”: “join”,
“status”: false,
“result”: “Invalid signature.”,
“errorMessage”: “Signature is invalid.”,
“errorCode”: 3712
}

Function to get sdk signature
eg: meetingNumber = 87483833442, role = 1

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.CLIENT_ID,
    appKey: process.env.CLIENT_ID,
    mn: +req.body.meetingNumber,
    role: +req.body.role,
    iat: iat,
    exp: exp,
    tokenExp: exp,
  };

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

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

Web sdk as client view
SDK version - 2.11.0

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

        ZoomMtg.join({
          signature,
          meetingNumber: +mn,
          sdkKey: process.env.CLIENT_ID,
          userName: "abcd",
          passWord: pw,
          success: (success) => {
            console.log(success)
          },
          error: (error) => {
            console.log('Error is....',error)
          }
        })
      },
      error: (error) => {
        console.log(error)
      }
    })

May I know where I am going wrong.
Thanks.

EDIT:
After debugging issue, I found out that signature created is invalid by above getMsdkSignature function. When I decode it in jwt.io website, it says invalid signature. Whats the correct way to generate signature ?

Decoded token data

{
“sdkKey”: “63QyZ…”,
“appKey”: “63QyZ…”,
“mn”: “82376833897”,
“role”: 1,
“iat”: 1682775672,
“exp”: 1682782872,
“tokenExp”: 1682782872
}

what happens if you join as “attendee” (role = 0)?

I updated zoomwebsdk to 2.11.5 and its working fine now. But another issue is I am not able to end meeting, also leave meeting is not working when joined as attendee and there are no logs in console. Can you help me out ?

do you use React?

meeting SDK 2.11.5 uses React v16.13.0 (until SDK 2.6.0 React v16.8.6)

with newer React versions the “leave meeting” button seems to have no function

Yes, I am using Nextjs with following dependency versions

“next”: “13.3.1”,
“react”: “18.2.0”,
“react-dom”: “18.2.0”

If I want to use react v16, I need to downgrade nextjs to v10, which is not what I want.
Is there any other solution ?

just an idea - you could embed the meeting sdk in an iframe

in the iframe react 16, outsite the iframe react 18

Its working now without using iframe, just had to delete node_modules and run command → npm install, but there is another problem, gallery view button is not visible even after setting headers.

app.use((req, res, next) => {
  res.set('Cross-Origin-Embedder-Policy', 'require-corp')
  res.set('Cross-Origin-Opener-Policy', 'same-origin')

  next();
});

Response headers are being set but when I type

typeof SharedArrayBuffer === 'function';  -> false
crossOriginIsolated -> false

Can you help me over here ?

try change ‘res.set( … )’ to ‘res.setHeader( … )

I tried already, still its not working.

do you see in the browser dev-tools the correct header?

Yes, I can see attaching ss for your reference.

then it may be that the whole methode does not work with http and localhost - but I have not found anything about it

which browser are you using?

I am using chrome browser.

what’s the result, when you enter in the console (while the started meeting)

window.crossOriginIsolated

true or false?

The value is false for both commands:

typeof SharedArrayBuffer === ‘function’
window.crossOriginIsolated

did you checked the header for your main html file(s) ?

Can you elaborate a little, didnt get you ?

only for delivered html files you need the modified headers - not for json files

For nextjs, it does not seem to work. Can you provide a sample nextjs usage would be very helpful.