背景

基于ai實現企微側邊欄和工作臺快速問答小助，需要h5開發，因為流程不清楚摸索半天，所以記錄一下

一、網頁授權登錄

1. 配置步驟

1.1 設置可信域名

1. 登錄企業微信管理后臺

2. 進入"應用管理" > 選擇開發的具體應用 > “網頁授權及JS-SDK”

3. 配置h5展示頁面路徑，如有工作臺也需配置工作臺跳轉路徑

2.2 域名所有權驗證

1. 下載提供的校驗文件
2. 將文件放置在域名根目錄下（放前端項目public文件夾中）

• 例如：https://yourdomain.com/wwverify.txt

3. 點擊驗證按鈕，系統將自動檢查

2 網頁授權登錄

企業微信提供了OAuth的授權登錄方式，可以讓從企業微信終端打開的網頁獲取成員的身份信息，從而免去登錄的環節。

1. 構造授權鏈接：

https://open.weixin.qq.com/connect/oauth2/authorize?
appid=CORPID&
redirect_uri=ENCODE_URL&
response_type=code&
scope=snsapi_base|snsapi_privateinfo&
state=STATE&
agentid=AGENTID#wechat_redirect

2. 用戶授權后，跳轉到redirect_uri并帶上code參數，此uri一般為h5當前頁面

3. 后端通過code獲取用戶信息：

// 獲取access_token
GET https://qyapi.weixin.qq.com/cgi-bin/gettoken?
corpid=ID&corpsecret=SECRET// 獲取用戶信息
GET https://qyapi.weixin.qq.com/cgi-bin/user/getuserinfo?
access_token=ACCESS_TOKEN&code=CODE

二、JS-SDK接口調用

1. 配置步驟

1.1 設置可信域名

1. 登錄企業微信管理后臺
2. 進入"應用管理" > 選擇開發的具體應用 > “網頁授權及JS-SDK”

• 只需填寫根域名，如yourdomain.com
• 所有子域名自動獲得授權能力

3. 配置h5展示頁面路徑，如有工作臺也需配置工作臺跳轉路徑

1.2 域名所有權驗證

1. 下載提供的校驗文件
2. 將文件放置在域名根目錄下（放前端項目public文件夾中）

• 例如：https://yourdomain.com/wwverify.txt

3. 點擊驗證按鈕，系統將自動檢查
   

2 （JS-SDK）接口調用

企業微信JS-SDK是企業微信面向網頁開發者提供的基于企業微信內的網頁開發工具包

1前端項目安裝企微js-sdk依賴

npm install @wecom/jssdk

2簽名校驗

1. 獲取jsapi_ticket：(后端獲取后返回）

GET https://qyapi.weixin.qq.com/cgi-bin/get_jsapi_ticket?
access_token=ACCESS_TOKEN

2. 生成簽名：（所需使用企微接口需配置jsApiList）

const loadSignature = async (url: string) => {if (!signaturePromise) {signaturePromise = 服務端鑒權接口({ url }) // 只在第一次調用時執行}return signaturePromise}ww.register({corpId,agentId,jsApiList: ['getCurExternalContact'],getAgentConfigSignature: async (url) => {console.log('getAgentConfigSignature :>> ', url)const res = await loadSignature(url)const { agentSignature, nonceStr, timestamp } = res?.data ?? {}return { timestamp, nonceStr, signature: agentSignature }},onConfigSuccess: (res) => {console.log('onConfigSuccess :>> ', res)},onConfigFail: (res) => {console.log('onConfigFail :>> ', res)},onConfigComplete: (res) => {console.log('onConfigComplete', res)},onAgentConfigSuccess: (res) => {console.log('onAgentConfigSuccess :>> ', res)resolve(true)},onAgentConfigFail: (res) => {console.log('onAgentConfigFail :>> ', res)reject()},onAgentConfigComplete: (res) => {console.log('onAgentConfigComplete', res)},})

3. 本地調試獲取JSAPI_TICKET

本地可以使用npx wwutil ticket CORPID SECRET命令獲取jsapi_ticket

3 部分接口權限特殊配置

1. 獲取用戶信息接口權限配置，需配置客戶聯系人
   

三、 調試工具

• 企業微信提供的接口調試工具
• 使用開發者工具查看網絡請求項目中添加console