到目前为止，这在 AWS 上变得相对简单。这基本上是需要做的三件事：
- 创建 CloudFront 函数以将基本身份验证添加到请求中。
- 在几个地方正确配置 CloudFront 分配的来源。
- 激活 CloudFront 功能。
就是这样，没有特别的花里胡哨。这是我所做的：
首先，转到 CloudFront，然后单击左侧的函数，使用您选择的名称创建一个新函数（无需区域等），然后添加以下代码作为函数的代码：
function handler(event) {
var user = "myuser";
var pass = "mypassword";
function encodeToBase64(str) {
var chars =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
for (
// initialize result and counter
var block, charCode, idx = 0, map = chars, output = "";
// if the next str index does not exist:
// change the mapping table to "="
// check if d has no fractional digits
str.charAt(idx | 0) || ((map = "="), idx % 1);
// "8 - idx % 1 * 8" generates the sequence 2, 4, 6, 8
output += map.charAt(63 & (block >> (8 - (idx % 1) * 8)))
) {
charCode = str.charCodeAt((idx += 3 / 4));
if (charCode > 0xff) {
throw new InvalidCharacterError("'btoa' failed: The string to be encoded contains characters outside of the Latin1 range."
);
}
block = (block << 8) | charCode;
}
return output;
}
var requiredBasicAuth = "Basic " + encodeToBase64(`${user}:${pass}`);
var match = false;
if (event.request.headers.authorization) {
if (event.request.headers.authorization.value === requiredBasicAuth) {
match = true;
}
}
if (!match) {
return {
statusCode: 401,
statusDescription: "Unauthorized",
headers: {
"www-authenticate": { value: "Basic" },
},
};
}
return event.request;
}
然后您可以直接在 UI 上进行测试并假设它可以正常工作并假设您已经自定义了用户名和密码，然后发布函数。
请注意，我在 Internet 上找到了上述函数的各个部分，因此这不是我自己的代码（除了拼凑）。我希望我仍然能找到来源，所以我可以在这里引用它们，但我再也找不到它们了。归功于创作者！ :-)
接下来，打开您的 CloudFront 分配并执行以下操作：
-
确保源中的 S3 存储桶配置为 REST 端点而不是网站端点，即它必须以 .s3.amazonaws.com 结尾，并且主机名中没有单词 website。
-
同样在 Origin 设置中，在“S3 存储桶访问”下，选择“是使用 OAI（存储桶只能限制对 CloudFront 的访问）”。在下面的设置中单击“创建 OAI”以创建一个新的 OAI（除非您有一个现有的并且知道您在做什么）。并选择“是，更新存储桶策略”以允许 AWS 将必要的权限添加到您的 OAI。
-
最后，打开 CloudFront 分配的行为并滚动到底部。在“函数关联”下，对于“查看器请求”，选择“CloudFront 函数”并选择您新创建的 CloudFront 函数。保存您的更改。
应该就是这样。运气好的话只需几分钟（我知道实际上更多），尤其是在完成所有设置后不会增加额外的复杂性。