このページは現在英語版のみで提供されており、日本語版も近日中に提供される予定です。ご利用いただきありがとうございます。

签名 URL

操作场景

签名 URL 是指基于图片模板动态修改图片元素变量后生成签名 URL 链接并作为分享使用,本文将介绍如何生成签名 URL 链接。

前提条件

1. 开通 Open Edge

开通 Open Edge 服务,详细请参见 快速入门

2. 获取图片渲染 API 密钥

获取生成签名 URL 所需的安全凭证,即 API Key,步骤如下:
打开图片模板后,切换到 Settings,查看 API Key 一项。
注意:
API Key 用于生成签名链接及 API 调用,并被用来识别账号的唯一性,请保管好您的 API Key 避免泄漏。




示例代码

为了方便用户开发,图片渲染提供多语言 Demo,详情请参见下方:
Node.js
Golang
Java
PHP
Python
const crypto = require('crypto');

function generateMD5(input) {
return crypto.createHash('md5').update(input).digest('hex');
}


// 模板中设置的图片格式,可在 Settings 中查看
const format = 'png';
// 用户 Id,可在 Settings 中查看
const userId = '6b4afbd3d1834aa0a5537e5b02ddab3e';
// 模板 Id,可在 Settings 中查看
const templateId = 'ep-Zl1EQGmDexeY';
// 生成签名的API Key,可在 Settings 中查看
const apiKey = '$YOUR_API_KEY$';


/** 请在这里填入要修改的模板变量参数! */
const params = {
title: 'Hello, Edge',
};
// 对参数key进行排序
const sortedKeys = Object.keys(params).sort();
// 对参数进行拼接
const searchParams = sortedKeys.map(key => `${key}=${params[key]}`).join('&');


// 待签名的数据
const signData = JSON.stringify({
apiKey: apiKey,
searchParams: searchParams,
});
// 调用 md5 生成签名
const sign = generateMD5(signData);

// 对 URL 参数的值执行 encodeURIComponent,以编码 URL 中的特殊字符
const encodedSearchParams = sortedKeys.map(key => `${key}=${encodeURIComponent(params[key])}`).join('&');
const finalUrl = `https://image.edgeone.site/${sign}/${userId}/${templateId}.${format}?${encodedSearchParams}`;
console.log(finalUrl);
// 打印的示例URL: https://image.edgeone.site/c640ab6cb550eaf87fd13d7bb716370f/6b4afbd3d1834aa0a5537e5b02ddab3e/ep-Zl1EQGmDexeY.png

package main
import (
"crypto/md5"
"encoding/hex"
"encoding/json"
"fmt"
"net/url"
"sort"
)

func generateMD5(input string) string {
hash := md5.New()
hash.Write([]byte(input))
return hex.EncodeToString(hash.Sum(nil))
}

func main() {
// 模板中设置的图片格式,可在 Settings 中查看
format := "png"
// 用户 Id,可在 Settings 中查看
userId := "6b4afbd3d1834aa0a5537e5b02ddab3e"
// 模板 Id,可在 Settings 中查看
templateId := "ep-Zl1EQGmDexeY"
// 生成签名的API Key,可在 Settings 中查看
apiKey := "$YOUR_API_KEY$"
/** 请在这里填入要修改的模板变量参数! */
params := map[string]string{
"title": "Hello, Edge",
}
// 对参数key进行排序
sortedKeys := make([]string, 0, len(params))
for key := range params {
sortedKeys = append(sortedKeys, key)
}
sort.Strings(sortedKeys)
// 对参数进行拼接
searchParams := ""
for i, key := range sortedKeys {
if i > 0 {
searchParams += "&"
}
searchParams += fmt.Sprintf("%s=%s", key, params[key])
}
// 待签名的数据
signData := map[string]interface{}{
"apiKey": apiKey,
"searchParams": searchParams,
}
signDataJSON, _ := json.Marshal(signData)
// 调用 md5 生成签名
sign := generateMD5(string(signDataJSON))
// 对 URL 参数的值执行 encodeURIComponent,以编码 URL 中的特殊字符
encodedSearchParams := ""
for i, key := range sortedKeys {
if i > 0 {
encodedSearchParams += "&"
}
encodedValue := url.QueryEscape(params[key])
encodedSearchParams += fmt.Sprintf("%s=%s", key, encodedValue)
}
finalUrl := fmt.Sprintf("https://image.edgeone.site/%s/%s/%s.%s?%s", sign, userId, templateId, format, encodedSearchParams)

fmt.Println(finalUrl)
// 打印的示例URL: https://image.edgeone.site/c640ab6cb550eaf87fd13d7bb716370f/6b4afbd3d1834aa0a5537e5b02ddab3e/ep-Zl1EQGmDexeY.png
}
import java.security.MessageDigest;
import java.security.NoSuchAlgorithmException;
import java.net.URLEncoder;
import java.nio.charset.StandardCharsets;
import java.util.HashMap;
import java.util.Map;
import java.util.TreeMap;
public class Main {
// 生成 MD5 哈希
public static String generateMD5(String input) {
try {
MessageDigest md = MessageDigest.getInstance("MD5");
byte[] messageDigest = md.digest(input.getBytes(StandardCharsets.UTF_8));
StringBuilder hexString = new StringBuilder();
for (byte b : messageDigest) {
String hex = Integer.toHexString(0xff & b);
if (hex.length() == 1) hexString.append('0');
hexString.append(hex);
}
return hexString.toString();
} catch (NoSuchAlgorithmException e) {
throw new RuntimeException(e);
}
}
public static void main(String[] args) {
// 模板中设置的图片格式,可在 Settings 中查看
String format = "png";
// 用户 Id,可在 Settings 中查看
String userId = "6b4afbd3d1834aa0a5537e5b02ddab3e";
// 模板 Id,可在 Settings 中查看
String templateId = "ep-Zl1EQGmDexeY";
// 生成签名的API Key,可在 Settings 中查看
String apiKey = "$YOUR_API_KEY$";
Map<String, String> params = new HashMap<>();
/** 请在这里填入要修改的模板变量参数! */
params.put("title", "Hello, Edge");

// 对参数key进行排序
TreeMap<String, String> sortedParams = new TreeMap<>(params);
// 对参数进行拼接
StringBuilder searchParams = new StringBuilder();
for (Map.Entry<String, String> entry : sortedParams.entrySet()) {
if (searchParams.length() > 0) {
searchParams.append("&");
}
String escapedValue = entry.getValue().replace("\"", "\\\"");
searchParams.append(entry.getKey()).append("=").append(escapedValue);
}
// 待签名的数据
String signData = String.format("{\"apiKey\":\"%s\",\"searchParams\":\"%s\"}", apiKey, searchParams.toString());
// 调用 md5 生成签名
String sign = generateMD5(signData);
// 对 URL 参数的值执行 encodeURIComponent,以编码 URL 中的特殊字符
StringBuilder encodedSearchParams = new StringBuilder();
for (Map.Entry<String, String> entry : sortedParams.entrySet()) {
if (encodedSearchParams.length() > 0) {
encodedSearchParams.append("&");
}
String encodedValue = URLEncoder.encode(entry.getValue(), StandardCharsets.UTF_8);
encodedSearchParams.append(entry.getKey()).append("=").append(encodedValue);
}
String finalUrl = String.format("https://image.edgeone.site/%s/%s/%s.%s?%s", sign, userId, templateId, format, encodedSearchParams.toString());

System.out.println(finalUrl);
// 打印的示例URL: https://image.edgeone.site/c640ab6cb550eaf87fd13d7bb716370f/6b4afbd3d1834aa0a5537e5b02ddab3e/ep-Zl1EQGmDexeY.png
}
}
<?php

