签名 URL
操作场景
签名 URL 是指基于图片模板动态修改图片元素变量后生成签名 URL 链接并作为分享使用,本文将介绍如何生成签名 URL 链接。
前提条件
1. 开通 Open Edge
2. 获取图片渲染 API 密钥
获取生成签名 URL 所需的安全凭证,即 API Key,步骤如下:
打开图片模板后,切换到 Settings,查看 API Key 一项。
注意:
API Key 用于生成签名链接及 API 调用,并被用来识别账号的唯一性,请保管好您的 API Key 避免泄漏。
示例代码
为了方便用户开发,图片渲染提供多语言 Demo,详情请参见下方:
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 mainimport ("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 hashlibimport 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())# 对参数进行拼接,不对值进行 urlencodesearch_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 参数的值进行 urlencodeencoded_search_params = '&'.join(f"{key}={urllib.parse.quote(value)}" for key, value in sorted_params)# 构建最终的 URLfinal_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