如何使用 Cloudflare Workers 进行基本身份验证

*神户缘西（神户三宫）

你好！
我是Beyond大阪事务所的拉面大王Hide。
这是我的第 13 篇文章。

上次，我写了有关设置允许您使用 AWS IAM 仅查看特定托管区域的策略！
设置方法比较简单，但是如果设置错误的话，可能会无法创建，或者最终会显示出不应该显示的部分。
如果您有兴趣，请查看，我们将以易于理解的方式解释如何设置它。

[AWS IAM] 仅允许在特定托管区域中查看的策略设置

 

 

概述

 

我想使用基本身份验证来限制访问。 。 。 。
我正在使用 Cloudflare，并且不想给源带来负载，因此
我想使用 Cloudflare 实现基本身份验证。 。 。 。
图片？但我该怎么办呢？

 

以上的问题你有想过吗？
通常，在实现基本身份验证时，您可能会使用 Apache、Nginx 等来实现。
尽管我使用 Cloudflare 来减少源端的负载，但我想知道是否可以使用 Cloudflare 对此做些什么，
但通过使用 Cloudflare Workers，我能够实现基本身份验证。
这非常方便，因为它在第一阶段不会对 Cloudflare 的源造成任何负载！
步骤非常简单，一起来尝试一下吧！ ！

 

 

必备知识

什么是 Cloudflare Workers？

Cloudflare 是世界上最大的 CDN 服务网络之一。 Cloudflare 的 CDN 服务用于加速世界各地的 Web 内容。
Cloudflare Workers 是 Cloudflare 开发的无服务器服务。

在 Cloudflare 网络全球超过 275 个数据中心进行全球部署时，无需配置或维护基础设施即可构建 Web 功能和应用程序。
关于语言，将使用JavaScript、TypeScript等来实现。
这是一项非常方便的服务，因为您可以在使用 Cloudflare 构建应用程序时使用 SSL、WAF、CDN 等。

 

 

什么是基本身份验证？

可以使用Apache、Nginx等中间件来实现访问限制。
您可以使用用户名和密码进行身份验证，当您希望仅限制某些用户的访问时可以使用该用户名和密码。

我们的工程师正在介绍如何使用Nginx实现基本认证，
如果您有兴趣，请看一下！

我尝试使用 Nginx 进行基本身份验证

 

 

 

 

设置步骤

*这假设 Cloudflare 初始设置和记录注册已完成。

① 点击首页 > 员工 > 概览

 

 

②输入任意子域名，点击【设置】

 

 

③选择价格方案

*由于这是一个演示，我们选择了免费，但请根据您的情况进行选择。Cloudflare
Workers 定价计划

 

 

 

④点击【创建服务】

 

 

 

⑤输入服务名称，点击【创建服务】

 

 

 

⑥点击【快速编辑】

 

 

 

 

⑦粘贴基本验证码，点击【保存并部署】

*请复制并粘贴基本身份验证代码
*编辑时，请参考
示例代码*您可以使用以下常量更改用户和密码。

常量 BASIC_USER = ''; 常量 BASIC_PASS = '';

・基本验证码

