企業級應用系統和微信集成的系列教程之六：如何通過OAuth2獲取微信用戶信息并顯示在SAP UI5應用中

最近有不少朋友在微信上向我咨詢SAP系統和微信公眾號集成的問題，因此我把當時寫的英文版翻譯成中文，發表在華為云社區上。

系列目錄

(1) 微信開發環境的搭建

(2) 如何通過微信公眾號消費API

(3) 微信用戶關注公眾號之后，自動在SAP C4C系統創建客戶主數據

(4) 如何將SAP C4C主數據變化推送給微信公眾號

(5) 如何將SAP UI5應用嵌入到微信公眾號菜單中

(6) 如何通過OAuth2獲取微信用戶信息并顯示在SAP UI5應用中(本文)

(7) 使用Redis存儲微信用戶和公眾號的對話記錄

(8) 微信公眾號的地圖集成

(9) 如何將微信用戶發送到微信公眾號的消息保存到SAP C4C系統

(10) 如何在SAP C4C系統直接回復消息給微信公眾號的訂閱者

最近有不少朋友在微信上向我咨詢SAP系統和微信公眾號集成的問題，因此我把當時寫的英文版翻譯成中文，重新發布在我的公眾號上。

需要注意的是，時隔三年，微信公眾號的開發流程可能有所變化，請大家自行鑒別。和微信公眾號集成的系統，我三年前選擇的是SAP Cloud for Customer.

這個系列的第五篇文章，我們已經將一個SAP UI5應用綁定到了微信公眾號的一個菜單上。點擊該菜單，該SAP UI5應用就會在微信app嵌入的瀏覽器里打開并運行。

本文我們更進一步，在打開的SAP UI5應用里，顯示一些點擊了該公眾號菜單的微信用戶的個人信息，比如微信昵稱。

看一個例子：假設Jerry自己的個人微信號昵稱為null：(這個昵稱高居被前端工程師吐槽的用戶昵稱排名之首，原因大家都懂的)

當我關注了測試微信公眾號，點擊公眾號菜單打開SAP UI5應用后，我發現自己的微信昵稱，null，出現在了SAP UI5應用的某個字段里：

本文余下部分，會詳述這個場景的實現步驟。

在微信公眾號后臺開發中心的文檔區域里，點擊“網頁授權獲取用戶基本信息”，即可查看微信的官方文檔：

官方文檔提到，如果用戶在微信客戶端中訪問第三方網頁(比如訪問我們自行開發且部署在某云平臺上的SAP UI5應用），并且該第三方應用會調用API獲取微信用戶個人信息時，公眾號需要遵循微信定義的OAuth2 網頁授權機制，即需要用戶在微信app里手動點擊“確認登錄”之后，才能允許第三方應用調用微信API，獲取當前登錄用戶的個人信息。

從用戶的視角出發，其感知到的流程如下：

(1) 用戶試圖在微信app里通過微信公眾號菜單訪問第三方應用。

(2) 在微信app里，用戶看到微信登錄的對話框，包含文字“網頁由該公眾號開發，請確認授權以下信息”和一個“確認登錄”的按鈕。

(3) 用戶點擊“確認登錄”之后，看到了自己想訪問的第三方應用，且該應用頁面上顯示了自己的微信個人信息比如昵稱字段。

以上三個步驟，背后其實發生了很多事情，也需要開發人員對應的編程去實現。

我認為用倒序的方式講解這三個流程中發生的事情，大家會比較容易理解一些。

普通的Access Token的獲取和使用方式，在Jerry這個系列之前的文章已經介紹過，通過微信公眾號的app id和app secret去換取即可，這里不再重復。

而現在討論的網頁授權Access Token，除了微信公眾號的app id和app secret之外，還需要另一個code才能換取成功。這個code從哪里來？步驟三里，微信用戶點擊了“確認登錄”的按鈕之后：

微信會自動生成一個code，并將該code傳給我們的第三方應用。第三方應用通過編程，接收到微信傳來的這個code之后，調用API，利用該code去換取網頁授權Access Token，再使用后者，調用讀取微信用戶昵稱的API，即可獲取微信用戶的昵稱了。

所以，上圖在微信app中彈出的對話框，技術上來說，作用有二：

(1) 顯式征求用戶的第三方網頁訪問授權；

(2) 用戶授權后，將微信生成的code發送給第三方應用。

下面我們按照順序，把完整的實現流程過一遍。

(1) 點擊下圖的“修改”鏈接，配置第三方應用的回調域名。

用戶在微信app里點擊了“確認登錄”之后，微信生成的code會發送到這個域名下的第三方應用去。

我用nodejs開發了一個應用，監聽微信傳遞過來的code，該應用的url為：

https://wechatjerry.herokuapp.com/tokenCallback

因此對應的域名配置如下：

(2) 在用戶首次訪問第三方應用之前，需要在微信app里彈出網頁授權請求窗口。這個窗口的彈出，需要進行一番配置。

微信官方文檔里給出了一種方式，即推送如下的url給微信用戶，用戶點擊之后，即可在微信app里，彈出網頁授權訪問的對話框：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=&redirect_uri=&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect

上面的url模板需要根據實際情況，填充微信公眾號的app id和第三方應用用于接收微信網頁授權code的地址。

對于我這個例子來說，最后完整的url為：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx73b49bfe02fd3a17&redirect_uri=https://wechatjerry.herokuapp.com/tokenCallback&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect

當用戶在微信app里點擊了這個url之后，就會看到下面的網頁授權對話框了：

用戶點擊“確認登錄”之后，微信app就會將一個自動生成的code，發送到我之前url里指定的回調地址去：

https://wechatjerry.herokuapp.com/tokenCallback

在nodejs應用里，響應來自tokenCallback的HTTP POST請求：

拿到了code之后，就可以在authorizeAndRedirect函數里，通過app id，app secret和code，三者一齊去換取網頁授權的Access Token：

拿到Access Token之后，再調用getUserinfo函數，使用Access Token和微信用戶的openID，調用獲取微信用戶個人信息的API，從而拿到用戶昵稱，在下圖第68行打印出來，然后在第70行，將該昵稱通過url參數的方式，重定向到SAP UI5應用：

在SAP UI5應用的init鉤子里，使用jQuery.sap.getUriParameters().get, 讀取到這個傳入的url參數，將其綁定到模型名稱為modelForview內的MasterTitle字段上：

最后，把SAP UI5應用Master List的頁面標題控件的title屬性，綁定到上述MasterTitle模型字段即可。

這樣，我的微信昵稱null，就成功顯示在SAP UI5 Master List的標題控件上了：

本文提到的源代碼實現，在我的Github上。

本文提到的OAuth 2認證機制，如今已經廣泛應用于各種第三方應用的授權登錄場景中。

本系列的下一篇文章，Jerry會介紹，如何使用Redis, 存儲用戶和微信公眾號的聊天記錄，感謝閱讀。

系列目錄

(1) 微信開發環境的搭建

(2) 如何通過微信公眾號消費API

(3) 微信用戶關注公眾號之后，自動在SAP C4C系統創建客戶主數據

(4) 如何將SAP C4C主數據變化推送給微信公眾號

(5) 如何將SAP UI5應用嵌入到微信公眾號菜單中

(6) 如何通過OAuth2獲取微信用戶信息并顯示在SAP UI5應用中(本文)

(7) 使用Redis存儲微信用戶和公眾號的對話記錄

(8) 微信公眾號的地圖集成

(9) 如何將微信用戶發送到微信公眾號的消息保存到SAP C4C系統

(10) 如何在SAP C4C系統直接回復消息給微信公眾號的訂閱者

ABAP API ERP web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。