docs: 增加配套文档

liuhuapiaoyuan · Nov 18, 2024 · 370267b · 370267b
1 parent ef56344
commit 370267b
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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"
   }
-}
+}