什么是 AppKey？

AppKey（应用程序密钥）是一个由服务提供商（Google Maps, 微信, 支付宝等）分配给你的唯一标识符。

appkey 个人网站地址
（图片来源网络，侵删）

你可以把它想象成你的身份证号码,当你向某个服务（比如地图服务）请求资源时，你需要告诉服务方：“我是谁”，而 AppKey 就是证明你身份的方式。

主要作用：

  1. 身份认证：服务提供商通过 AppKey 确认你的应用是经过授权的合法用户。
  2. 访问控制：没有正确的 AppKey，服务提供商可能会拒绝你的请求，防止未授权的使用。
  3. 配额管理：服务提供商可以根据你的 AppKey 来限制你使用其 API 的频率或次数（每天最多调用 10,000 次），这有助于防止滥用，并确保服务的稳定性。
  4. 监控和计费：服务提供商可以监控每个 AppKey 的使用情况，如果服务是收费的，就根据使用量进行计费。

如何获取 AppKey？

你通常需要去提供该服务的官方网站注册一个开发者账号,然后创建一个“应用”（App）或“项目”（Project），系统就会自动为你生成一个 AppKey（通常还会附带一个 AppSecret 或其他密钥）。

appkey 个人网站地址
（图片来源网络，侵删）

什么是个人网站地址？

个人网站地址（Personal Website URL）就是你的网站在互联网上的唯一地址，也就是我们常说的 域名。

  • https://www.my-cool-website.com
  • https://zhangsan.github.io
  • https://blog.li-wang.com

这个地址是用户和浏览器用来访问你网站的入口。

AppKey 和个人网站地址 的关系

核心关系：安全绑定与授权

AppKey 是用来证明你的个人网站有权限使用某个第三方服务的“钥匙”，而个人网站地址则是这把钥匙被“授权”使用的“地点”。

appkey 个人网站地址
（图片来源网络，侵删）

工作流程如下：

  1. 申请钥匙：你去地图服务商（如高德地图）的开发者平台，注册并创建一个应用。
  2. 提供地点：在创建应用时，平台会要求你填写一个或多个“授权域名”（Authorized Domains），这时，你就需要填上你的个人网站地址，www.my-cool-website.com。
  3. 获得钥匙：平台审核后，会给你一把“钥匙”，也就是你的 AppKey，这把钥匙已经被系统设定为只在你填写的授权域名（个人网站地址）下有效。
  4. 使用钥匙：在你的个人网站代码中，当你需要调用地图服务时，你必须在请求中带上这把 AppKey。
  5. 验证地点：地图服务收到你的请求后，会做两件事：
    • 检查你提供的 AppKey 是否有效。
    • 检查你的请求来源（也就是你的网站域名）是否和这个 AppKey 授权的域名列表匹配。

只有当这两项都通过时,服务才会正常响应你，如果有人盗用了你的 AppKey，但他在自己的网站上使用，由于域名不匹配，请求会被拒绝。

实际应用示例：为你的个人网站添加高德地图

假设你想在你的个人网站 https://www.my-portfolio.com 上显示一个高德地图。

步骤 1：注册高德开发者账号并获取 AppKey

  1. 访问 高德开放平台。
  2. 使用你的个人账号登录。
  3. 进入“控制台” -> “创建新应用”。
  4. 填写应用名称,我的个人作品集网站”。
  5. 在“应用类型”中选择“Web 端 (JS API)”。
  6. 关键一步：在“Web 端 (JS API)”的设置中，找到“域名白名单”或“Referer 安全域名”。
  7. 在输入框中,填入你的个人网站地址：www.my-portfolio.com。
    • 注意：请确保域名前没有 http:// 或 https://，也不要带最后的斜杠 。
  8. 保存设置,高德平台会自动生成一个 Web 端 (JS API) 的 AppKey。

步骤 2：在你的网站代码中使用 AppKey

你需要在个人网站的 HTML 文件中引入高德地图的 JavaScript API，并附上你刚刚获取的 AppKey。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">我的个人网站</title>
    <!-- 将 'YOUR_AMAP_APPKEY' 替换成你自己的真实 AppKey -->
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=2.0&key=YOUR_AMAP_APPKEY"></script>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <div id="container" style="width: 100%; height: 500px;"></div>
    <script>
        // 确保你的网站域名已经在高德平台授权，否则地图将无法显示
        var map = new AMap.Map('container', {
            center: [116.397428, 39.90923], // 初始中心点坐标（北京天安门）
            zoom: 13 // 初始缩放级别
        });
    </script>
</body>
</html>

将上面的代码部署到你的服务器后，当用户访问 https://www.my-portfolio.com 时，浏览器会加载这段代码，高德地图服务会检查：

  1. 请求来源的域名是 www.my-portfolio.com。
  2. 这个域名是否在 YOUR_AMAP_APPKEY 的授权列表中。

如果一切正常,地图就会成功显示，如果有人把这段代码复制到 https://evil-site.com 上，地图将无法加载，因为 evil-site.com 不在授权列表中。

概念 作用 关系
AppKey 一把钥匙，用于向第三方服务证明你的应用身份和授权。 AppKey 是被授权的主体，它被绑定到了一个或多个个人网站地址上。
个人网站地址 你的网站在互联网上的门牌号（域名）。 个人网站地址是 AppKey 这把钥匙被允许使用的地点。

一句话总结： 你需要用你的个人网站地址去向第三方服务申请一个AppKey，然后把这个AppKey 嵌入到你的网站代码中，才能合法地使用该服务，这是一种安全机制，确保了 API 调用的可控性和安全性。