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

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

為什麼選擇 Nuxflare Auth？

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

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

專案結(jié)構(gòu)

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 憑證
• 用於發(fā)送電子郵件的重新發(fā)送 API 金鑰

入門

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

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

1. 建立並設(shè)定 API 令牌：

a.使用此連結(jié)建立具有所需權(quán)限的 Cloudflare API 令牌。
b.設(shè)定 CLOUDFLARE_API_TOKEN 環(huán)境變數(shù)：

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

1. 配置你的秘密：

   export CLOUDFLARE_API_TOKEN=GahXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1. 在 sst.config.ts 中設(shè)定你的 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. 開始本地開發(fā)：

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

1. 部署到生產(chǎn)環(huán)境：

   pnpm dev

客戶端應(yīng)用程式範例

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

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

   pnpm sst deploy --stage production

您應(yīng)該將客戶端指向已部署的驗證實例的端點：

```打字稿 [packages/example-client/app/utils/auth.ts]
const client = createClient({
clientID: "nuxt",
發(fā)行者：“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 建置的輕量級自託管驗證伺服器的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！