使用 JavaScript 和 Go 修复上传图片到 Cloudinary 时出现“无效签名”错误

在 Go 中生成有效的 Cloudinary 签名

用 Go 编写的后端脚本，用于创建 Cloudinary 上传签名。该脚本使用安全 HMAC 哈希生成签名，并返回带有时间戳的签名。

package main
import (
    "crypto/hmac"
    "crypto/sha1"
    "encoding/hex"
    "fmt"
    "net/http"
    "sort"
    "strconv"
    "time"
)
func generateSignature(params map[string]string, secret string) (string, error) {
    var keys []string
    for key := range params {
        keys = append(keys, key)
    }
    sort.Strings(keys)
    stringToSign := ""
    for _, key := range keys {
        stringToSign += fmt.Sprintf("%s=%s&", key, params[key])
    }
    stringToSign = stringToSign[:len(stringToSign)-1]
    mac := hmac.New(sha1.New, []byte(secret))
    mac.Write([]byte(stringToSign))
    return hex.EncodeToString(mac.Sum(nil)), nil
}
func getSignatureHandler(w http.ResponseWriter, r *http.Request) {
    timestamp := strconv.FormatInt(time.Now().Unix(), 10)
    params := map[string]string{
        "timestamp": timestamp,
    }
    signature, err := generateSignature(params, "YOUR_CLOUDINARY_SECRET")
    if err != nil {
        http.Error(w, "Failed to generate signature", http.StatusInternalServerError)
        return
    }
    w.Header().Set("Content-Type", "application/json")
    fmt.Fprintf(w, "{\\"signature\\": \\"%s\\", \\"timestamp\\": \\"%s\\"}", signature, timestamp)
}
func main() {
    http.HandleFunc("/generate-signature", getSignatureHandler)
    http.ListenAndServe(":8080", nil)
}

在 JavaScript 中使用 Axios 上传图像

用 JavaScript 编写的前端脚本，使用 Axios 和后端生成的签名将图像上传到 Cloudinary。

import axios from 'axios';
async function uploadImage(file) {
    const timestamp = Math.floor(Date.now() / 1000);
    try {
        const { data } = await axios.get('/generate-signature');
        const formData = new FormData();
        formData.append("api_key", process.env.VITE_CLOUDINARY_API_KEY);
        formData.append("file", file);
        formData.append("signature", data.signature);
        formData.append("timestamp", data.timestamp);
        const response = await axios.post(
            `https://api.cloudinary.com/v1_1/${cloudName}/image/upload`,
            formData
        );
        console.log("Image uploaded successfully:", response.data.secure_url);
    } catch (error) {
        console.error("Error uploading image:", error);
    }
}

Go 中签名生成的单元测试

使用单元测试脚本来验证签名生成。测试包括带参数和不带参数的情况，以确保签名的准确性。

package main
import (
    "testing"
)
func TestGenerateSignature(t *testing.T) {
    params := map[string]string{
        "timestamp": "1730359693",
    }
    expectedSignature := "EXPECTED_SIGNATURE"
    actualSignature, err := generateSignature(params, "YOUR_CLOUDINARY_SECRET")
    if err != nil {
        t.Errorf("Expected no error, got %v", err)
    }
    if actualSignature != expectedSignature {
        t.Errorf("Expected signature %v, got %v", expectedSignature, actualSignature)
    }
}

有关 Cloudinary 签名错误和安全上传的常见问题

1. Cloudinary 中的“无效签名”错误意味着什么？
2. 当后端生成的签名与 Cloudinary 服务器的预期签名不匹配时，通常会发生此错误。通常，这是由于参数排序不正确或时间戳值不匹配造成的。
3. 如何确保时间戳有效？
4. 使用以下命令在后端生成接近当前时间（以秒为单位）的时间戳 strconv.FormatInt(time.Now().Unix(), 10) 在围棋中。这可以最大限度地减少与 Cloudinary 预期时间戳的时间差异。
5. 为什么我的 HMAC-SHA1 签名生成很重要？
6. Cloudinary 使用 HMAC-SHA1 来保护上传，确保只有用您的签名的请求 secret 密钥被接受。此方法有助于防止未经授权的访问并确保您的媒体安全。
7. 签名中应包含哪些参数？
8. 对于基本设置，包括 timestamp。对于更复杂的配置，请添加其他选项，例如 folder, tags， 或者 context，但确保将它们添加到两个前端 FormData 和后端签名生成。
9. 如何快速排除签名错误？
10. 首先打印准确的 stringToSign 在您的后端并将其与 Cloudinary 文档进行比较，以确保参数顺序和结构。添加日志记录可以揭示您的签名与预期的差异。
11. 什么是 HMAC？为什么将其用于 Cloudinary 上传？
12. HMAC（基于哈希的消息身份验证代码）是一种使用密钥创建哈希的安全方法，可提供数据完整性和真实性。 Cloudinary 需要 HMAC-SHA1 来安全地签名上传。
13. 我可以在本地主机上测试签名生成吗？
14. 是的，在本地主机上运行后端签名生成很常见。只需确保 API key 和 secret 在您的开发环境变量中正确设置。
15. 基于时间戳和基于令牌的身份验证有什么区别？
16. 基于时间戳的身份验证需要为每次上传提供有效的时间戳，而基于令牌的身份验证使用临时令牌进行访问。基于时间戳很简单，通常与 Cloudinary 一起使用。
17. 添加更多参数会导致错误吗？
18. 是的，每个附加参数都必须包含在前端中 FormData 和后端 generateSignature 功能。如果它们不对齐，将会导致“无效签名”错误。
19. 参数排序如何影响签名？
20. 参数排序至关重要。使用 sort.Strings(keys) 在后端按字母顺序对它们进行排序；该订单必须符合 Cloudinary 的预期。
21. 有没有办法跨环境安全地自动执行此上传？
22. 是的，使用特定于环境的 API 密钥和秘密以及 HMAC 流程，可以在不同环境（开发、登台、生产）中实现安全、一致的签名。

关于 Cloudinary 上传错误的最终想法

使用 Cloudinary 处理媒体上传时，安全一致的签名生成过程是避免“无效签名”错误的关键。确保 时间戳 参数排序的正确性对于顺利集成至关重要。测试确切的签名字符串也可以帮助发现问题。

通过协调后端和前端步骤，此方法构建了一个强大而灵活的解决方案。使用 Go 和 JavaScript 的 HMAC 哈希技术可实现安全、实时上传，为您提供可靠的方法来处理应用程序中的媒体和其他资源！ 🎉