SAP系統和微信集成的系列教程之六：如何通過OAuth2獲取微信用户信息並顯示在SAP UI5應用中詳情 - oauth,oauth2.0,sap,saprfc,abap 註銷博客

這是Jerry 2020年的第87篇文章，也是汪子熙公眾號總共第269篇原創文章。

本系列的英文版Jerry寫作於2017年，這個教程總共包含十篇文章，發表在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) 用户點擊“確認登錄”之後，看到了自己想訪問的第三方應用，且該應用頁面上顯示了自己的微信個人信息比如暱稱字段。

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

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

在步驟三裏，第三方應用調用API獲取用户微信暱稱時，需要網頁授權Access Token，該Token和普通的Access Token並不是一回事，二者獲取方式也有差異：

普通的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...

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

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

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

https://open.weixin.qq.com/co...<app id of your subscription account id>&redirect_uri=<your call back url to retrieve the code sent by Wechat platform>&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect

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

對於我這個例子來説，最後完整的url為：

https://open.weixin.qq.com/co...://wechatjerry.herokuapp.com/tokenCallback&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect

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

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

https://wechatjerry.herokuapp...

在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, 存儲用户和微信公眾號的聊天記錄，感謝閲讀。