JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2
  • Score
    100M100P100Q34651F
  • License MIC

`next-auth-oauth` 是一个基于 Next.js 和 NextAuth 的增强插件,用于简化和增强授权登录的处理。该插件提供了丰富的功能,包括第三方登录绑定、账户管理等,使得授权流程更加高效和灵活。

Package Exports

  • next-auth-oauth
  • next-auth-oauth/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (next-auth-oauth) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🚀 NextAuth OAuth增强

next-auth-oauth

next-auth-oauth 是一个基于 Next.js 和 NextAuth 的增强插件,旨在简化和增强授权登录的处理 🔐。该插件提供了丰富的功能,包括第三方登录绑定、账户管理等,让授权流程更加高效和灵活 💪。

特性 ✨

  • 增强的 signIn 登录函数: 自动处理绑定场景和登录验证,将验证逻辑转发给 UserService 🔄
  • 增加 Session: 自动处理 jwt/database 下不同情况的 user.id 填充 🗃️
  • 多种授权操作: 支持登录、登出、注册、解绑第三方账号等 🔑
  • 支持多种第三方登录提供商: 如 GitHub 和 WeChat 🌐
  • 自定义绑定授权页面 UI: 配置 bindPage 支持自定义授权绑定页面 🎨
  • 国产化第三方登录集成: 支持 微信公众号登录 🐉、微信网页登录 🌐、Gitee 登录 📚

使用方法 🛠️

  1. 实现 IUserService 接口: 用于处理用户相关操作 👤

  2. 配置授权适配器: 根据需求设置授权适配器 🔧

  3. 导出如下字段:

    • signIn: 登录函数,增强后可以自动判断绑定场景/登录验证 🔑
    • signOut: 登出函数 🚪
    • auth: 授权函数 🛡️
    • listAccount: 获得绑定的第三方数据 📊
    • unBindOauthAccountInfo: 解绑第三方账号 🔓
    • handlers: 授权函数的中间件 ⚙️
    • regist: 账户注册函数 📝
    • oauthProviders: 列出第三方登录提供商 🌐

快速开始 🚀

安装插件:

在你的 Next.js 项目中,首先需要安装 next-auth-oauth 及其相关依赖:

npm install next-auth-oauth @auth/prisma-adapter next-auth@beta

或者使用 Yarn:

yarn add next-auth-oauth @auth/prisma-adapter next-auth@beta

配置授权适配器

首先,配置你的授权适配器。下面的代码示例展示了如何将 PrismaAdapternext-auth-oauth 配合使用:

import { PrismaAdapter } from '@next-auth/prisma-adapter';
import { AdavanceNextAuth } from 'next-auth-oauth';
import { GitHub, Wechat } from 'next-auth/providers';
import { UserService } from './userService'; // 实现 IUserService 接口的服务类

/**
 * 授权适配器
 */
export const authAdapter = PrismaAdapter(prisma);

/**
 * 导出如下字段:
 * signIn: 登录函数,增强后可以自动判断绑定场景/登录查经
 * signOut: 登出函数
 * auth: 授权函数
 * listAccount: 获得绑定的第三方数据
 * unBindOauthAccountInfo: 解绑第三方账号
 * handlers: 授权函数的中间件
 * regist: 账户注册函数
 * oauthProviders: 列出第三方登录提供商
 */
export const { 
  signIn, 
  signOut,
  listAccount, 
  unBindOauthAccountInfo,
  auth, 
  handlers,
  regist,
  oauthProviders 
} = AdavanceNextAuth({
  ...AuthConfig,
  providers: [
    GitHub,
    Wechat, 
  ],
  /* 自定义绑定授权页面 */
  bindPage: "/auth/bind",
  adapter: authAdapter, 
  userService: new UserService()
});

实现 IUserService 接口

UserService 是一个需要实现 IUserService 接口的服务类,用于处理用户相关操作。以下是接口定义:

export interface IUserService {
  /**
   * 实现登录
   * @param username  账号/邮箱/密码
   * @param password  密码/验证码
   * @param type  登录类型,可以是 password 或 mobile
   */
  login(
    username: string,
    password: string,
    type?: "password" | "mobile"
  ): Promise<DBAdapterUser>;

  /**
   * 注册账号
   * @param user 
   */
  registUser(user: {
    username: string;
    password: string;
    /**
     * 表单提交的数据,比如:
     * @param nickname:string, // 昵称
     * @param email:string, // 邮箱
     * @param mobile:string, // 手机
     */
    formData: Record<string, string>;
    /* 支持其他参数 */
  }): Promise<DBAdapterUser>;

  /**
   * 绑定的第三方授权信息
   * @param userId 
   */
  listAccount(userId: string): Promise<Array<{
    type: string;
    id: string;
    provider: string;
    providerAccountId: string;
  }>>;
}

示例

你可以在任何服务端组件/ServerAction中通过以下代码来实现用户登录和绑定第三方账号:


export default function UserProfilePage(){
    // 获得账户信息
    const session = await auth() 
    // 获得绑定信息
    const bindListAccount = await listAccount()

    return <div>
    {JSON.stringify(session)}
    {JSON.stringify(bindListAccount)}
    </div>
}
// 用户登录示例
signIn('github', { callbackUrl: '/' }).then(() => {
  console.log('登录成功');
});

// 用户登出示例
signOut().then(() => {
  console.log('已登出');
});

// 列出绑定的第三方账号,自动判断授权信息
listAccount().then(accounts => {
  console.log('绑定的第三方账号:', accounts);
});

// 解绑第三方账号
unBindOauthAccountInfo().then(() => {
  console.log('解绑成功');
});

案例: 打造基于nextjsprismanext-auth-oauth的完整授权系统

登录

账户登录绑定

贡献

欢迎任何形式的贡献!如果你发现了问题或有改进建议,请提交问题报告或拉取请求。

许可证

该项目采用 MIT 许可证 进行授权。


如需更多信息,请参阅 NextAuth 官方文档 以了解如何集成授权功能。