一、背景
領導讓研究一個活兒：企業微信開發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（應用的憑證密鑰）都是敏感資訊不應在前后臺進行傳輸，而且順道還解決了前端跨域問題，
測驗簽名轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/458307.html
標籤：其他
上一篇：純 CSS3 卡通小火車行駛影片
下一篇：node.js - mysql