Menggunakan JavaScript dan Pergi ke Betulkan Ralat "Tandatangan Tidak Sah" Semasa Memuat Naik Gambar ke Cloudinary

Menjana Tandatangan Awan yang Sah dalam Go

Skrip belakang yang ditulis dalam Pergi untuk mencipta tandatangan muat naik Cloudinary. Skrip ini menjana tandatangan menggunakan pencincangan HMAC selamat dan mengembalikannya dengan cap masa.

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

Memuat naik Imej dengan Axios dalam JavaScript

Skrip frontend yang ditulis dalam JavaScript untuk memuat naik imej ke Cloudinary menggunakan Axios dan tandatangan yang dijana daripada bahagian belakang.

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

Ujian Unit untuk Penjanaan Tandatangan dalam Go

Skrip ujian unit Go untuk mengesahkan penjanaan tandatangan. Ujian termasuk kes dengan dan tanpa parameter untuk memastikan ketepatan tandatangan.

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

Soalan Lazim tentang Ralat Tandatangan Awan dan Muat Naik Selamat

1. Apakah maksud ralat "Tandatangan Tidak Sah" dalam Cloudinary?
2. Ralat ini biasanya berlaku apabila tandatangan yang dijana daripada bahagian belakang anda tidak sepadan dengan tandatangan yang dijangkakan daripada pelayan Cloudinary. Selalunya, ini disebabkan oleh parameter yang tidak disusun dengan betul atau nilai cap masa yang tidak sepadan.
3. Bagaimanakah cara saya memastikan cap masa itu sah?
4. Hasilkan cap masa yang hampir dengan masa semasa dalam beberapa saat pada bahagian belakang menggunakan strconv.FormatInt(time.Now().Unix(), 10) dalam Go. Ini meminimumkan percanggahan masa dengan cap masa yang dijangka Cloudinary.
5. Mengapakah penjanaan tandatangan HMAC-SHA1 saya penting?
6. Cloudinary menggunakan HMAC-SHA1 untuk menjamin muat naik, memastikan hanya permintaan ditandatangani dengan anda secret kunci diterima. Kaedah ini membantu menghalang capaian yang tidak dibenarkan dan memastikan media anda selamat.
7. Apakah parameter yang perlu disertakan dalam tandatangan?
8. Untuk persediaan asas, sertakan timestamp. Untuk konfigurasi yang lebih kompleks, tambahkan pilihan lain seperti folder, tags, atau context, tetapi pastikan ini ditambahkan pada kedua-dua bahagian hadapan FormData dan penjanaan tandatangan bahagian belakang.
9. Bagaimanakah saya boleh menyelesaikan masalah ralat tandatangan dengan cepat?
10. Mulakan dengan mencetak tepat stringToSign di bahagian belakang anda dan bandingkan dengan dokumentasi Cloudinary untuk memastikan susunan dan struktur parameter. Menambah pengelogan boleh mendedahkan tempat tandatangan anda menyimpang daripada apa yang dijangkakan.
11. Apakah HMAC dan mengapa ia digunakan untuk muat naik Cloudinary?
12. HMAC (Kod Pengesahan Mesej berasaskan Hash) ialah kaedah selamat untuk mencipta cincang menggunakan kunci, memberikan integriti dan ketulenan data. Cloudinary memerlukan HMAC-SHA1 untuk menandatangani muat naik dengan selamat.
13. Bolehkah saya menguji penjanaan tandatangan pada localhost?
14. Ya, menjalankan penjanaan tandatangan bahagian belakang pada localhost adalah perkara biasa. Hanya pastikan API key dan secret ditetapkan dengan betul dalam pembolehubah persekitaran pembangunan anda.
15. Apakah perbezaan antara pengesahan berasaskan cap waktu dan berasaskan token?
16. Pengesahan berasaskan cap masa memerlukan cap masa yang sah untuk setiap muat naik, manakala berasaskan token menggunakan token sementara untuk akses. Berasaskan cap waktu adalah mudah dan biasa digunakan dengan Cloudinary.
17. Bolehkah menambah lebih banyak parameter menyebabkan ralat?
18. Ya, setiap parameter tambahan mesti disertakan dalam kedua-dua bahagian hadapan FormData dan bahagian belakang generateSignature fungsi. Jika ia tidak sejajar, ia akan membawa kepada ralat "Tandatangan Tidak Sah".
19. Bagaimanakah susunan parameter mempengaruhi tandatangan?
20. Susunan parameter adalah kritikal. guna sort.Strings(keys) untuk menyusunnya mengikut abjad di bahagian belakang; pesanan ini mesti sepadan dengan jangkaan Cloudinary.
21. Adakah terdapat cara untuk mengautomasikan muat naik ini dengan selamat merentas persekitaran?
22. Ya, menggunakan kunci dan rahsia API khusus persekitaran, bersama-sama dengan proses HMAC, membolehkan tandatangan yang selamat dan konsisten merentas persekitaran yang berbeza (dev, pementasan, pengeluaran).

Fikiran Akhir tentang Ralat Muat Naik Awan

Apabila mengendalikan muat naik media dengan Cloudinary, proses penjanaan tandatangan yang selamat dan konsisten adalah kunci untuk mengelakkan ralat "Tandatangan Tidak Sah". Memastikan bahawa cap masa dan susunan parameter adalah betul adalah penting untuk penyepaduan yang lancar. Menguji rentetan tandatangan yang tepat juga boleh membantu mendedahkan isu.

Dengan menjajarkan langkah hujung belakang dan hujung hadapan, pendekatan ini membina penyelesaian yang teguh dan fleksibel. Teknik pencincangan HMAC dengan Go dan JavaScript membenarkan muat naik masa nyata yang selamat, memberikan anda kaedah yang boleh dipercayai untuk mengendalikan media dan sumber lain dalam aplikasi anda! 🎉