// 生成 MD5 哈希
function generateMD5($input) {
return md5($input);
}
// 模板中设置的图片格式,可在 Settings 中查看
$format = 'png';
// 用户 Id,可在 Settings 中查看
$userId = '6b4afbd3d1834aa0a5537e5b02ddab3e';
// 模板 Id,可在 Settings 中查看
$templateId = 'ep-Zl1EQGmDexeY';
// 生成签名的API Key,可在 Settings 中查看
$apiKey = '$YOUR_API_KEY$';
/** 请在这里填入要修改的模板变量参数! */
$params = [
'title' => 'Hello, Edge',
];
// 对参数key进行排序
ksort($params);
// 对参数进行拼接
$searchParams = '';
foreach ($params as $key => $value) {
if ($searchParams !== '') {
$searchParams .= '&';
}
$searchParams .= $key . '=' . $value;
}
// 待签名的数据
$signData = json_encode([
'apiKey' => $apiKey,
'searchParams' => $searchParams,
]);

// 调用 md5 生成签名
$sign = generateMD5($signData);
// 对 URL 参数的值执行 urlencode,以编码 URL 中的特殊字符
$encodedSearchParams = http_build_query($params);
// 构建最终的 URL
$finalUrl = sprintf(
'https://image.edgeone.site/%s/%s/%s.%s?%s',
$sign,
$userId,
$templateId,
$format,
$encodedSearchParams
);

echo $finalUrl;
// 打印的示例URL: https://image.edgeone.site/c640ab6cb550eaf87fd13d7bb716370f/6b4afbd3d1834aa0a5537e5b02ddab3e/ep-Zl1EQGmDexeY.png
?>
import hashlib
import urllib.parse
# 生成 MD5 哈希
def generate_md5(input_string):
return hashlib.md5(input_string.encode('utf-8')).hexdigest()
# 模板中设置的图片格式,可在 Settings 中查看
format = 'png'
# 用户 Id,可在 Settings 中查看
user_id = '6b4afbd3d1834aa0a5537e5b02ddab3e'
# 模板 Id,可在 Settings 中查看
template_id = 'ep-Zl1EQGmDexeY'
# 生成签名的API Key,可在 Settings 中查看
api_key = '$YOUR_API_KEY$'


# 请在这里填入要修改的模板变量参数!
params = {
'title': 'Hello, Edge',
}
# 对参数key进行排序
sorted_params = sorted(params.items())
# 对参数进行拼接,不对值进行 urlencode
search_params = '&'.join(f"{key}={value.replace('\"', '\\\"')}" for key, value in sorted_params)


# 待签名的数据
sign_data = f'{{"apiKey":"{api_key}","searchParams":"{search_params}"}}'
print(sign_data)
# 调用 md5 生成签名
sign = generate_md5(sign_data)
# 对 URL 参数的值进行 urlencode
encoded_search_params = '&'.join(f"{key}={urllib.parse.quote(value)}" for key, value in sorted_params)
# 构建最终的 URL
final_url = f'https://image.edgeone.site/{sign}/{user_id}/{template_id}.{format}?{encoded_search_params}'

print(final_url)
# 打印的示例URL: https://image.edgeone.site/c640ab6cb550eaf87fd13d7bb716370f/6b4afbd3d1834aa0a5537e5b02ddab3e/ep-Zl1EQGmDexeY.png