Nuxflare Auth：使用 Nuxt、Cloudflare 和 OpenAuth.js 建置的輕量級自託管驗證伺服器

Nuxflare Auth 是一個現代、輕量級、自架的身份驗證伺服器，旨在使向您的應用程式添加身份驗證變得輕而易舉。使用 Nuxt 3、Cloudflare Workers 和 OpenAuth.js 構建，它將您需要的所有內容捆綁在一個地方。

努克斯耀斑 / 授權

使用 Cloudflare、Nuxt 和 OpenAuth.js 建置的現代、輕量級、自架式驗證伺服器。

Nuxflare 授權

使用 Cloudflare、Nuxt 和 OpenAuth.js 建構的現代、輕量級、自架式驗證伺服器。

這是什麼？

Nuxflare Auth 讓您可以輕鬆地在應用程式中新增身份驗證。這是一個捆綁了您需要的一切的單一儲存庫：

• 使用 Nuxt 3 和 @nuxt/ui 建立的流暢的身份驗證 UI
• 在 Cloudflare Workers 上運行的後端身份驗證魔法
• 一個隨時可用的範例，以便您可以了解它們如何組合在一起

特點

• ？完整的身份驗證 UI 包括：
  • 基於程式碼的登入
  • 基於密碼的登入
  • 忘記密碼流程
  • 用戶註冊
• ？使用 GitHub 和 Google 進行 OAuth2 驗證（輕鬆新增更多提供者）
• ✉️ 使用重新發送（或使用任何其他提供者）的電子郵件
• ⚡ 快如閃電，由 Cloudflare 的邊緣網路提供支援

專案佈局

packages/
  ├── auth-frontend/   # auth UI components
  ├── emails/          # react email templates
  ├── example-client/  # example nuxt client
  └── functions/       # cloudflare workers

先決條件

開始之前，您需要：

• pnpm
• Cloudflare 帳戶
• 來自 Google 的 OAuth 憑證...

在 GitHub 上查看

為什麼選擇 Nuxflare Auth？

使用 Nuxt，已經有了很好的身份驗證模組，例如 nuxt-auth-utils 和 sidebase-auth。
那麼，Nuxflare Auth 有何不同？

• 解耦身份驗證： Nuxflare Auth 允許您與主應用程式分開部署身份驗證伺服器和身份驗證 UI（使用 Nuxt UI 建置）。 這意味著您可以輕鬆地重複使用您的身份驗證伺服器來處理多個客戶端應用程式（是否使用 Nuxt 建置）、外部 API、行動應用程式等。
• 鼓勵Monorepo 架構： 透過分割Nuxt 應用程式和身份驗證模組，Nuxflare Auth 將捆綁包大小保持最小，非常適合部署到Cloudflare Workers，它有嚴格的大小限制：免費方案3 MB，免費計劃10 MB付費計劃。

專案結構

packages/
  ├── auth-frontend/   # auth UI components
  ├── emails/          # react email templates
  ├── example-client/  # example nuxt client
  └── functions/       # cloudflare workers

部署 Nuxflare Auth

先決條件

• pnpm
• Cloudflare 帳戶
• 來自 Google 和 GitHub 的 OAuth 憑證
• 用於發送電子郵件的重新發送 API 金鑰

入門

1. 複製儲存庫並安裝相依性：

packages/
  ├── auth-frontend/   # auth UI components
  ├── emails/          # react email templates
  ├── example-client/  # example nuxt client
  └── functions/       # cloudflare workers

1. 建立並設定 API 令牌：

a.使用此連結建立具有所需權限的 Cloudflare API 令牌。
b.設定 CLOUDFLARE_API_TOKEN 環境變數：

   git clone https://github.com/nuxflare/auth nuxflare-auth
   cd nuxflare-auth
   pnpm install

1. 配置你的秘密：

   export CLOUDFLARE_API_TOKEN=GahXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1. 在 sst.config.ts 中設定你的 fromEmail：

   # OAuth stuff
   pnpm sst secret set GoogleClientID your_client_id
   pnpm sst secret set GoogleClientSecret your_client_secret
   pnpm sst secret set GithubClientID your_client_id
   pnpm sst secret set GithubClientSecret your_client_secret

   # For emails
   pnpm sst secret set ResendApiKey your_resend_api_key

1. 開始本地開發：

   async run() {
     const fromEmail = "hi@nuxflare.com";
     // ...
   }

1. 部署到生產環境：

   pnpm dev

客戶端應用程式範例

儲存庫包含一個簡單的範例客戶端應用程序，位於packages/example-client。

可組合項目的 API 與 nuxt-auth-utils 非常相似：

   pnpm sst deploy --stage production

您應該將客戶端指向已部署的驗證實例的端點：

```打字稿 [packages/example-client/app/utils/auth.ts]
const client = createClient({
clientID: "nuxt",
發行者：“https://authdemo.nuxflare.com”，// });

export const useSession = () => {
  const sessionState = useSessionState();
  const accessToken = useAccessTokenCookie();
  const refreshToken = useRefreshTokenCookie();
  const clear = () => {
    sessionState.value = {};
    accessToken.value = null;
    refreshToken.value = null;
  };
  return {
    loggedIn: computed(() => !!sessionState.value.user),
    user: computed(() => sessionState.value.user || null),
    session: sessionState,
    clear,
  };
};

以上是Nuxflare Auth：使用 Nuxt、Cloudflare 和 OpenAuth.js 建置的輕量級自託管驗證伺服器的詳細內容。更多資訊請關注PHP中文網其他相關文章！