一、背景
領導讓研究一個活兒：企業微信開發H5應用，微信端客戶進入H5頁面跟現有的Web系統打通使用者許可權。通俗的講：嵌入企業微信H5頁面，客戶點進去按原許可權載入內容。開發者中心有文件，附上兩個關鍵連結：快速整合H5應用 網頁授權登入
二、整合H5應用
1、準備本地域名對映
開啟HOSTS檔案，路徑：C:\Windows\System32\drivers\etc，新增一個自己喜歡的域名對映到 127.0.0.1
宣告：jd是本人名字縮寫，跟京東沒關係，純屬巧合 ?
2、新建H5應用
3、配置H5應用
4、配置可信域名
三、啟動H5頁面
寫程式碼之前交代一下，網頁授權登入用的是 OAuth2協議 授權碼模式。巧了不是，剛學的 IdentityServer4授權模式 這就用上了?
（1）前端是一個 React Demo，準備兩個頁面：home、oauth（預設頁），本地埠：8000，這樣在微信客戶端進入H5應用就行了。
（2）前面配置H5應用首頁是 test.jd.com:8000，就是對映的本地啟動的Demo：http://127.0.0.1:8000/oauth。
（3）整個流程、程式碼（home就不貼程式碼了，只展示了userid），如圖：
四、效果圖
說明一下，不能直接在瀏覽器測試，跳轉URL這步會提示要在微信客戶端開啟連線，用手機太麻煩，PC版企業微信，熱更新還方便 ?
五、注意事項（重要）
1、構造授權連線
構造授權連線 獲取授權碼時要注意 appid（企業的CorpID）、redirect_uri（重定向的Url需要urlencode處理，可以是任意頁面，我為了方便仍然定向的oauth，通過code引數判斷）、response_type（必須是code）三個引數，其他填預設項即可。
2、獲取使用者資訊
獲取使用者資訊 需要 code、access_token 兩個引數，而 access_token 需要提前根據 corpid（企業的CorpID）、corpsecret（應用的憑證金鑰）呼叫介面獲取，userid在企業微信是唯一的，跟原業務系統使用者繫結，完成許可權匹配，再根據許可權載入內容即實現了目標。
3、跨域
前臺直接請求微信介面是跨域的，我用的React框架是 AntDesgin，本地除錯配置一下代理即可，正式環境需解決，如：Nginx等。
4、最重要！！！
獲取access_token、使用者資訊，這兩微信個介面應該由H5請求業務系統的後臺API，再由後臺呼叫獲取資訊進行儲存、快取等等操作，API只返回使用者資訊給H5，前臺儲存， appid（企業的CorpID）、access_token、corpsecret（應用的憑證金鑰）都是敏感資訊不應在前後臺進行傳輸，而且順道還解決了前端跨域問題。