Cloudflare Workers 上使用 Auth0 的 SPA 的# API 身份验证

云O生

144人浏览 · 2022-08-15 03:05:35

云O生 · 2022-08-15 03:05:35 发布

TL;GitHub 上的 DR 代码

Cloudflare 允许我们的前端开发人员立即构建 API。它们将被边缘部署,不需要额外的 API 网关!正如我在之前的一篇文章](https://dev.to/fllstck/cloudflare-workers-introduction-14mo)中已经写过[一样,它建立在 Web 技术之上,你从浏览器中知道:JavaScript 和 Service Worker。

这是福也是祸。一方面,我们可以使用我们从浏览器中知道的 API;另一方面,一些 Node.js 包在这里不起作用,因为缺少 API。

这就是为什么我写了这个方法。

先决条件

您需要注册Cloudflare和Auth0。他们都有一个慷慨的免费计划,所以不要害怕!

您还需要安装了 Node.js 的 Linux 或 macOS 系统。

克隆 GitHub 存储库

fllstck/spa-api-auth

在 Cloudflare Workers 上使用 Auth0 的 SPA 的# API 身份验证

此示例说明了托管在 Cloudflare 工作人员上的 API 的 API 身份验证。

更多细节可以在这篇文章中找到。

先决条件

Cloudflare 帐户
Auth0 帐号

为您的workers.dev子域配置的* Auth0 SPA应用程序

*https://spa-api-auth.<YOUR_WORKERS_SUBDOMAIN>.workers.dev/index.html

设置和部署

请在部署前将您的 Cloudflare 和 Auth0 帐户详细信息添加到credentials.json。

$ npm i
$ npm start

查看

该示例可以在您的 workers.dev 子域上查看。

https://spa-api-auth.<YOUR_WORKERS_SUBDOMAIN>.workers.dev/index.html

在 GitHub 上查看

该存储库包含一个credentials.json,您需要在其中添加您的 Auth0 和 Cloudflare 帐户详细信息,以及一个setup.js,它将您的凭据散布到您需要它们的文件中。您可以查看tmp.*文件以检查您的项目以后需要哪些凭据。

CloudflareapiKey可以作为全局 API 密钥在您的 Cloudflare 配置文件上找到

CloudflareaccountId可以在Cloudflare 仪表板中找到。您必须单击“管理工人”才能访问它。

Cloudflareemail是您注册 Cloudflare 时使用的电子邮件地址。

对于 Auth0 凭据,您需要先创建一个“Auth0 应用程序”。

创建 Auth0 应用程序

在Auth0 Dashboard上创建一个“SPA 应用程序”。为此目的,右上角有一个橙色的大按钮。

应用名称在这里不是必需的。重要的是创建应用程序后将显示在设置顶部的“域”和“客户端 ID”。这些是credentials.json所需的最后两个值。

接下来,更新应用程序设置。

您必须将 Cloudflare workers.dev 子域和 URL 添加到index.html,以便 Auth0 知道它应该使用哪些 CORS 标头以及登录后将用户重定向到哪里。

应用程序登录 URI

*https://spa-api-auth.<CF_ACCOUNT_NAME>.workers.dev/index.html

允许的回调 URL

*https://spa-api-auth.<CF_ACCOUNT_NAME>.workers.dev/index.html

允许的注销 URL

*https://spa-api-auth.<CF_ACCOUNT_NAME>.workers.dev/index.html

允许的 Web 来源

*https://spa-api-auth.<CF_ACCOUNT_NAME>.workers.dev

允许的来源 (CORS)

*https://spa-api-auth.<CF_ACCOUNT_NAME>.workers.dev

初始化和部署

现在您已经在“云”方面设置了所有内容并将其链接到您的代码库,您已准备好部署!

运行以下命令:

$ npm i
$ npm start

进入全屏模式退出全屏模式

这将做三件事:

1.将Cloudflare的Wrangler CLI本地安装到npm项目中

2.运行将设置所有凭据的setup.js

将生成的index.js发布到 Cloudflare Workers workers.dev 域

查看SPA

SPA 将通过 Cloudflare Worker 提供服务,并可通过以下 URL 访问:

https://spa-api-auth.<CF_ACCOUNT_NAME>.workers.dev/index.html

进入全屏模式退出全屏模式

只需使用您的 Cloudflare 帐户而不是占位符即可。

有趣的代码

我挣扎的代码:D

Cloudflare 凭证

Wrangler CLI 使用环境变量,因此您可以在运行之前设置它们。我用一个shell脚本做到了这一点。

#!/bin/bash
export CF_API_KEY=%CF_API_KEY%
export CF_EMAIL=%CF_EMAIL%

进入全屏模式退出全屏模式

注意:您必须使用source ./setkeyenv.sh运行它;否则,当你的 shell 中运行下一个程序时,这些变量就会消失。

使用 Cloudflare Workers 提供 HTML

我在这里没有使用 Cloudflare 的托管产品 Workers Sites。相反,我将 HTML 文件集成为字符串。这也可以用于其他文件,如 CSS、图像和 JavaScript。

if (request.url.includes("/index.html"))
  return new Response(html, {
    headers: { "Content-Type": "text/html" }
  });

进入全屏模式退出全屏模式

注意:这仅适用于字符串不太大的情况,并且您必须设置 Content-Type 标头;否则,浏览器将无法识别 HTML。

从 Auth0 的锁定小部件获取 JWT

当我第一次运行 Lock 小部件时,它会返回一个称为“不透明令牌”的东西,而不是 JWT。我必须为其提供以下配置才能获得 JWT 令牌。身份验证发生后,它将存储在authResult.idToken中。

const audience = location.protocol +
  "//" + location.hostname + "/api";
const lockWidget = new Auth0Lock(
  "%AUTH0_CLIENT_ID%",
  "%AUTH0_DOMAIN%", {
    auth: {
      responseType: "id_token",
      params: { scope: "openid", audience },
    },
  })

进入全屏模式退出全屏模式

设置正确的 HTTP 标头

自从我创建了我的 API,我可以随意使用我喜欢的任何标题字段,但我选择Authorization标题字段,因为它是标准的。

fetch("/api/private", {
  headers: { Authorization: "Bearer " + idToken }
})

进入全屏模式退出全屏模式

从 Auth0 获取正确的公钥

Auth0 为您托管当前密钥,因此您必须在验证它们之前获取它们。

您从他们的/.well-known/jwks.json端点获取密钥列表,并且必须找到与您的 JWT 对应的密钥。

密钥 ID 或kid位于 JWT 标头中,因此您必须从那里提取它并使用它来查找正确的密钥。

然后您必须使用 WebCrypto API 将该密钥转换为公钥。

const [rawHeader] = request.headers
    .get("Authorization")
    .substring(6)
    .trim()
    .split(".");
const { kid } = JSON.parse(atob(rawHeader));
const request = await fetch(
  "https://%AUTH0_DOMAIN%/.well-known/jwks.json"
);
const { keys } = await request.json();
const jwk = keys.find((key) => key.kid === kid);
const publicKey = crypto.subtle.importKey(
  "jwk",
  jwk,
  { name: "RSASSA-PKCS1-v1_5", hash: "SHA-256" },
  false,
  ["verify"]
);

进入全屏模式退出全屏模式