文章目錄

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

企業(yè)微信H5_網(wǎng)頁(yè)jssdk調(diào)用，ticket簽名config及示例

一、驗(yàn)證域名歸屬校驗(yàn)

1. 閱讀文檔

驗(yàn)證域名歸屬校驗(yàn)

2. 配置公網(wǎng)域名

由于企業(yè)微信文檔說(shuō)需要公網(wǎng)域名，因此，這里演示采用內(nèi)網(wǎng)穿透來(lái)做，前端項(xiàng)目地址為localhost:8800

內(nèi)網(wǎng)穿透，將localhost:8800地址替換為公網(wǎng)4663588nl3.zicp.vip:80

3. 登錄企業(yè)微信管控臺(tái)

登錄企業(yè)微信管控臺(tái)
https://work.weixin.qq.com/wework_admin/loginpage_wx

4. 選擇自建應(yīng)用

手機(jī)掃碼確認(rèn)登錄
【應(yīng)用管理】-選擇【自建應(yīng)用】

5. 網(wǎng)頁(yè)授權(quán)及JS-SDK

6. 填寫(xiě)公網(wǎng)域名

這里填寫(xiě)內(nèi)網(wǎng)穿透的地址

4663588nl3.zicp.vip

填寫(xiě)完畢后，點(diǎn)擊申請(qǐng)校驗(yàn)域名

7.下載校驗(yàn)文件

8. 校驗(yàn)文件移動(dòng)

按照文檔步驟1將WW_verify_yxkQbdA9BK2UiX81.txt下載到本地，復(fù)制到前端項(xiàng)目的public目錄下面

9. 啟動(dòng)前端項(xiàng)目

10. 瀏覽器校驗(yàn)

瀏覽器驗(yàn)證，是否可以訪問(wèn)此文件，由于企業(yè)微信會(huì)驗(yàn)證，這里咱們從瀏覽器自己先驗(yàn)證一下

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

11. 域名校驗(yàn)

勾選√ 用于OAuth2.0回調(diào)的可信域名是否校驗(yàn)，點(diǎn)擊確定

12. 應(yīng)用主頁(yè)

由于企業(yè)微信會(huì)回調(diào)前端當(dāng)前地址，因此，應(yīng)該用主頁(yè)地址需要和jssdk域名一致

http://4663588nl3.zicp.vip

二、前端代碼實(shí)戰(zhàn)

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

2.1. 引入JS文件

2.2.權(quán)限驗(yàn)證配置

通過(guò)config接口注入權(quán)限驗(yàn)證配置

前端代碼

三、官網(wǎng)API閱讀

說(shuō)明：agentConfig與config的簽名算法完全一樣，但是jsapi_ticket的獲取方法不一樣，請(qǐng)?zhí)貏e注意，查看"獲取應(yīng)用身份的ticket".

3.1. 獲取應(yīng)用的jsapi_ticket

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

3.2. PM獲取應(yīng)用的jsapi_ticket

由于獲取獲取應(yīng)用的jsapi_ticket的企業(yè)微信API是一個(gè)get請(qǐng)求方式的接口，因此，咱們可以先用postman模擬調(diào)試，驗(yàn)證是否可以獲取應(yīng)用的jsapi_ticket，等會(huì)再用后端代碼去通過(guò)工具類(lèi)請(qǐng)求是一樣的道理。

先獲取access_token

獲取應(yīng)用的jsapi_ticket

• config獲取企業(yè)的jsapi_ticket與上圖對(duì)比
  
  從postman測(cè)試截圖，可以看出 config獲取企業(yè)的jsapi_ticket比獲取應(yīng)用的jsapi_ticket的長(zhǎng)度短了很多，小伙伴們要做好區(qū)分哈

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

3.3. JS-SDK使用權(quán)限簽名算法

說(shuō)明：config獲取企業(yè)的jsapi_ticket和獲取應(yīng)用的jsapi_ticket使用的權(quán)限簽名算法是一樣的。

官網(wǎng)文檔：https://developer.work.weixin.qq.com/document/path/90506

• 簽名生成規(guī)則
• 參數(shù)個(gè)數(shù)
• 加密要求
  
  

四、后端代碼實(shí)戰(zhàn)

4.1. 實(shí)現(xiàn)流程

1.獲取當(dāng)前時(shí)間戳2.隨機(jī)字符串3.獲取Access_token4.獲取應(yīng)用的jsapi_ticket5.對(duì)string1進(jìn)行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. 獲取應(yīng)用的jsapi_ticket

4.4. 簽名生成

4.5. 參數(shù)封裝

五、實(shí)戰(zhàn)演練

5.1. 打開(kāi)應(yīng)用主頁(yè)

5.2. 開(kāi)啟debug模式

ctrl+shrit+alt+d開(kāi)啟debug模式

5.3. 進(jìn)行案例頁(yè)面

點(diǎn)擊jssdk按鈕就會(huì)進(jìn)行入
先執(zhí)行wx.config，執(zhí)行成功后執(zhí)行wx.agentConfig，這是官網(wǎng)說(shuō)的

前端代碼

5.4. 生成簽名

5.5. 參數(shù)封裝響應(yīng)

這里的彈框是因?yàn)閐ebug: true，調(diào)試環(huán)境建議開(kāi)啟，可以看到企業(yè)微信返回的參數(shù)都有什么，正式環(huán)境建議關(guān)閉

5.6. 外部聯(lián)系人選人接口

調(diào)用企業(yè)微信內(nèi)置【外部聯(lián)系人選人接口】功能

5.7. 外部聯(lián)系人選人接口

調(diào)用企業(yè)微信內(nèi)置【外部聯(lián)系人選人接口】功能

5.8. 圖像接口

調(diào)用企業(yè)微信內(nèi)置【圖像接口-拍照或從手機(jī)相冊(cè)中選圖接口】功能

由于調(diào)試在PC的企業(yè)微信，因此，就會(huì)彈框選擇圖片，按照官網(wǎng)文檔：拍照或從手機(jī)相冊(cè)中選圖接口

六、源碼分享

6.1. 后端源碼

后端：https://gitee.com/gblfy/qywx-inner-java

6.2. 前端源碼

前端：https://gitee.com/gblfy/qywx-vuejs
tee.com/gblfy/qywx-vuejs)

總結(jié)

以上是生活随笔為你收集整理的企业微信H5_网页jssdk调用 agentconfig选人选照片等案例演示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。