springboot+vue專案如何整合企業微信

大龄码农有梦想發表於2024-07-01

本文以springboot+vue技術開發的低程式碼平臺為案例,介紹應用系統如何整合企業微信,包括同步企業微信組織使用者、單點登入、訊息傳送等。

線上體驗:http://www.yunchengxc.com

1、準備應用

1.1、註冊企業微信賬號

作為企業微信的企業管理員,首先登入企業微信官網,註冊一個企業微信賬號。

如果已經有賬號,則直接使用即可。

企業微信官網:https://work.weixin.qq.com/

springboot+vue專案如何整合企業微信

填寫註冊資訊進行註冊

springboot+vue專案如何整合企業微信

1.2、建立企業微信應用

在企業微信管理後臺,找到應用管理選單,點選下方的“建立應用”按鈕。

springboot+vue專案如何整合企業微信

填寫應用資訊,設定可見範圍為所有人,不然會影響同步使用者和傳送訊息通知。

springboot+vue專案如何整合企業微信

springboot+vue專案如何整合企業微信

1.3、配置開發者介面

新建應用後進入應用詳情,滑倒最下面配置【網頁授權及JS-SDK】、【企業微信授權登入】、【企業可信IP】

springboot+vue專案如何整合企業微信

1.3.1、【網頁授權及JS-SDK】配置可信域名

配置這一步驟後才可以配置企業可信IP,填寫專案的域名(僅支援域名),域名需要在公網能夠訪問到。填寫完成後點選申請校驗域名。

springboot+vue專案如何整合企業微信

把下載下來的檔案放到伺服器上,並且可以根據可信域名訪問到檔案才算時校驗透過。

springboot+vue專案如何整合企業微信

1.3.2、【企業微信授權登入】配置

企業微信掃碼登入功能需要設定回撥地址。回撥地址就是正式系統的訪問地址,圖中是本地開發的示例。使用企業微信登入,只能回撥至該域名下的頁面。

springboot+vue專案如何整合企業微信

1.3.3、【企業可信IP】配置

專案需要遠端呼叫企業微信的介面,這裡要寫我們的公網ip,不然我們的請求會被攔截。

springboot+vue專案如何整合企業微信

1.4、配置通訊錄同步應用

我們自建的應用只有讀取使用者的許可權,想要進行寫的操作需要透過通訊錄同步應用去呼叫介面。點選安全與管理選單->管理工具->通訊錄同步

springboot+vue專案如何整合企業微信

點選開啟介面同步

springboot+vue專案如何整合企業微信

配置可信IP

springboot+vue專案如何整合企業微信

2、配置系統引數

2.1、找到應用憑證

點選我的企業選單,獲取企業ID(corpId)

springboot+vue專案如何整合企業微信

開啟自建應用獲取自建應用的AgentId(appAgentId) 和 Secret(appSecret)

springboot+vue專案如何整合企業微信

開啟通訊錄同步獲取通訊錄同步Secret(synSecret)

springboot+vue專案如何整合企業微信

2.2、配置後端引數

在後端工程的yml檔案中,把應用憑證對應配置到“yuncheng.workWechat”下,引數名稱與應用憑證的名稱對應。

springboot+vue專案如何整合企業微信

2.3、配置前端引數

在前端工程的“public/config/bootConfig.js”檔案內,配置引數“VUE_APP_WORKWECHAT_APP_ID”的值,對應企業微信的“corpId”;

配置引數“VUE_APP_WORKWECHAT_AGENT_ID”的值,對應企業微信的“AgentId”;配置“VUE_APP_WORKWECHAT_REDIRECT_URI”引數,登入成功重定向 url,預設當前域名,可以不用改動。

springboot+vue專案如何整合企業微信

在前端工程的“src/settings.js”檔案內,配置開關引數“showWorkWechat”的值為“true”,開啟前端的企業微信掃碼按鈕、同步部門使用者按鈕的顯示。

springboot+vue專案如何整合企業微信

3、同步部門使用者

3.1、同步部門

在組織管理模組,點選“同步企業微信->本地同步到企業微信”。

springboot+vue專案如何整合企業微信

同步完成後,會有彈框提示同步情況,企業微信管理後臺同步後的截圖如下。

springboot+vue專案如何整合企業微信

3.2、同步使用者

在使用者管理模組,點選“同步企業微信->本地同步到企業微信”。

springboot+vue專案如何整合企業微信

同步完成後,會有彈框提示同步情況,企業微信管理後臺同步後的截圖如下。

注意:同步到企業微信的賬號,如果該賬號沒有加入過當前企業團隊,系統會自動向該賬號傳送加入邀請,該賬號需要同意邀請後,才能加入當前企業團隊。

springboot+vue專案如何整合企業微信

3.3、同步注意事項

部門和使用者的同步規則:以本地資料為準。

本地往企業微信同步,如果企業微信不存在,則新建;如果存在,則更新;如果企業微信有多餘的部門,則刪除,並把刪除部門下的應用轉移到跟部門下。

企業微信往本地同步,如果本地不存在,則新建,如果存在,則更新,如果本地有多餘的賬號,則保持不變。本地新建立的使用者的預設密碼是“123456”,需要自行設定使用者的角色、崗位等資訊。

本地和企業微信是否同一使用者的賬號,是透過使用者表的“work_wechat_id”進行判斷的。

4、企業微信掃碼登入

4.1、掃碼登入

點選登入頁面的企業微信掃碼Tab頁,會顯示企業微信二維碼,使用手機企業微信掃碼功能,完成掃碼登入。

注意:必須完成上一步的使用者同步,並且企業微信使用者必須接受邀請加入企業團隊後,才能進行掃碼登入。

springboot+vue專案如何整合企業微信

4.2、本地使用者和企業微信的關聯欄位

本地和企業微信透過使用者表的“sys_user.work_wechat_id”欄位,和企業微信使用者的賬號id進行關聯

springboot+vue專案如何整合企業微信

如果掃碼登入後,提示使用者不存在,需要檢查企業微信賬號所關聯的“work_wechat_id”,登入失敗的原因可能有以下幾點:

原因1、在平臺的使用者管理中可能沒有該userId對應的使用者;

原因2、企業管理員可能沒有同步企業微信使用者或者該企業微信賬號沒有加入對應的企業微信企業團隊;

原因3、企業管理員可能沒有給企業微信應用設定可見範圍。

相關文章