diff --git a/apps/docs/wechatmp-captcha.md b/apps/docs/wechatmp-captcha.md index ebe3543..ada52c3 100644 --- a/apps/docs/wechatmp-captcha.md +++ b/apps/docs/wechatmp-captcha.md @@ -2,8 +2,62 @@ outline: deep --- -# 使用微信公众号-验证码登录 +# 使用微信公众号-验证码登录/场景二维码登录 -本教程将介绍如何使用微信公众号登录 NextAuth.js 应用。 +#### 1. 配置环境变量 -# TODO +```bash +# 微信appid +AUTH_WECHATMP_APPID= +# 微信appsecret +AUTH_WECHATMP_APPSECRET= +# 微信回调callback地址 +AUTH_WECHATMP_TOKEN= +# 微信公众号校验类型(QRCODE 认证服务号可用| MESSAGE 任何号可用) +AUTH_WECHATMP_CHECKTYPE= +# 微信公众号消息加解密密钥 +AUTH_WECHATMP_AESKEY= +# 微信公众号回调CALLBACK地址 +AUTH_WECHATMP_ENDPOINT= +# 微信公众号二维码图片地址(MESSAGE模式必须填写) +AUTH_WECHATMP_QRCODE_IMAGE_URL= + +``` + +### 2. 实例化并配置到`auth.ts`文件中 + +```typescript +import Wehcatmp from '@next-auth-oauth/wechatmp' +import { WechatMpApi } from 'wechatmp-kit' + +export const wechatMpProvder = Wehcatmp({ + /** + * WechatMpApi instance + */ + wechatMpApi: new WechatMpApi({ + appId: process.env.AUTH_WECHATMP_APPID!, + appSecret: process.env.AUTH_WECHATMP_APPSECRET!, + }), + captchaManager, +}) +``` + +```typescript + providers: [Gitee, Github, wechatMpProvder], + +``` + +#### 3. 配合 `AUTH_WECHATMP_ENDPOINT` 创建回调路由 + +比如你配置 `AUTH_WECHATMP_ENDPOINT='http://localhost:3000/api/auth/wechatmp'` + +那么你需要在你的项目中创建路由 `/api/auth/wechatmp/route.ts` 用来接收微信公众号的回调数据。 + +```typescript +import { wechatMpProvder } from '@/auth' +export const { GET, POST } = wechatMpProvder +``` + +#### 4. 配置微信公众号授权登录 + +将TOKEN/AES/AUTH_WECHATMP_ENDPOINT 填写到微信公众号后台上 diff --git a/apps/docs/wechatmp-qrcode.md b/apps/docs/wechatmp-qrcode.md index 9a84a91..ada52c3 100644 --- a/apps/docs/wechatmp-qrcode.md +++ b/apps/docs/wechatmp-qrcode.md @@ -2,8 +2,62 @@ outline: deep --- -# 使用微信公众号-场景二维码登录 +# 使用微信公众号-验证码登录/场景二维码登录 -本教程将介绍如何使用微信公众号登录 NextAuth.js 应用。 +#### 1. 配置环境变量 -# TODO +```bash +# 微信appid +AUTH_WECHATMP_APPID= +# 微信appsecret +AUTH_WECHATMP_APPSECRET= +# 微信回调callback地址 +AUTH_WECHATMP_TOKEN= +# 微信公众号校验类型(QRCODE 认证服务号可用| MESSAGE 任何号可用) +AUTH_WECHATMP_CHECKTYPE= +# 微信公众号消息加解密密钥 +AUTH_WECHATMP_AESKEY= +# 微信公众号回调CALLBACK地址 +AUTH_WECHATMP_ENDPOINT= +# 微信公众号二维码图片地址(MESSAGE模式必须填写) +AUTH_WECHATMP_QRCODE_IMAGE_URL= + +``` + +### 2. 实例化并配置到`auth.ts`文件中 + +```typescript +import Wehcatmp from '@next-auth-oauth/wechatmp' +import { WechatMpApi } from 'wechatmp-kit' + +export const wechatMpProvder = Wehcatmp({ + /** + * WechatMpApi instance + */ + wechatMpApi: new WechatMpApi({ + appId: process.env.AUTH_WECHATMP_APPID!, + appSecret: process.env.AUTH_WECHATMP_APPSECRET!, + }), + captchaManager, +}) +``` + +```typescript + providers: [Gitee, Github, wechatMpProvder], + +``` + +#### 3. 配合 `AUTH_WECHATMP_ENDPOINT` 创建回调路由 + +比如你配置 `AUTH_WECHATMP_ENDPOINT='http://localhost:3000/api/auth/wechatmp'` + +那么你需要在你的项目中创建路由 `/api/auth/wechatmp/route.ts` 用来接收微信公众号的回调数据。 + +```typescript +import { wechatMpProvder } from '@/auth' +export const { GET, POST } = wechatMpProvder +``` + +#### 4. 配置微信公众号授权登录 + +将TOKEN/AES/AUTH_WECHATMP_ENDPOINT 填写到微信公众号后台上 diff --git a/packages/wechatmp/README.MD b/packages/wechatmp/README.MD index 2cbaf4c..2943b9c 100644 --- a/packages/wechatmp/README.MD +++ b/packages/wechatmp/README.MD @@ -25,6 +25,9 @@ AUTH_WECHATMP_QRCODE_IMAGE_URL= ### 2. 实例化并配置到`auth.ts`文件中 ```typescript +import Wehcatmp from '@next-auth-oauth/wechatmp' +import { WechatMpApi } from 'wechatmp-kit' + export const wechatMpProvder = Wehcatmp({ /** * WechatMpApi instance diff --git a/packages/wechatmp/package.json b/packages/wechatmp/package.json index 66b5dde..4a2f055 100644 --- a/packages/wechatmp/package.json +++ b/packages/wechatmp/package.json @@ -1,6 +1,6 @@ { "name": "@next-auth-oauth/wechatmp", - "version": "0.1.1", + "version": "0.1.2", "description": "基于Auth.js的微信公众号验证码登录、二维码扫描登录插件", "main": "dist/index.js", "types": "dist/index.d.ts", @@ -43,4 +43,4 @@ "access": "public", "registry": "https://registry.npmjs.org" } -} \ No newline at end of file +}