/** * 展示如何使用 HTTP Basic 模式限制访问 * @see https://developer.mozilla.org/en-US/docs/Web/HTTP/Authentication * @see https://tools.ietf。 org/html/rfc7617 * * 包含冒号（“:”）字符的用户 ID 无效，因为 * 用户密码字符串中的第一个冒号分隔用户和密码 */ const BASIC_USER = ''; ''; /** * 接收 HTTP 请求并回复响应 * @param {Request} 请求 * @returns {Promise<Response> } */ async function handleRequest(request) { const { protocol, pathname } = new URL(request.url); // 在基本身份验证的情况下，交换必须通过 HTTPS (TLS) 连接进行secure. if ('https:' !== 协议 || 'https' !== request.headers.get('x-forwarded-proto')) { throw new BadRequestException('请使用 Https 通信进行连接') ; // 验证时发送“Authorization”标头 if (request.headers.has('Authorization')) { // 授权失败时抛出异常。 pass); return fetch(request) } // 未经过身份验证 return new Response('您需要用户名和密码才能登录', { status: 401, headers: { // 提示用户输入凭据。 ' WWW-Authenticate ': 'Basicrealm="myscope", charset="UTF-8"', }, }); } /** * 验证失败时抛出异常。 * @throws {UnauthorizedException} */ function verifyCredentials(user, pass) { if (BASIC_USER !== user) { throw new UnauthorizedException('用户名或密码不正确'); } if (BASIC_PASS !== pass) { throw new UnauthorizedException('用户名或密码不正确'); } } /** * 解析 HTTP 基本授权值。 * @param {Request} request * @throws {BadRequestException} * @returns {{ user: string, pass: string }} */ function basicAuthentication(request) { const Authorization = request.headers.get('Authorization'); const [scheme, encoded] = Authorization.split(' '); // Authorization 标头必须以 Basic 开头，后跟space. if (!encoded || schema !== 'Basic') { throw new BadRequestException('Badauthentication header'); } // 解码 base64 值并执行 unicode 规范化。 ietf.org/doc/html/rfc7613#section-3.3.2 （和 #section-4.2.2） // @see https://dev.mozilla.org/docs/Web /JavaScript/Reference/Global_Objects/String/ Normalize const buffer = Uint8Array.from(atob(encoded), character => character.charCodeAt(0)); const demod = new TextDecoder().decode(buffer).normalize(); // 用户名和密码被分割第一个冒号。 //=> 示例： "username:password" const index = returned.indexOf(':'); // 用户和密码由第一个冒号分隔，并且不得包含控制字符。 https://tools.ietf.org/html/rfc5234#appendix-B.1 (=> "CTL = %x00-1F / %x7F") if (index === - 1 || /[\0-\ x1F\x7F]/.test(decoded)) { throw new BadRequestException('身份验证值无效。 '); } return { user: 解码.substring(0, 索引), 传递: 解码.substring(索引 + 1), }; } function UnauthorizedException(reason) { this.status = 401; ; this.reason = Reason; } function BadRequestException(reason) { this.status = '错误请求'; this.reason = Reason; } addEventListener('fetch', event => { event.respondWith( handleRequest(event.request).catch(err => { const message = err.reason || err.stack || '未知错误'; return new Response(message, { status: err.status || 500, statusText: err .statusText || null, headers: { 'Content-Type': 'text/plain;charset=UTF-8', // 默认情况下禁用缓存。 HTTP HEAD 请求的“Content-Length”标头：message.length, }) });

 

 

*将显示以下弹出窗口，因此单击[保存并部署]。

 

 

*如果您想检查操作情况，可以预览。

 

 

 

⑧ 在首页 > 已验证域名 > 工作人员路由中点击【添加路由】

 

 

 

⑨输入以下信息并点击【保存】

根：examle-test.com/*
*指定要为其设置基本身份验证的域 (FQDN)
*您还可以指定通配符
服务：basic-test
环境：produciton
*服务和环境已在步骤 7 中添加 您可以在代码屏幕上检查它

 

*保存完成后，将显示在列表中。

 

⑩操作确认

・登录画面

 

・登录后的内容画面

*基本身份验证对于指定域 (FQDN) 以外的域无效。

 

 

 

概括

它怎么样？
通过使用 Cloudflare Workers，即使在免费套餐中，我们也能够轻松实现基本身份验证！
通过使用此功能，您可以防止由于 Apache/Nginx 设置更改而导致的内容中断以及由于写入错误而导致的意外情况。
您还可以充分利用 Cloudflare，而不会给您的源带来任何负载。
如果您正在使用 Cloudflare 并希望实现基本身份验证，请参考此！