7 登录认证

前言

核心包用的是 next-auth ，这个组件非常成熟 NextJs 也在用，默认集成 email 方式注册登录。

你可以自行加入三方登录，在模版中加入了 github 登录。

配置文件说明

.env 环境变量

AUTH_SECRET 是安全秘钥，AUTH_ORIGIN 认证基地址。

# nuxt-auth 配置

AUTH_SECRET="42b1aad5bac012e4f2f2102443e6e6d3a90c028ae15a304f231b07f53807254db52fb022b7be2e8af3b6e8a46074c4e3094f979d593a26affef2ca69a561f633"
AUTH_ORIGIN="http://localhost:3000"

AUTH_ORIGIN 上线后改成你的服务器绝对地址

nuxt.config.ts 定义了 auth 的模式和方法。

  auth: {
    isEnabled: true,

    // 在生产环境中，您必须设置完整的 URL，包括来源和路径。在开发环境中，您可以留空此项。
    baseURL:
      process.env.NODE_ENV === 'production' ? process.env.AUTH_ORIGIN : '',

    // 强迫您的服务器在所有请求上发送“加载中”的身份验证状态，从而触发客户端进行获取。
    // disableServerSideAuth: false,

    // 如果你禁用此功能，所有内容都将公开，你可以通过指定 definePageMeta({ auth: true }) 选择性地为某些页面启用保护
    // globalAppMiddleware: false,
    globalAppMiddleware: {
      isEnabled: true
    },

    provider: {
      type: 'authjs',
      trustHost: false,
      defaultProvider: 'credentials',
      addDefaultCallbackUrl: true
    }
    // session: {
    //   // 这个参数决定是否在浏览器窗口重新获得焦点时刷新会话。
    //   // 如果设置为 true，则当窗口获得焦点时会刷新会话。
    //   // 如果设置为 false，则不会在窗口获得焦点时刷新会话。
    //   enableRefreshOnWindowFocus: true,
    //   // 这个参数决定是否定期刷新会话(session)。
    //   // 如果设置为 false，表示关闭定期刷新功能。
    //   // 如果设置为 true，表示每隔 1 秒刷新一次会话。
    //   // 如果设置为一个数字 X，表示每隔 X 毫秒刷新一次会话。
    //   enableRefreshPeriodically: 5000
    // }
  },

这里有个了解就行，不用修改。

server/api/auth/[...].ts这个文件是验证身份的核心文件。

各种业务回调、验证实现、签名，知道就行。

配置 github 登录

进入页面 https://github.com/settings/developers

github setting oauth app

配置测试登录

本地 localhost 测试的时候，需要填写正确，否则调整不到页面。

localhost

配置正式登录

同样的注意线上地址回调不要写错。

github 登录线上配置

配置 client_id , client_secret

github oauth

.env 环境变量

# github 三方登录

GITHUB_CLIENT_ID=""
GITHUB_CLIENT_SECRET=""

server/api/auth/[...].ts 配置

  providers: [
    GithubProvider.default({
      clientId: process.env.GITHUB_CLIENT_ID,
      clientSecret: process.env.GITHUB_CLIENT_SECRET,
      httpOptions: {
        timeout: 1000 * 30 // 设置超时时间为 30 秒
      }
    }),

默认已经配置，无需添加。
github 验证有可能会超时，所以你可以设置的时间长些。我这里设置了 30秒。

end

6 数据库

配置 prisma、Supabase、postgres 数据库。

8 支付方式

配置 WxPay、PayPal、Stripe、Lantu 快速登录。