## 一、概述 `OpenId`是一個用戶對于一個小程序／公眾號的標識，開發者可以通過這個標識識別出用戶，比如微信支付的很多產品，都是通過openId來確定支付者的身份； `UnionId`是一個用戶對于同主體微信小程序／公眾號／APP的標識，開發者需要在微信開放平臺下綁定相同賬號的主體。開發者可通過`UnionId`，實現多個小程序、公眾號、甚至APP 之間的數據互通了； ## 二、技術方案 ### **技術原理** （1）用戶在微信客戶端中訪問我們開發的網頁，公眾號就可以通過微信網頁授權機制，來獲取用戶基本信息，進而實現業務邏輯； 前提：在微信公眾號請求用戶網頁授權之前，開發者需要先到公眾平臺官網中的“開發 - 接口權限 - 網頁服務 - 網頁帳號 - 網頁授權獲取用戶基本信息”的配置選項中，修改授權回調域名。請注意，這里填寫的是域名（是一個字符串），而不是URL，因此請勿加 http:// 等協議頭；  （2）網頁授權的兩種scope 1、以snsapi_base為scope發起的網頁授權，是用來獲取進入頁面的用戶的openid的，并且是靜默授權并自動跳轉到回調頁的。用戶感知的就是直接進入了回調頁（往往是業務頁面） 2、以snsapi_userinfo為scope發起的網頁授權，是用來獲取用戶的基本信息的。但這種授權需要用戶手動同意，并且由于用戶同意過，所以無須關注，就可在授權后獲取該用戶的基本信息； （3）關于特殊場景下的靜默授權 1、上面已經提到，對于以snsapi_base為scope的網頁授權，就靜默授權的，用戶無感知； 2、對于已關注公眾號的用戶，如果用戶從公眾號的會話或者自定義菜單進入本公眾號的網頁授權頁，即使是scope為snsapi_userinfo，也是靜默授權，用戶無感知； ### **實現步驟** 第一步：包裹授權地址，用戶同意授權，獲取code 在確保微信公眾賬號擁有授權作用域（scope參數）的權限的前提下（服務號獲得高級接口后，默認擁有scope參數中的snsapi_base和snsapi_userinfo），引導關注者打開如下頁面（把實際開發的前端地址包裹到REDIRECT_URI，使用 urlEncode 對鏈接進行處理）： ``` https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect ``` 如果用戶同意授權，頁面將跳轉至 redirect_uri/?code=CODE&state=STATE； 第二步：通過code換取網頁授權access_token和openId 首先請注意，這里通過code換取的是一個特殊的網頁授權access_token,與基礎支持中的access_token（該access_token用于調用其他接口）不同。公眾號可通過下述接口來獲取網頁授權access_token。如果網頁授權的作用域為snsapi_base，則本步驟中獲取到網頁授權access_token的同時，也獲取到了openid，snsapi_base式的網頁授權流程即到此為止； 獲取code后，請求以下鏈接獲取access_token（也就是微信提供的獲取token的api，需要參數appId和appSecret，再加上code即可）： ``` https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code ``` 到這里，就已經拿到了openId； ## 三、從任意頁面獲取 核心思路就是： 第一步、調用獲取OpenIdURL的后端api接口（普通版本或免登錄任意跳轉版本），并傳入（固定或實時任意傳入的）前端重定向地址，接口返回curAuthorizedGetOpenIdUrl中得到一個URL，該地址就是一個Oauth2包裹授權的地址； 例如：curAuthorizedGetOpenIdUrl地址示范： ``` https://open.weixin.qq.com/connect/oauth2/authorize?appid=yourappId&redirect_uri=http%3A%2F%2Fserver.yourdns.com%2Ffcios%2Fapi%2Fsystem%2Fopen%2Fweixin%2Fofficialaccount%2Foauth%2Fredirect%2Feverywhere%3FredirectUrl%3Dhttp%3A%2F%2Fmobile.yourdns.com%2Freg%26extraParameters%3D&response_type=code&scope=snsapi_userinfo&state=yourappId&connect_redirect=1#wechat_redirect ``` 第二步、前端引導用戶打開curAuthorizedGetOpenIdUrl的地址，將會引導用戶做授權（可以是靜默授權，用戶無感知），用戶授權完成后，會重定向到傳入的前端地址； 例如：上面的地址，微信瀏覽器跳轉后，重定向到的地址： ``` http://mobile.yourdns.com/#/reg?openId=ZXDYD507an9mgdva7Kvny9RNxtLE&extraParameters= ``` 第三步、在重定向跳轉到的前端地址頁面上，前端要偵聽參數，得到OpenId； >[danger] 平臺提供了兩個版本的獲取OpenId接口，一個是固定前端重定向地址的（普通版本），一個是可以由調用時傳入前端重定向地址的（免登錄任意跳轉版本）； ### **（1）普通版本獲取openId的授權訪問地址接口** 為了獲取當前項目的授權地址，提供了一個便利的接口： ``` /api/modules/wechat/officialaccount/getopenid/url ```  為了生成的授權地址是正確的，必須確保服務器部署的地址配置正確，該配置項是外部訪問當前后端服務的根地址，供微信重定向給前端的時候回調到當前后端服務器； ``` rayframework.open.weixin-official-account-server-url=http://mydns/raysale ``` 微信授權后，將跳轉到下面配置項定義的前端地址，在該前端地址，即可獲取當前微信的openId了； ``` rayframework.open.weixin-official-account-front-url= ``` ### **（2）免登錄任意跳轉版本獲取openId的授權訪問地址接口** 無需登陸即可調用的版本，與上面版本不同的是，這里需要傳入一個參數，即授權后的跳轉地址redirectUrl（而非參數配置固定）： ``` /api/modules/wechat/officialaccount/getopenid/url/everywhere ``` >[danger] > 1、調用的時候，傳入重定向地址redirectUrl（該地址不可以有#，否則會導致無法跳轉過去），即可跳轉到任意指定的重定向地址，如果沒有指定，則使用上面版本一樣的系統配置地址，比較靈活； > 2、如果希望攜帶參數跳轉，則需要通過參數名extraParameters來傳遞； > 3、接口調用之后，獲取curAuthorizedGetOpenIdUrl屬性的授權地址，前端跳轉到該地址，該地址就會引導微信頁進入授權，得到用戶授權后，拿到openId，跳轉到用戶指定的redirectUrl地址，在用戶指定地址里面，前端即可偵聽并獲得openId了； ### **（3）授權后重定向地址中需要#的處理辦法** 如果前端必須采用hash路由模式，那怎么處理授權后重定向地址的問題呢？ 解決方案是由nginx來處理； 舉例來說； 1、如果前端地址需要配置為`http://mydns/home#/register`，那么實際作為redirectUrl參數傳入的時候，我們考慮到微信授權重定向不支持#，那么我們把重定向地址設置為`http://mydns/home/register`傳入（沒有#）； 2、在nginx中，配置rewrite邏輯，將`http://mydns/home/register`rewrite為`http://mydns/home#/register`，達到目的； ``` location / { rewrite ^/home/register(.*) /home#/register permanent; } ``` 完整實例： ``` location / { root html/mobile; index index.html index.htm; try_files $uri $uri/ /index.html; index index.html index.htm; rewrite ^/login(.*) /#/login permanent; } ```  ## 四、從自定義菜單跳轉獲取 ### **（1）實現步驟** 首先、假定一個入口地址，在公眾號的底部菜單配置的時候，把當前入口地址包裹oauth2授權之后的地址作為菜單URL發布； 然后、從微信中訪問公眾號，點擊該菜單，就會在剛才定義的入口地址后面，追加上微信用戶的code了； 最后、前端獲取到的code，然后再結合appId和appSecret，即可取得openId；可以跟后端接口進行業務整合了； >[danger] 比如：可以跟登陸的賬號信息一起提交過來，后臺可以立即將系統賬號與微信用戶的openId進行綁定，后續業務將自動從后端關聯獲取openId；也可以不綁定，僅僅讓前端持有，那么，后續的業務中需要openId的，由前端發送過來； ### **（2）舉例** 定義一個**營業廳新版本**公眾號應用菜單； 發布該菜單之后，底部顯示了一個**營業廳新版本**菜單項；  點擊公眾號中的**營業廳新版本**菜單項，就重定向到一個地址，且帶上了當前用戶的code了，然后調用微信api，獲取openId，在前端登陸的時候，跟賬戶密碼一起提交到后臺，進行系統賬號和微信賬號的綁定了； ``` #假定我們設定的入口地址為http://weixinappurl/mobile http://weixinappurl/mobile?code=oNouq6QLIRKtdPaCM8Rv6p0-JQbs&state=appId ``` ### **（3）后續業務建議技術方案** 經上，獲取openId，且綁定了業務系統賬號和微信用戶openId之后，后續業務開發，就不需要再傳入openId了，直接轉變為普通的H5開發了，只需要傳入系統的rayAccessToken即可，在需要的時候，由后端提供兌換（基于rayAccessToken獲取該用戶的微信用戶openId），也就是自動綁定了； > 如果萬一需要解除這種綁定，則可以通過提供一個系統功能出來，讓用戶選擇解除綁定，否則建議直接綁定；