Figma桌面插件登录模块Cookie存储问题求助（Node.js API）

核心结论 #

不能直接通过Node.js后端将Cookie存储到Figma桌面应用中。Figma插件运行在独立的沙箱环境里，不遵循常规浏览器的Cookie存储机制，常规HTTP Cookie无法在这个环境中生效。

现有代码问题分析 #

1. 后端Cookie配置错误：

   • cookiesOptions中的expiresIn是错误字段，正确字段为expires
   • "" * 24 * 60 * 60 * 1000计算结果为0，Cookie会立即过期
   • 跨域场景下缺少sameSite和secure配置，导致Cookie无法被正确识别
   • SQL查询存在注入风险，直接拼接用户输入的email参数

2. 前端请求配置缺失：

   • Axios请求未设置withCredentials: true，跨域时不会携带或保存Cookie
   • 尝试用setCookie在Figma环境中设置Cookie，本身就不支持

3. 存储方案选错：

   • Figma插件有专门的持久化存储APIfigma.clientStorage，而非依赖浏览器Cookie

修正后的代码示例 #

Node.js后端修正

app.post("/user-login", async(req,res)=>{
const {email, password} = req.body;
// 修复SQL注入风险：使用参数化查询
db.query(`select * from users where email = ? and role_id='3'`, [email], async(err,result)=>{
    if(err){
        res.json({status: false,msg:"获取数据时出错，请稍后重试"});
    }else{
        if(result.length > 0){
            const resp = await bcrypt.compare(password, result[0].password);
            if(resp){
                const regtoken = jwt.sign(
                    { id: result[0].user_id }, 
                    "943h9DH(H#R(*#HD(HD(RTH#(*Dh9th9gn498cNA(RN97BR()))))))d@ERR#R%", 
                    { expiresIn: "90d" }
                );
                const cookiesOptions = {
                    expires: new Date(Date.now() + 90 * 24 * 60 * 60 * 1000), // 90天有效期
                    httpOnly: true, // 前端无法读取，提升安全性
                    sameSite: 'None', // 跨域场景必填
                    secure: process.env.NODE_ENV === 'production', // 生产环境HTTPS下启用
                    path: '/'
                };
                res.cookie('checklogin', regtoken, cookiesOptions);
                // 同时将token返回在响应体，方便前端直接存储
                res.json({status: true,msg:"登录成功", token: regtoken});
            }else{
                res.json({status: false,msg:"登录凭证无效"});
            }
        }else{
            res.json({status: false,msg:"访问被拒绝"});
        }
    }
})
})

注意：后端必须配置正确的CORS头，允许Figma插件域名跨域，且设置Access-Control-Allow-Credentials: true，不能用*作为Access-Control-Allow-Origin。

前端TypeScript代码修正

const PostData = async(e: React.FormEvent) => {
    e.preventDefault();

    const data = JSON.stringify({email: user.email, password: user.password});

    try {
        const res = await axios.post("http://localhost:8000/user-login", data, {
            headers: {
                "Content-Type": "application/json"
            },
            withCredentials: true // 允许跨域携带凭证
        });

        if(res.data.status){
            // 使用Figma官方存储API保存登录状态
            await figma.clientStorage.setAsync('isLoggedIn', true);
            await figma.clientStorage.setAsync('authToken', res.data.token);
            console.log("登录完成");
        }else{
            console.log("登录失败");
        }
    } catch (error) {
        console.error("请求出错：", error);
    }
}

替代方案建议 #

1. 优先使用figma.clientStorage：这是Figma官方提供的持久化存储方案，专门适配插件环境，数据会绑定到用户的Figma账号，在不同设备间同步。
2. Token直接返回在响应体：后端生成JWT后，直接在JSON响应中返回，前端拿到后存入clientStorage，后续请求时在请求头中携带Token即可，无需依赖Cookie。

内容的提问来源于stack exchange，提问作者mahan singh