Hey,
I want to show a meeting in my Next.js App and I have a problem, Im getting this error:
“INVALID_OPERATION” - “Invalid apiKey/sdkKey and/or signature” Error.
Im doing every step by the docs and dont understand where I felt.
I took the ZOOM_CLIENT_ID and ZOOM_CLIENT_SECRET from the marketplaces:
https://marketplace.zoom.us/develop/applications/myid
my server code that generate the signature:
import { NextApiRequest, NextApiResponse } from "next";
import { KJUR, hextob64 } from 'jsrsasign';
export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const { meetingNumber = "", role = "0" } = req.query;
const apiKey = process.env.ZOOM_CLIENT_ID;
const apiSecret = process.env.ZOOM_CLIENT_SECRET;
console.log(apiKey, apiSecret, meetingNumber, role);
if (!apiKey || !apiSecret || !meetingNumber) {
return res.status(400).json({ error: "Missing required parameters" });
}
try {
const result = generateSignature(apiKey, apiSecret, meetingNumber, role);
res.status(200).json({ result, sdkKey: apiKey });
} catch (error) {
console.error("Error generating signature:", error);
res.status(500).json({ error: "Internal server error" });
}
}
function generateSignature(key: any, secret: any, meetingNumber: any, role: any) {
const iat = Math.round(new Date().getTime() / 1000) - 30
const exp = iat + 60 * 60 * 2
const oHeader = { alg: 'HS256', typ: 'JWT' }
const oPayload = {
sdkKey: key,
appKey: key,
mn: meetingNumber,
role: role,
iat: iat,
exp: exp,
tokenExp: exp
}
const sHeader = JSON.stringify(oHeader)
const sPayload = JSON.stringify(oPayload)
const sdkJWT = KJUR.jws.JWS.sign('HS256', sHeader, sPayload, secret)
return sdkJWT;
}
the zoom meeting component:
// components/ZoomMeeting.tsx
import React, { useState } from "react";
import ZoomMtgEmbedded from "@zoom/meetingsdk/embedded";
interface ZoomMeetingProps {
meetingNumber?: string;
userName?: string;
}
const ZoomMeeting: React.FC<ZoomMeetingProps> = ({
meetingNumber = "88434450302",
userName = "React User",
}) => {
const [client] = useState(() => ZoomMtgEmbedded.createClient());
const getSignature = async (
e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
) => {
e.preventDefault();
try {
const response = await fetch(
`/api/getZoomJwt?meetingNumber=${meetingNumber}`,
);
const { signature, sdkKey } = await response.json();
startMeeting(signature, sdkKey);
} catch (error) {
console.error("Error getting JWT for Zoom", error);
}
};
const startMeeting = (signature: string, sdkKey:string) => {
let meetingSDKElement = document.getElementById("meetingSDKElement");
if (!meetingSDKElement) return;
client
.init({
zoomAppRoot: meetingSDKElement,
language: "en-US",
})
.then(() => {
client
.join({
signature,
meetingNumber,
userName,
password: "eGXsGO15II6lWJSd3fEQKywwE8q9Ng.1",
sdkKey,
success: (success: any) => {
console.log(success)
},
error: (error: any) => {
console.log(error)
}
})
})
.catch((error) =>
console.error("Error initializing the meeting:", error),
);
};
return (
<div>
<div
id="meetingSDKElement"
style={{ width: "100%", height: "500px" }}
></div>
<button onClick={getSignature}>Join Meeting</button>
</div>
);
};
export default ZoomMeeting;
Please help me
