Javascript 使用Widget进行云签名上传

文档编制非常令人沮丧

我正在使用upload小部件尝试允许用户为他们的个人资料上传多张图片。我不能使用未签名的上传，因为可能会被滥用

我更愿意通过上传小部件上传文件，而不是通过服务器，因为它看起来应该很简单

我已经拼凑出我认为应该有效的东西，但它仍然在说：

Upload preset对于未签名的上传必须被列入白名单

服务器：

// grab a current UNIX timestamp
const millisecondsToSeconds = 1000;
const timestamp = Math.round(Date.now() / millisecondsToSeconds);
// generate the signature using the current timestmap and any other desired Cloudinary params
const signature = cloudinaryV2.utils.api_sign_request({ timestamp }, CLOUDINARY_SECRET_KEY);
// craft a signature payload to send to the client (timestamp and signature required)
return signature;

也试过

return {
  signature,
  timestamp,
};

const signature = cloudinaryV2.utils.api_sign_request(
      data.params_to_sign,
      CLOUDINARY_SECRET_KEY,
    );

也试过

return {
  signature,
  timestamp,
};

const signature = cloudinaryV2.utils.api_sign_request(
      data.params_to_sign,
      CLOUDINARY_SECRET_KEY,
    );

客户：

const generateSignature = async (callback: Function, params_to_sign: object): Promise<void> => {
  try {
    const signature = await generateSignatureCF({ slug: 'xxxx' }); 
  // also tried { slug: 'xxxx', params_to_sign }
    callback(signature);
  } catch (err) {
    console.log(err);
  }
};
cloudinary.openUploadWidget(
  {
    cloudName: 'xxx',
    uploadPreset: 'xxxx',
    sources: ['local', 'url', 'facebook', 'dropbox', 'google_photos'],
    folder: 'xxxx',
    apiKey: ENV.CLOUDINARY_PUBLIC_KEY,
    uploadSignature: generateSignature,
  },
  function(error, result) {
    console.log(error);
  },
);

const generateSignature=async（回调：函数，参数到符号：对象）：Promise=>{
试一试{
常量签名=等待生成签名cf（{slug:'xxxx'}）；
//还尝试了{slug:'xxxx'，params_to_sign}
回调（签名）；
}捕捉（错误）{
控制台日志（err）；
}
};
cloudinary.openUploadWidget(
{
cloudName:'xxx'，
上传预设：“xxxx”，
来源：[“本地”、“url”、“facebook”、“dropbox”、“谷歌照片”]，
文件夹：“xxxx”，
apiKey:ENV.CLOUDINARY\u PUBLIC\u KEY，
上传签名：generateSignature，
},
函数（错误、结果）{
console.log（错误）；
},
);

男人。我讨厌我的生活。我终于明白了。我美化了upload widget js，才明白函数的返回应该是一个字符串而不是一个对象，即使文档让它看起来不是这样

下面是如何使用Firebase云函数实现签名上传

import * as functions from 'firebase-functions';
import cloudinary from 'cloudinary';
const CLOUDINARY_SECRET_KEY = functions.config().cloudinary.key;
const cloudinaryV2 = cloudinary.v2;
module.exports.main = functions.https.onCall(async (data, context: CallableContext) => {
  // Checking that the user is authenticated.
  if (!context.auth) {
    // Throwing an HttpsError so that the client gets the error details.
    throw new functions.https.HttpsError(
      'failed-precondition',
      'The function must be called while authenticated.',
    );
  }
  try {
    return cloudinaryV2.utils.api_sign_request(data.params_to_sign, CLOUDINARY_SECRET_KEY);
  } catch (error) {
    throw new functions.https.HttpsError('failed-precondition', error.message);
  }
});


// CLIENT
const uploadWidget = () => {
  const generateSignature = async (callback: Function, params_to_sign: object): Promise<void> => {
    try {
      const signature = await generateImageUploadSignatureCF({ params_to_sign });
      callback(signature.data);
    } catch (err) {
      console.log(err);
    }
  };

  cloudinary.openUploadWidget(
    {
      cloudName: 'xxxxxx',
      uploadSignature: generateSignature,
      apiKey: ENV.CLOUDINARY_PUBLIC_KEY,
    },
    function(error, result) {
      console.log(error);
    },
  );
};

import*作为“firebase函数”中的函数；
从“cloudinary”导入cloudinary；
const CLOUDINARY\u SECRET\u KEY=functions.config（）.CLOUDINARY.KEY；
const cloudinaryV2=cloudinary.v2；
module.exports.main=functions.https.onCall（异步（数据，上下文：CallableContext）=>{
//检查用户是否经过身份验证。
如果（！context.auth）{
//正在抛出HttpsError，以便客户端获取错误详细信息。
抛出新函数。https.HttpsError(
“失败的前提条件”，
“必须在验证时调用该函数。”，
);
}
试一试{
返回cloudinaryV2.utils.api\u sign\u请求（data.params\u to\u sign，CLOUDINARY\u SECRET\u KEY）；
}捕获（错误）{
抛出新函数.https.HttpsError（'failed-premission'，error.message）；
}
});
//客户
const uploadWidget=（）=>{
const generateSignature=async（回调：函数，参数到符号：对象）：Promise=>{
试一试{
const signature=wait generateImageUploadSignatureCF（{params_to_sign}）；
回调（signature.data）；
}捕捉（错误）{
控制台日志（err）；
}
};
cloudinary.openUploadWidget(
{
cloudName:'xxxxxx'，
上传签名：generateSignature，
apiKey:ENV.CLOUDINARY\u PUBLIC\u KEY，
},
函数（错误、结果）{
console.log（错误）；
},
);
};

