當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

企业微信H5_网页jssdk调用 agentconfig选人选照片等案例演示

發布時間：2024/9/27 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了企业微信H5_网页jssdk调用 agentconfig选人选照片等案例演示小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

文章目錄

- - - - 一、驗證域名歸屬校驗
      - 1. 閱讀文檔
        2. 配置公網域名
        3. 登錄企業微信管控臺
        4. 選擇自建應用
        5. 網頁授權及JS-SDK
        6. 填寫公網域名
        7.下載校驗文件
        8. 校驗文件移動
        9. 啟動前端項目
        10. 瀏覽器校驗
        11. 域名校驗
        12. 應用主頁
      - 二、前端代碼實戰
      - 2.1. 引入JS文件
        2.2.權限驗證配置
      - 三、官網API閱讀
      - 3.1. 獲取應用的jsapi_ticket
        3.2. PM獲取應用的jsapi_ticket
        3.3. JS-SDK使用權限簽名算法
      - 四、后端代碼實戰
      - 4.1. 實現流程
        4.2. 簽名生成入口
        4.3. 獲取應用的jsapi_ticket
        4.4. 簽名生成
        4.5. 參數封裝
      - 五、實戰演練
      - 5.1. 打開應用主頁
        5.2. 開啟debug模式
        5.3. 進行案例頁面
        5.4. 生成簽名
        5.5. 參數封裝響應
        5.6. 外部聯系人選人接口
        5.7. 外部聯系人選人接口
        5.8. 圖像接口
      - 六、源碼分享
      - 6.1. 后端源碼
        6.2. 前端源碼

企業微信H5_網頁jssdk調用，ticket簽名config及示例

一、驗證域名歸屬校驗

1. 閱讀文檔

驗證域名歸屬校驗

2. 配置公網域名

由于企業微信文檔說需要公網域名，因此，這里演示采用內網穿透來做，前端項目地址為localhost:8800

內網穿透，將localhost:8800地址替換為公網4663588nl3.zicp.vip:80

3. 登錄企業微信管控臺

登錄企業微信管控臺
https://work.weixin.qq.com/wework_admin/loginpage_wx

4. 選擇自建應用

手機掃碼確認登錄
【應用管理】-選擇【自建應用】

5. 網頁授權及JS-SDK

6. 填寫公網域名

這里填寫內網穿透的地址

4663588nl3.zicp.vip

填寫完畢后，點擊申請校驗域名

7.下載校驗文件

8. 校驗文件移動

按照文檔步驟1將WW_verify_yxkQbdA9BK2UiX81.txt下載到本地，復制到前端項目的public目錄下面

9. 啟動前端項目

10. 瀏覽器校驗

瀏覽器驗證，是否可以訪問此文件，由于企業微信會驗證，這里咱們從瀏覽器自己先驗證一下

http://4663588nl3.zicp.vip/WW_verify_yxkQbdA9BK2UiX81.txt

11. 域名校驗

勾選√ 用于OAuth2.0回調的可信域名是否校驗，點擊確定

12. 應用主頁

由于企業微信會回調前端當前地址，因此，應該用主頁地址需要和jssdk域名一致

http://4663588nl3.zicp.vip

二、前端代碼實戰

文檔地址：https://developer.work.weixin.qq.com/document/path/94313

2.1. 引入JS文件

2.2.權限驗證配置

通過config接口注入權限驗證配置

前端代碼

三、官網API閱讀

說明：agentConfig與config的簽名算法完全一樣，但是jsapi_ticket的獲取方法不一樣，請特別注意，查看"獲取應用身份的ticket".

3.1. 獲取應用的jsapi_ticket

由于生成簽名前需要獲取應用的jsapi_ticket
官網文檔：https://developer.work.weixin.qq.com/document/path/90506

3.2. PM獲取應用的jsapi_ticket

由于獲取獲取應用的jsapi_ticket的企業微信API是一個get請求方式的接口，因此，咱們可以先用postman模擬調試，驗證是否可以獲取應用的jsapi_ticket，等會再用后端代碼去通過工具類請求是一樣的道理。

先獲取access_token

獲取應用的jsapi_ticket

config獲取企業的jsapi_ticket與上圖對比

從postman測試截圖，可以看出 config獲取企業的jsapi_ticket比獲取應用的jsapi_ticket的長度短了很多，小伙伴們要做好區分哈

說明：這里只是演示先看效果，真正的獲取應用的jsapi_ticket和簽名生成都后端生成

3.3. JS-SDK使用權限簽名算法

說明：config獲取企業的jsapi_ticket和獲取應用的jsapi_ticket使用的權限簽名算法是一樣的。

官網文檔：https://developer.work.weixin.qq.com/document/path/90506

簽名生成規則
參數個數
加密要求

四、后端代碼實戰

4.1. 實現流程

1.獲取當前時間戳2.隨機字符串3.獲取Access_token4.獲取應用的jsapi_ticket5.對string1進行sha1簽名，得到signature6.獲取agentid

string1的模板示例：

jsapi_ticket=sM4AOVdWfPE4DxkXGEs8VMCPGGVi4C3VM0P37wVUCFvkVAy_90u5h9nbSlYy3-Sl-HhTdfl2fzFy1AOcHKP7qg&noncestr=Wm3WZYTPz0wzccnW&timestamp=1414587457&url=http://mp.weixin.qq.com?params=value

4.2. 簽名生成入口

4.3. 獲取應用的jsapi_ticket

4.4. 簽名生成

4.5. 參數封裝

五、實戰演練

5.1. 打開應用主頁

5.2. 開啟debug模式

ctrl+shrit+alt+d開啟debug模式

5.3. 進行案例頁面

點擊jssdk按鈕就會進行入
先執行wx.config，執行成功后執行wx.agentConfig，這是官網說的

前端代碼

5.4. 生成簽名

5.5. 參數封裝響應

這里的彈框是因為debug: true，調試環境建議開啟，可以看到企業微信返回的參數都有什么，正式環境建議關閉

5.6. 外部聯系人選人接口

調用企業微信內置【外部聯系人選人接口】功能

5.7. 外部聯系人選人接口