透過 100+ 個訣竅學習 Nuxt!

nuxt-fortify
nuxt-fortify

在 Nuxt 中使用 Laravel fortify 和 sanctum

🎉 Nuxt Laravel Fortify 和 Sanctum 模組

npm versionnpm downloadsLicenseNuxt

此 Nuxt 模組以 SSR 友善的方式將 Nuxt 與 Laravel Fortify 和 Sanctum 無縫整合,提供豐富的身份驗證功能。透過此模組,您可以利用 Laravel Fortify 的功能,並執行 API Token 和 SPA cookie 基礎的身份驗證。

🚀 功能

  • 註冊 📋
  • 重設密碼 🔄
  • 電子郵件驗證 📧
  • 更新個人資料 ✏️
  • 更新密碼 🔐
  • 雙因素驗證 🔒

🛠️ 安裝和設定

💡注意:您需要在後端 Laravel 應用程式中安裝和設定 Laravel FortifyLaravel Sanctumfortify-sanctum 套件。fortify-sanctum 套件可輕鬆將 Laravel Fortify 的身份驗證功能與 Laravel Sanctum 整合。


nuxt-fortify 模組新增至您的 nuxt 專案

npx nuxi@latest module add nuxt-fortify

💻 Nuxt 設定

透過安裝此模組並在 nuxt.config.js 中設定,將其新增至您的 Nuxt 專案。

// nuxt.config.js
export default {
  modules: [
    'nuxt-fortify',
  ],
  nuxtFortify: {
    baseUrl: 'https://127.0.0.1:3000/api',
    origin: 'https://127.0.0.1:3000',
    authMode: 'cookie',
    authHome: '/dashboard',
    endpoints: {
      csrf: '/sanctum/csrf-cookie',
      user: '/user',
      // other endpoints...
    },
    features: {
        registration: true,
        resetPasswords: true,
        twoFactorAuthentication: true,
      // other features...
    }
    // other configurations...
  }
}

📜 設定

資料類型預設值必填
baseUrl字串https://127.0.0.1:3000/api
authMode字串cookie
loginRoute端點/login
authHome端點/home
cookieKey字串XSRF-TOKEN
cookieHeader字串X-XSRF-TOKEN
tokenStorageKey字串API-TOKEN
endpoints.csrf端點/sanctum/csrf-cookie
endpoints.login端點/login
endpoints.logout端點/logout
endpoints.user端點/user
endpoints.tfa.enable端點/user/two-factor-authentication
endpoints.tfa.disable端點/user/two-factor-authentication
endpoints.tfa.code端點/user/two-factor-qr-code
endpoints.tfa.confirm端點/user/confirmed-two-factor-authentication
endpoints.tfa.recoveryCode端點/user/two-factor-recovery-codes
endpoints.tfa.challenge端點/two-factor-challenge
endpoints.register端點/register
endpoints.resetPassword端點/forgot-password
endpoints.updatePassword端點/reset-password
endpoints.confirmPassword端點/user/confirm-password
endpoints.resendEmailVerificationLink端點/email/verification-notification
intendedRedirect布林值true
features.registration布林值true
features.resetPasswords布林值true
features.emailVerification布林值true
features.updateProfileInformation布林值true
features.updatePasswords布林值true
features.twoFactorAuthentication布林值true
tfaRoute端點/two-factor-authentication
logLevel數字1
origin字串https://127.0.0.1:3000

🌐 端點設定

端點鍵路徑請求方法
csrf/sanctum/csrf-cookiePOST
login/loginPOST
logout/logoutPOST
user/userPOST
tfa.enable/user/two-factor-authenticationPOST
tfa.disable/user/two-factor-authenticationDELETE
tfa.code/user/two-factor-qr-codeGET
tfa.confirm/user/confirmed-two-factor-authenticationPOST
tfa.recoveryCode/user/two-factor-recovery-codesGET
tfa.challenge/two-factor-challengePOST
register/registerPOST
resetPassword/forgot-passwordPOST
updatePassword/reset-passwordPOST
confirmPassword/user/confirm-passwordPOST
resendEmailVerificationLink/email/verification-notificationPOST

依照這些步驟和設定,您將擁有一個與 Laravel Fortify 和 Sanctum 完全整合的 Nuxt 應用程式,提供強大的身份驗證解決方案。🚀

🤝 貢獻

我們歡迎您貢獻以增強此模組。以下是貢獻的步驟

  1. Fork 儲存庫:在 GitHub 上建立此儲存庫的 fork。
  2. Clone 您的 Fork:將您 fork 的儲存庫 clone 到您的本機電腦。
    git clone https://github.com/dev-charles15531/nuxt-forify.git
    cd nuxt-fortify
    
  3. 建立分支:為您的功能或錯誤修正建立一個新分支。
    git checkout -b feature-or-bugfix-name
    
  4. 進行變更:實作您的功能或錯誤修正。請確保您的程式碼遵循專案的程式碼標準並通過所有測試。
  5. 提交變更:以清楚簡潔的提交訊息提交您的變更。
    git add .
    git commit -m "Description of the feature or fix"
    
  6. Push 到您的 Fork:將您的變更 push 到您 fork 的儲存庫。
    git push origin feature-or-bugfix-name
    
  7. 開啟 Pull Request:開啟一個指向主要儲存庫的 pull request。請清楚描述您的變更以及它們解決的問題或功能。

📝 指導方針

  • 遵循專案中使用的程式碼風格。
  • 撰寫清楚簡潔的提交訊息。
  • 確保您的程式碼通過所有測試且不會引入新問題。
  • 如果您的變更會影響模組的使用或設定方式,請更新文件。

📧 聯絡方式

如果您有任何問題或需要協助,請隨時開啟一個 issue 或聯絡此儲存庫的維護者。

感謝您的貢獻!您的努力受到高度讚賞。 🙌