男人。我讨厌我的生活。我终于明白了。我美化了upload widget js，才明白函数的返回应该是一个字符串而不是一个对象，即使文档让它看起来不是这样

下面是如何使用Firebase云函数实现签名上传

import * as functions from 'firebase-functions';
import cloudinary from 'cloudinary';
const CLOUDINARY_SECRET_KEY = functions.config().cloudinary.key;
const cloudinaryV2 = cloudinary.v2;
module.exports.main = functions.https.onCall(async (data, context: CallableContext) => {
  // Checking that the user is authenticated.
  if (!context.auth) {
    // Throwing an HttpsError so that the client gets the error details.
    throw new functions.https.HttpsError(
      'failed-precondition',
      'The function must be called while authenticated.',
    );
  }
  try {
    return cloudinaryV2.utils.api_sign_request(data.params_to_sign, CLOUDINARY_SECRET_KEY);
  } catch (error) {
    throw new functions.https.HttpsError('failed-precondition', error.message);
  }
});


// CLIENT
const uploadWidget = () => {
  const generateSignature = async (callback: Function, params_to_sign: object): Promise<void> => {
    try {
      const signature = await generateImageUploadSignatureCF({ params_to_sign });
      callback(signature.data);
    } catch (err) {
      console.log(err);
    }
  };

  cloudinary.openUploadWidget(
    {
      cloudName: 'xxxxxx',
      uploadSignature: generateSignature,
      apiKey: ENV.CLOUDINARY_PUBLIC_KEY,
    },
    function(error, result) {
      console.log(error);
    },
  );
};

import*作为“firebase函数”中的函数；
从“cloudinary”导入cloudinary；
const CLOUDINARY\u SECRET\u KEY=functions.config（）.CLOUDINARY.KEY；
const cloudinaryV2=cloudinary.v2；
module.exports.main=functions.https.onCall（异步（数据，上下文：CallableContext）=>{
//检查用户是否经过身份验证。
如果（！context.auth）{
//正在抛出HttpsError，以便客户端获取错误详细信息。
抛出新函数。https.HttpsError(
“失败的前提条件”，
“必须在验证时调用该函数。”，
);
}
试一试{
返回cloudinaryV2.utils.api\u sign\u请求（data.params\u to\u sign，CLOUDINARY\u SECRET\u KEY）；
}捕获（错误）{
抛出新函数.https.HttpsError（'failed-premission'，error.message）；
}
});
//客户
const uploadWidget=（）=>{
const generateSignature=async（回调：函数，参数到符号：对象）：Promise=>{
试一试{
const signature=wait generateImageUploadSignatureCF（{params_to_sign}）；
回调（signature.data）；
}捕捉（错误）{
控制台日志（err）；
}
};
cloudinary.openUploadWidget(
{
cloudName:'xxxxxx'，
上传签名：generateSignature，
apiKey:ENV.CLOUDINARY\u PUBLIC\u KEY，
},
函数（错误、结果）{
console.log（错误）；
},
);
};

让我们花点时间指出Cloudinary的文档有多可怕。这是我见过的最糟糕的一次。噩梦燃料

现在我已经说出了我的心里话。。。我真的需要能够做到这一点，我花了太长时间把头撞在墙上，因为这应该是非常简单的。这是

服务器（Node.js） 您需要一个将签名时间戳对返回到前端的端点：

从“cloudinary”导入cloudinary
导出异步函数createImageUpload（）{
const timestamp=new Date（）.getTime（）
const signature=wait cloudinary.utils.api\u sign\u请求(
{
时间戳，
},
process.env.CLOUDINARY\u秘密
)
返回{时间戳，签名}
}

客户端（浏览器） 客户端向服务器请求签名时间戳对，然后使用该对上载文件。示例中使用的文件应来自

更改事件等

const CLOUD\u NAME=process.env.CLOUDINARY\u CLOUD\u NAME
const API_KEY=process.env.CLOUDINARY\u API_KEY
异步函数上载映像（文件）{
const{signature，timestamp}=wait api.post（'/image upload'）
const form=new FormData（）
append（'file'，file）
const res=等待取数(
`https://api.cloudinary.com/v1_1/${CLOUD\u NAME}/image/upload？api\u key=${api\u key}×tamp=${timestamp}&signature=${signature}`，
{
方法：“POST”，
主体：形式，
}
)
const data=await res.json（）
返回data.secure\u url
}

就这样。T