JavaScript を使用して、Cloudinary に写真をアップロードする際の「無効な署名」エラーの修正に進みます

Go で有効なクラウド署名を生成する

Cloudinary アップロード署名を作成するために Go で書かれたバックエンド スクリプト。このスクリプトは、安全な 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 を使用して画像をアップロードする

Axios とバックエンドから生成された署名を使用して画像を Cloudinary にアップロードするための JavaScript で記述されたフロントエンド スクリプト。

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 アップロードに HMAC が使用されるのはなぜですか?
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 ハッシュ技術により、安全なリアルタイムのアップロードが可能になり、アプリケーションでメディアやその他のリソースを処理するための信頼できる方法が得られます。 🎉