文章目錄

• • • • • 一、驗證域名歸屬校驗
        • • 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. 獲取企業jsticket
          • 4.4. 簽名生成
          • 4.5. 參數封裝
        • 五、實戰演練
        • • 5.1. 打開應用主頁
          • 5.2. 開啟debug模式
          • 5.3. 進行案例頁面
          • 5.4. 生成簽名
          • 5.5. 參數封裝響應
          • 5.6. 個人信息（手動）
          • 5.7. 個人信息（自動）

企業微信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/90514

2.1. 引入JS文件

如果是npm webpack工程的話，上面引入方式需要驗證是否生效。如果不生效，采用npm安裝方式引入即可

npmjs官網：
https://www.npmjs.com/search?q=weixin-js-sdk

2.2.權限驗證配置

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

前端代碼

三、官網API閱讀

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，等會再用后端代碼去通過工具類請求是一樣的道理。

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

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

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

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

四、后端代碼實戰

4.1. 實現流程

1.獲取當前時間戳2.隨機字符串3.獲取Access_token4.獲取企業jsticket5.對string1進行sha1簽名，得到signature

string1的模板示例：

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

4.2. 簽名生成入口

4.3. 獲取企業jsticket

4.4. 簽名生成

4.5. 參數封裝

五、實戰演練

5.1. 打開應用主頁

5.2. 開啟debug模式

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

5.3. 進行案例頁面

點擊jssdk按鈕就會進行入

前端代碼

5.4. 生成簽名

5.5. 參數封裝響應

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

5.6. 個人信息（手動）

調用企業微信內置【個人信息】功能

前端代碼

這里演示方便，將數據提前寫好了

重點，需要調用企業微信什么內置功能，需要在jsApiList: [‘openUserProfile’] // 必填，需要使用的JS接口列表，凡是要調用的接口都需要傳進來

5.7. 個人信息（自動）

我沒有點擊個人信息按鈕，直接調用企業微信內置【個人信息】進行顯示

總結

以上是生活随笔為你收集整理的企业微信H5_网页jssdk调用，ticket签名config及示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。