Sử dụng JavaScript và Go để khắc phục lỗi "Chữ ký không hợp lệ" khi tải ảnh lên Cloudinary

Tạo chữ ký đám mây hợp lệ trong Go

Tập lệnh phụ trợ được viết bằng Go để tạo chữ ký tải lên Cloudinary. Tập lệnh này tạo chữ ký bằng cách sử dụng hàm băm HMAC an toàn và trả về chữ ký đó kèm theo dấu thời gian.

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)
}

Tải lên hình ảnh bằng Axios bằng JavaScript

Tập lệnh giao diện người dùng được viết bằng JavaScript để tải hình ảnh lên Cloudinary bằng Axios và chữ ký được tạo từ chương trình phụ trợ.

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);
    }
}

Kiểm tra đơn vị để tạo chữ ký trong Go

Đi tập lệnh kiểm tra đơn vị để xác thực việc tạo chữ ký. Các thử nghiệm bao gồm các trường hợp có và không có tham số để đảm bảo độ chính xác của chữ ký.

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)
    }
}

Các câu hỏi thường gặp về lỗi chữ ký Cloudinary và tải lên an toàn

1. Lỗi "Chữ ký không hợp lệ" có nghĩa là gì trong Cloudinary?
2. Lỗi này thường xảy ra khi chữ ký được tạo từ chương trình phụ trợ của bạn không khớp với chữ ký dự kiến ​​từ máy chủ của Cloudinary. Thông thường, điều này là do các tham số được sắp xếp không chính xác hoặc giá trị dấu thời gian không khớp.
3. Làm cách nào để đảm bảo dấu thời gian hợp lệ?
4. Tạo dấu thời gian gần với thời gian hiện tại tính bằng giây trên phần phụ trợ bằng cách sử dụng strconv.FormatInt(time.Now().Unix(), 10) trong cờ vây. Điều này giảm thiểu sự khác biệt về thời gian với dấu thời gian dự kiến ​​của Cloudinary.
5. Tại sao việc tạo chữ ký HMAC-SHA1 của tôi lại quan trọng?
6. Cloudinary sử dụng HMAC-SHA1 để bảo mật quá trình tải lên, đảm bảo chỉ những yêu cầu được ký với secret chìa khóa được chấp nhận. Phương pháp này giúp ngăn chặn truy cập trái phép và đảm bảo phương tiện của bạn được an toàn.
7. Những thông số nào nên có trong chữ ký?
8. Để thiết lập cơ bản, hãy bao gồm timestamp. Đối với các cấu hình phức tạp hơn, hãy thêm các tùy chọn khác như folder, tags, hoặc context, nhưng hãy đảm bảo những thứ này được thêm vào cả giao diện người dùng FormData và tạo chữ ký phụ trợ.
9. Làm cách nào để khắc phục lỗi chữ ký nhanh chóng?
10. Bắt đầu bằng cách in chính xác stringToSign trong phần phụ trợ của bạn và so sánh nó với tài liệu Cloudinary để đảm bảo thứ tự và cấu trúc tham số. Việc thêm tính năng ghi nhật ký có thể tiết lộ nơi chữ ký của bạn khác với những gì được mong đợi.
11. HMAC là gì và tại sao nó được sử dụng để tải lên Cloudinary?
12. HMAC (Mã xác thực tin nhắn dựa trên hàm băm) là một phương pháp an toàn để tạo hàm băm bằng khóa, cung cấp tính toàn vẹn và xác thực của dữ liệu. Cloudinary yêu cầu HMAC-SHA1 để ký các nội dung tải lên một cách an toàn.
13. Tôi có thể kiểm tra việc tạo chữ ký trên localhost không?
14. Có, việc tạo chữ ký phụ trợ trên localhost là điều phổ biến. Chỉ cần chắc chắn rằng API key Và secret được đặt chính xác trong các biến môi trường phát triển của bạn.
15. Sự khác biệt giữa xác thực dựa trên dấu thời gian và dựa trên mã thông báo là gì?
16. Xác thực dựa trên dấu thời gian yêu cầu dấu thời gian hợp lệ cho mỗi lần tải lên, trong khi dựa trên mã thông báo sử dụng mã thông báo tạm thời để truy cập. Dựa trên dấu thời gian rất đơn giản và thường được sử dụng với Cloudinary.
17. Việc thêm nhiều tham số có thể gây ra lỗi không?
18. Có, mỗi tham số bổ sung phải được đưa vào cả giao diện người dùng FormData và phụ trợ generateSignature chức năng. Nếu không căn chỉnh sẽ dẫn đến lỗi “Chữ ký không hợp lệ”.
19. Thứ tự tham số ảnh hưởng đến chữ ký như thế nào?
20. Thứ tự tham số là rất quan trọng. Sử dụng sort.Strings(keys) sắp xếp chúng theo thứ tự bảng chữ cái ở phần phụ trợ; thứ tự này phải phù hợp với mong đợi của Cloudinary.
21. Có cách nào để tự động hóa quá trình tải lên này một cách an toàn trên các môi trường không?
22. Có, việc sử dụng các khóa và bí mật API dành riêng cho môi trường, cùng với quy trình HMAC, cho phép tạo ra các chữ ký an toàn, nhất quán trên các môi trường khác nhau (nhà phát triển, dàn dựng, sản xuất).

Suy nghĩ cuối cùng về lỗi tải lên trên nền tảng đám mây

Khi xử lý tải lên phương tiện bằng Cloudinary, quy trình tạo chữ ký an toàn và nhất quán là chìa khóa để tránh lỗi “Chữ ký không hợp lệ”. Đảm bảo rằng dấu thời gian và thứ tự tham số chính xác là rất quan trọng để tích hợp suôn sẻ. Kiểm tra chuỗi chữ ký chính xác cũng có thể giúp phát hiện ra vấn đề.

Bằng cách căn chỉnh các bước phụ trợ và giao diện người dùng, phương pháp này xây dựng một giải pháp mạnh mẽ và linh hoạt. Kỹ thuật băm HMAC với Go và JavaScript cho phép tải lên an toàn, theo thời gian thực, mang đến cho bạn một phương pháp đáng tin cậy để xử lý phương tiện và các tài nguyên khác trong ứng dụng của bạn! 🎉