如何解决Cloudinary服务器端图像上传签名失败
我正在开发一个上载用户徽标或图像的程序。 为此,我首先在服务器端创建一个签名,然后使用该签名将映像从客户端上传到cloudinary。
问题是我总是收到以下错误: `无效签名“ b4000077c554448649396c31750e27141820693c”。要签名的字符串- '源= uw&timestamp = 1598531294&upload_preset =签名预设'。 (具有不同的签名和时间戳记)。
我在他们的文档中遵循了指南:https://cloudinary.com/documentation/upload_images#generating_authentication_signatures 但是没有帮助,
这是客户端代码:
let signature = '';
let timestamp = '';
let generateSignature = function (callback,params_to_sign) {
$.ajax({
url: "/business/create-cloudinary-signature",type: "GET",dataType: "text",data: { data: params_to_sign },complete: function () { console.log("complete") },success: function (response,textStatus,xhr) {
const res = JSON.parse(response);
console.log(res.signature)
signature = res.signature;
timestamp = res.timestamp;
console.log(signature,timestamp);
callback(signature);
},error: function (xhr,status,error) { console.log(xhr,error); }
});
}
console.log(signature,timestamp) //correct values
const uploadSettings = {
apiKey: "816773373496447",cropping: true,cloudName: 'rav-chesed',uploadPreset: 'signed-preset'
}
var myWidget = cloudinary.createUploadWidget({ ...uploadSettings,uploadSignature: generateSignature,uploadSignatureTimestamp: timestamp },(error,result) => {
if (error) {
console.log(error)
}
if (!error && result && result.event === "success") {
console.log('Done! Here is the image info: ',result.info);
}
}
)
document.getElementById("logoUploader").addEventListener("click",function () {
myWidget.open();
},false);
这是服务器端代码(nodejs)
router.get("/create-cloudinary-signature",(req,res) => {
console.log("heyy");
console.log(req.query);
const data = req.query.data;
// // Get the timestamp in seconds
// var timestamp = Math.round(new Date().getTime() / 1000);
// console.log(timestamp);
data.timestamp = Number(data.timestamp);
// console.log(data);
// // Show the timestamp
// console.log("Timestamp:",timestamp);
// const sts = `source=${data.source}×tamp=${data.timestamp}&upload_preset=${data.upload_preset}`;
// console.log(sts);
// function sortObjKeysAlphabetically(obj) {
// var ordered = {};
// Object.keys(obj)
// .sort()
// .forEach(function (key) {
// ordered[key] = obj[key];
// });
// return ordered;
// }
// var sortedObj = sortObjKeysAlphabetically(data);
// console.log(sortedObj);
// params_to_sign via string
var params_to_sign =
"source=" +
data.source +
"×tamp=" +
data.timestamp +
"&upload_preset=" +
data.upload_preset;
console.log(params_to_sign);
// Get the signature using the Node.js SDK method api_sign_request
var signature = cloudinary.utils.api_sign_request(
params_to_sign,process.env.CLOUDINARY_API_SECRET
);
console.log(signature);
res.json({ signature,timestamp: data.timestamp });
});
我可以正确获取数据,甚至可以将哈希返回给客户端,但是由于某种原因,签名无效,因此我无法上传图像。
希望对此有所帮助。 预先感谢。
解决方法
api_sign_request
函数使用哈希(对象)和API秘密字符串。在这种情况下,您要提供一个字符串(params_to_sign
)作为第一个参数。
您可以做的是直接将data
作为第一个参数传递给api_sign_request
,而无需进行任何修改。这将包含所需的所有参数,并与前端Upload Widget发送的内容完全匹配。
在他们的支持下工作了几个小时之后,我想我自己解决了这个问题,
看起来生成签名的代码与我使用的版本不兼容。
他们在文档中要求使用var cloudinary = require("cloudinary").v2;
但是,当我将其更改回var cloudinary = require("cloudinary");
之后,一切开始正常运行。
我还做了一些代码更改: 服务器端:
router.get("/create-cloudinary-signature",(req,res) => {
console.log("heyy");
//console.log(req.query);
const data = req.query.data;
console.log(data);
const timeStampSignature = Math.round(new Date() / 1000);
console.log(timeStampSignature);
// Get the signature using the Node.js SDK method api_sign_request
var signature = cloudinary.utils.api_sign_request(
data,process.env.CLOUDINARY_API_SECRET
);
console.log(signature);
res.json({ signature: signature,timestampSignature: timeStampSignature });
});
和客户端:
<script type="text/javascript">
let signature = '';
let timestampSignature = '';
let generateSignature = function (callback,params_to_sign) {
$.ajax({
url: "/business/create-cloudinary-signature",type: "GET",dataType: "text",//params _to_sign contains timestamp
data: { data: params_to_sign },complete: function () { console.log("complete") },success: function (response,textStatus,xhr) {
const res = JSON.parse(response);
//console.log(res.signature)
signature = res.signature;
timestampSignature = res.timestampSignature;
console.log(signature,timestampSignature);
callback(signature);
},error: function (xhr,status,error) { console.log(xhr,error); }
});
}
const uploadSettings = {
apiKey: "blabla",cropping: true,cloudName: 'name',uploadPreset: 'signed-preset'
}
var myWidget = cloudinary.createUploadWidget({ ...uploadSettings,uploadSignature: generateSignature,uploadSignatureTimestamp: timestampSignature },(error,result) => {
if (error) {
console.log(error)
}
if (!error && result && result.event === "success") {
console.log('Done! Here is the image info: ',result.info);
}
}
)
document.getElementById("logoUploader").addEventListener("click",function () {
myWidget.open();
},false);
</script>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。