一、背景
領導讓研究一個活兒：企業微信開發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（應用的憑證密鑰）都是敏感信息不應在前后台進行傳輸，而且順道還解決了前端跨域問題。