如何解决使用React创建Twilio令牌的Firebase可调用函数
我正在尝试使用Firebase可调用函数为React项目创建Twilio令牌。该项目应允许使用Twilio的webRTC服务进行视频通话。该代码基于此处的示例https://www.twilio.com/blog/video-chat-react-hooks。我正在尝试将服务器代码移到Firebase可调用函数中,以获取视频服务的Twilio令牌。
我的控制台显示以下输出和错误:
error check 1: handleSubmit called
error check 2: getToken function retrieved from functions ƒ (r){return n.call(e,r,t||{})}
error check 4: token set
POST https://us-central1-vid-chat-app.cloudfunctions.net/getToken 500
Uncaught (in promise) Error: INTERNAL
at new m (error.ts:66)
at b (error.ts:175)
at P.<anonymous> (service.ts:244)
at tslib.es6.js:100
at Object.next (tslib.es6.js:82)
at a (tslib.es6.js:71)
这是Firebase控制台中的错误
Unhandled error Error: accountSid is required
at new AccessToken (/srv/node_modules/twilio/lib/jwt/AccessToken.js:213:28)
at generateToken (/srv/index.js:9:12)
at videoToken (/srv/index.js:23:19)
at exports.getToken.functions.https.onCall (/srv/index.js:42:19)
at func (/srv/node_modules/firebase-functions/lib/providers/https.js:273:32)
at corsHandler (/srv/node_modules/firebase-functions/lib/providers/https.js:293:44)
at cors (/srv/node_modules/cors/lib/index.js:188:7)
at /srv/node_modules/cors/lib/index.js:224:17
at originCallback (/srv/node_modules/cors/lib/index.js:214:15)
at /srv/node_modules/cors/lib/index.js:219:13
这些是我认为相关的两个主要文件
反应文件
import React,{ useState,useCallback } from 'react';
import firebase from './firebase'
import Lobby from './Lobby';
import Room from './Room';
const VideoChat = () => {
const [username,setUsername] = useState('');
const [roomName,setRoomName] = useState('');
const [token,setToken] = useState(null);
const handleUsernameChange = useCallback(event => {
setUsername(event.target.value);
},[]);
const handleRoomNameChange = useCallback(event => {
setRoomName(event.target.value);
},[]);
const handleSubmit = useCallback(async event => {
console.log("error check 1: handleSubmit called")
event.preventDefault();
const getToken = firebase.functions().httpsCallable('getToken')
console.log("error check 2: getToken function retrieved from functions",getToken)
getToken({ identity: username,room: roomName })
.then(result => {
console.log("error check 3: calling .then")
setToken(result.data)
})
console.log("error check 4: token set")
},[username,roomName]);
const handleLogout = useCallback(event => {
setToken(null);
},[]);
let render;
if (token) {
render = (
<Room roomName={roomName} token={token} handleLogout={handleLogout} />
);
} else {
render = (
<Lobby
username={username}
roomName={roomName}
handleUsernameChange={handleUsernameChange}
handleRoomNameChange={handleRoomNameChange}
handleSubmit={handleSubmit}
/>
);
}
return render;
};
export default VideoChat;
Firebase功能
const twilio = require("twilio");
const functions = require('firebase-functions');
const config = require('./config');
const AccessToken = twilio.jwt.AccessToken;
const { VideoGrant } = AccessToken;
const generateToken = config => {
return new AccessToken(
config.twilio.accountSid,config.twilio.apiKey,config.twilio.apiSecret
);
};
const videoToken = (identity,room,config) => {
let videoGrant;
if (typeof room !== "undefined") {
videoGrant = new VideoGrant({ room });
} else {
videoGrant = new VideoGrant();
}
const token = generateToken(config);
token.addGrant(videoGrant);
token.identity = identity;
return token;
};
const sendTokenResponse = (token,res) => {
res.set('Content-Type','application/json');
res.send(
JSON.stringify({
token: token.toJwt()
})
);
};
exports.getToken = functions.https.onCall((data,context)=>{
console.log('Peter error check getToken function called')
const identity = data.identity;
const room = data.room;
const token = videoToken(identity,config);
sendTokenResponse(token,res);
console.log('here is the token',token)
return token
});
配置文件也包含在Firebase云功能文件夹中
module.exports = {
twilio: {
accountSid: process.env.TWILIO_ACCOUNT_SID,apiKey: process.env.TWILIO_API_KEY,apiSecret: process.env.TWILIO_API_SECRET,chatService: process.env.TWILIO_CHAT_SERVICE_SID,outgoingApplicationSid: process.env.TWILIO_TWIML_APP_SID,incomingAllow: process.env.TWILIO_ALLOW_INCOMING_CALLS === "true"
}
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。