Menggunakan JavaScript dan Perbaiki Kesalahan "Tanda Tangan Tidak Valid" Saat Mengunggah Gambar ke Cloudinary

Menghasilkan Tanda Tangan Cloudinary yang Valid di Go

Skrip backend ditulis dalam Go untuk membuat tanda tangan unggahan Cloudinary. Skrip ini menghasilkan tanda tangan menggunakan hashing HMAC aman dan mengembalikannya dengan stempel waktu.

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

Mengunggah Gambar dengan Axios di JavaScript

Skrip frontend ditulis dalam JavaScript untuk mengunggah gambar ke Cloudinary menggunakan Axios dan tanda tangan yang dihasilkan dari backend.

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

Pengujian Unit untuk Pembuatan Tanda Tangan di Go

Buka skrip pengujian unit untuk memvalidasi pembuatan tanda tangan. Pengujian mencakup kasus dengan dan tanpa parameter untuk memastikan keakuratan tanda tangan.

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

Pertanyaan Umum tentang Kesalahan Tanda Tangan Cloudinary dan Pengunggahan Aman

1. Apa arti kesalahan "Tanda Tangan Tidak Valid" di Cloudinary?
2. Kesalahan ini biasanya terjadi ketika tanda tangan yang dihasilkan dari backend Anda tidak cocok dengan tanda tangan yang diharapkan dari server Cloudinary. Seringkali, hal ini disebabkan oleh urutan parameter yang salah atau nilai stempel waktu yang tidak cocok.
3. Bagaimana cara memastikan stempel waktu valid?
4. Hasilkan stempel waktu yang mendekati waktu saat ini dalam hitungan detik di backend menggunakan strconv.FormatInt(time.Now().Unix(), 10) di Pergi. Hal ini meminimalkan perbedaan waktu dengan stempel waktu yang diharapkan dari Cloudinary.
5. Mengapa pembuatan tanda tangan HMAC-SHA1 saya penting?
6. Cloudinary menggunakan HMAC-SHA1 untuk mengamankan unggahan, memastikan hanya permintaan yang ditandatangani oleh Anda secret kunci diterima. Metode ini membantu mencegah akses tidak sah dan memastikan media Anda aman.
7. Parameter apa yang harus disertakan dalam tanda tangan?
8. Untuk pengaturan dasar, sertakan timestamp. Untuk konfigurasi yang lebih kompleks, tambahkan opsi lain seperti folder, tags, atau context, tapi pastikan ini ditambahkan ke kedua frontend FormData dan pembuatan tanda tangan backend.
9. Bagaimana cara memecahkan masalah kesalahan tanda tangan dengan cepat?
10. Mulailah dengan mencetak persisnya stringToSign di backend Anda dan bandingkan dengan dokumentasi Cloudinary untuk memastikan urutan dan struktur parameter. Menambahkan logging dapat mengungkapkan perbedaan tanda tangan Anda dari yang diharapkan.
11. Apa itu HMAC dan mengapa digunakan untuk upload Cloudinary?
12. HMAC (Kode Otentikasi Pesan Berbasis Hash) adalah metode aman untuk membuat hash menggunakan kunci, memberikan integritas dan keaslian data. Cloudinary memerlukan HMAC-SHA1 untuk menandatangani unggahan dengan aman.
13. Bisakah saya menguji pembuatan tanda tangan di localhost?
14. Ya, menjalankan pembuatan tanda tangan backend di localhost adalah hal biasa. Pastikan saja API key Dan secret diatur dengan benar dalam variabel lingkungan pengembangan Anda.
15. Apa perbedaan antara autentikasi berbasis stempel waktu dan berbasis token?
16. Otentikasi berbasis stempel waktu memerlukan stempel waktu yang valid untuk setiap unggahan, sedangkan berbasis token menggunakan token sementara untuk akses. Berbasis stempel waktu sederhana dan umum digunakan dengan Cloudinary.
17. Bisakah menambahkan lebih banyak parameter menyebabkan kesalahan?
18. Ya, setiap parameter tambahan harus disertakan di kedua frontend FormData dan bagian belakang generateSignature fungsi. Jika tidak sejajar, akan menyebabkan kesalahan "Tanda Tangan Tidak Valid".
19. Bagaimana pengurutan parameter memengaruhi tanda tangan?
20. Urutan parameter sangat penting. Menggunakan sort.Strings(keys) untuk mengurutkannya berdasarkan abjad di backend; pesanan ini harus sesuai dengan ekspektasi Cloudinary.
21. Apakah ada cara untuk mengotomatiskan unggahan ini dengan aman di seluruh lingkungan?
22. Ya, menggunakan kunci dan rahasia API khusus lingkungan, bersama dengan proses HMAC, memungkinkan tanda tangan yang aman dan konsisten di berbagai lingkungan (pengembangan, staging, produksi).

Pemikiran Terakhir tentang Kesalahan Pengunggahan Cloudinary

Saat menangani unggahan media dengan Cloudinary, proses pembuatan tanda tangan yang aman dan konsisten adalah kunci untuk menghindari kesalahan “Tanda Tangan Tidak Valid”. Memastikan bahwa stempel waktu dan pengurutan parameter yang benar sangat penting untuk kelancaran integrasi. Menguji string tanda tangan yang tepat juga dapat membantu mengungkap masalah.

Dengan menyelaraskan langkah-langkah backend dan frontend, pendekatan ini membangun solusi yang kuat dan fleksibel. Teknik hashing HMAC dengan Go dan JavaScript memungkinkan pengunggahan yang aman dan real-time, memberi Anda metode yang andal untuk menangani media dan sumber daya lainnya di aplikasi Anda! 🎉