企業微信H5_身份驗證,H5應用網頁授權登錄獲取身份

文章目錄

- - - - 一、調用流程
      - 1. 企業微信OAuth2接入流程
        
        2. 使用OAuth2前須知
        
        3. 構造網頁授權鏈接
        
        4. 獲取訪問用戶身份
      - 二、調試前準備
      - 2.1. 配置域名映射
        
        2.2. 跨域+域名請求
        
        2.3. 設置可信任域名
        
        2.4. 登錄企微
        
        2.5. 選擇自建應用
      - 三、實戰演練
      - 3.1. 前端編碼觸發後端api
        
        3.2. 後端構造授權鏈接
        
        3.3. 請求授權鏈接
        
        3.4. 回調前端
        
        3.5. 攜帶code請求後端
        
        3.6. 請求企業微信，獲取用戶信息
      - 四、代碼講解
      - 4.1. 前端編碼觸發後端api
        
        4.2. 後端構造授權鏈接
        
        4.3. 請求授權鏈接
        
        4.4. 回調前端
        
        4.5. 攜帶code請求後端
        
        4.6. 請求企業微信，獲取用戶信息
      - 五、源碼分享
      - 5.1. 後端源碼
        
        5.2. 前端源碼

一、調用流程

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

1. 企業微信OAuth2接入流程

我根據上圖畫的便於理解的可實施圖

步驟如下->
①前端項目->前端項目檢查自身是否登錄，如果沒有登錄攜帶redirect_url調用->後端api獲取企業微信授權登錄鏈接
②後端api->返回生成redirect_ur及app_id等信息的企業微信oauth授權鏈接->前端項目
③前端項目->windows.location.href跳轉->企業微信授權鏈接
④企業微信->企業微信授權，攜帶code回調redirect_url->前端項目
⑤前端項目->攜帶將state、code等調用->後端api接口獲取用戶信息等
⑥後端api->服務端通過code調用->企業微信獲取用戶信息
⑦後端api->返回token及用戶信息->前端項目

2. 使用OAuth2前須知

重點閱讀，比較重要
核心思想：就是調用之前需要配置可信任域名+端口，下面會進行演示。

3. 構造網頁授權鏈接

這個鏈接一般為瞭安全，由前端觸發請求後端構造網頁授權鏈接（回調redirect_uri）

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

參數說明
appid的取值和redirect_uri授權後重定向的回調鏈接地址，請使用urlencode對鏈接進行處理，這個比較重要

4. 獲取訪問用戶身份

通過後端後取的ACCESS_TOKEN的前端傳遞過來的code，調用“獲取訪問用戶身份”請求地址即可

二、調試前準備 2.1. 配置域名映射

127.0.0.1 apitest.tobdev.com127.0.0.1 test.tobdev.com

2.2. 跨域+域名請求

2.3. 設置可信任域名

登錄管控臺：https://work.weixin.qq.com/wework_admin/frame#apps

網頁授權及JS-SDK
申請域名校驗

2.4. 登錄企微

建議使用PC端企業微信進行調試，手機調試也可以，如果是手機調試的話，請參考：
host配置及代理相關，H5應用如何本地及真機調試https://blog.csdn.net/weixin_40816738/article/details/122431390

2.5. 選擇自建應用

選擇企業內部自建應用

三、實戰演練

步驟如下->

3.1. 前端編碼觸發後端api

①前端項目->前端項目檢查自身是否登錄，如果沒有登錄攜帶redirect_url調用->後端api獲取企業微信授權登錄鏈接

3.2. 後端構造授權鏈接

②後端api->返回生成redirect_ur及app_id等信息的企業微信oauth授權鏈接->前端項目

3.3. 請求授權鏈接

③前端項目->windows.location.href跳轉->企業微信授權鏈接

3.4. 回調前端

④企業微信->企業微信授權，攜帶code回調redirect_url->前端項目

3.5. 攜帶code請求後端

⑤前端項目->攜帶將state、code等調用->後端api接口獲取用戶信息等

3.6. 請求企業微信，獲取用戶信息

這裡給大傢進行步驟拆解：
⑥後端api->服務端通過code調用->企業微信獲取用戶信息

後端接收前端的code
後端攜帶corpId請求企業微信獲取access_token

⑦後端api->返回token及用戶信息->前端項目

後端獲取token其實需要2個參數（AccessTokenUrl(),corpId,agentSecret）這一步通過查詢數據庫的信息，最後拼接而成的
後端構造“獲取訪問用戶身份”請求地址，調用企業微信即可
後端接收企業微信返回的用戶信息，這裡隻是簡要的用戶信息，最重要的是userid，等會會攜帶userid獲取用戶的詳細信息（後續會講）
前端接收後端推送過來的用戶信息進行展示

四、代碼講解

步驟如下->

4.1. 前端編碼觸發後端api

①前端項目->前端項目檢查自身是否登錄，如果沒有登錄攜帶redirect_url調用->後端api獲取企業微信授權登錄鏈接

【H5應用OAuth授權登錄】按鈕

地址編碼處理，官網文檔有講到

請求後端api

4.2. 後端構造授權鏈接

②後端api->返回生成redirect_ur及app_id等信息的企業微信oauth授權鏈接->前端項目

service組裝網頁授權連接

4.3. 請求授權鏈接

③前端項目->windows.location.href跳轉->企業微信授權鏈接

4.4. 回調前端

④企業微信->企業微信授權，攜帶code回調redirect_url->前端項目

4.5. 攜帶code請求後端

⑤前端項目->攜帶將state、code等調用->後端api接口獲取用戶信息等

4.6. 請求企業微信，獲取用戶信息

這裡給大傢進行步驟拆解：
⑥後端api->服務端通過code調用->企業微信獲取用戶信息

後端接收前端的code
後端攜帶corpId請求企業微信獲取access_token

⑦後端api->返回token及用戶信息->前端項目

後端獲取token其實需要2個參數（AccessTokenUrl(),corpId,agentSecret）這一步通過查詢數據庫的信息，最後拼接而成的
後端構造“獲取訪問用戶身份”請求地址，調用企業微信即可
後端接收企業微信返回的用戶信息，這裡隻是簡要的用戶信息，最重要的是userid，等會會攜帶userid獲取用戶的詳細信息（後續會講）
前端接收後端推送過來的用戶信息進行展示

用戶信息

{"errcode": 0,"UserId": "ZeXin","DeviceId": "b4f2f8f9-6a51-4f1b-a927-2140b9253c17","errmsg": "ok","token": "tobdeveyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ0b2JkZXYiLCJjb3JwX2lkIjoid3dlYTk4MjIwZmRjZDhhMzhkIiwiaWF0IjoxNjQ1OTMwMjYxLCJleHAiOjE2NDY1MzUwNjF9.NCfLR5fnYubuRnSDojXmV4BbTCVNw7Yu-IKZpywvhMQ"}