This is Jerry’s 87th article of 2020, and the 269th original article of Wang Zixi’s official account.
The English version of this series was written by Jerry in 2017. This tutorial consists of ten articles and is published on the SAP community.
Series directory
(1) Establishment of wechat development environment
(2) How to consume API through wechat public account
(3) After wechat users follow the public account, they will automatically create customer master data in SAP C4C system
(4) How to push changes of SAP C4C master data to wechat official account
(5) How to embed SAP UI5 application in wechat official menu
(6) How to obtain wechat user information through OAuth2 and display it in SAP UI5 application (this article)
(7) Use Redis to store records of conversations between wechat users and public accounts
(8) Map integration of wechat public accounts
(9) How to save the messages sent by wechat users to wechat official accounts in SAP C4C system
(10) How to reply messages directly to subscribers of wechat public accounts in SAP C4C system
Recently, many friends asked me on wechat about the integration of SAP system and wechat official account, so I translated the English version into Chinese and re-posted it on my official account.
It should be noted that after three years, the development process of wechat public number may change, please identify yourself. Three years ago, I chose SAP Cloud for Customer for the system integrated with wechat official account.
In the fifth article in this series, we have tied an SAP UI5 application to a menu on our wechat official account. Click the menu, and the SAP UI5 application will be opened and run in the browser embedded in wechat App.
In this paper, we go one step further. In the OPEN SAP UI5 application, some wechat user’s personal information, such as wechat nickname, is displayed after clicking the menu of the public account.
Let’s say Jerry’s own personal wechat nickname is NULL: (This is the number one nickname teased by front-end engineers, for obvious reasons)
When I followed the test wechat official account and clicked the official account menu to open SAP UI5 application, I found that my wechat nickname, NULL, appeared in a field of SAP UI5 application:
The implementation steps for this scenario are detailed in the remainder of this article.
In the document area of background development center of wechat official account, click “Webpage authorization to obtain user basic Information” to view the official document of wechat:
According to the official document, if users visit third-party web pages in wechat client (such as SAP UI5 application developed by ourselves and deployed on a cloud platform), and the third-party application will call API to obtain wechat user’s personal information, the official account shall follow the OAuth2 web page authorization mechanism defined by wechat. That is, users need to manually click “Confirm login” in the wechat app to allow third-party applications to call the wechat API and obtain the personal information of the current login user.
From the user’s perspective, the perceived process is as follows:
(1) The user attempts to access the third-party application through the wechat public account menu in the wechat app. (2) In the wechat app, the user sees the wechat login dialog box, which contains the text “the webpage is developed by the public account, please confirm the following information of authorization” and a “confirm login” button. (3) After the user clicks “Confirm login”, he sees the third-party application he wants to visit, and his wechat personal information such as nickname field is displayed on the page of the application.
The above three steps, in fact, a lot of things happened behind, but also need developers corresponding programming to achieve.
I think it’s easier to understand what happens in these three processes in reverse order.
In Step 3, when a third-party application calls the API to obtain a user’s wechat nickname, it needs a web page authorization Access Token, which is different from ordinary Access Token, and the way of obtaining the two is also different:
The way to obtain and use common Access Token has been introduced in Jerry’s previous articles. You can exchange it by app ID and app Secret of wechat public account, which will not be repeated here.
In addition to the APP ID and App Secret of the wechat public account, another code is needed to exchange the web page authorization Access Token. Where does this code come from? In step 3, after the wechat user clicks the “Confirm login” button:
Wechat will automatically generate a code and send it to our third-party apps. After receiving the code from wechat through programming, the third-party application calls the API and uses the code to exchange the Access Token for web page authorization. Then using the latter, the third-party application calls the API that reads the wechat user’s nickname to obtain the wechat user’s nickname.
Therefore, technically speaking, the dialog box shown above in wechat app has two functions:
(1) Explicitly solicit users’ authorization to access third-party web pages; (2) After the user is authorized, the code generated by wechat will be sent to the third-party application.
Let’s go through the complete implementation process in order.
(1) Click the “Modify” link in the following figure to configure the callback domain name of the third-party application.
After the user clicks “Confirm login” in the wechat app, the code generated by wechat is sent to a third-party app under the domain name.
I developed an application using NodeJS to listen to the code transmitted by wechat. The URL of the application is:
Wechatjerry.herokuapp.com/tokenCallba…
Therefore, the corresponding domain name configuration is as follows:
(2) Before the user accesses the third-party application for the first time, the webpage authorization request window should pop up in the wechat app. The popup of this window requires some configuration.
Wechat official documents give a way, that is, push the following URL to wechat users. After the user clicks, the wechat app will pop up a dialog box for webpage authorization access:
Open.weixin.qq.com/connect/oau…
The ABOVE URL template should be filled with the app ID of the wechat public account and the address of the third-party app to receive the wechat webpage authorization code based on the actual situation.
For my example, the final full URL is:
Open.weixin.qq.com/connect/oau…
When users click the URL in wechat app, they will see the following webpage authorization dialog box:
After the user clicks “Confirm login”, wechat APP will send an automatically generated code to the callback address specified in my previous URL:
Wechatjerry.herokuapp.com/tokenCallba…
In nodeJS applications, in response to HTTP POST requests from tokenCallback:
After obtaining the code, you can use the app ID, app Secret and code to exchange the Access Token for web authorization in the authorizeAndRedirect function:
After getting the Access Token, call the getUserinfo function, use the Access Token and wechat user’s openID, call the API for obtaining wechat user’s personal information, and get the user’s nickname. Print it out in line 68 below, and then in line 70 below, Redirect the nickname to the SAP UI5 application as a URL parameter:
In SAP application UI5 init hook, using jQuery. SAP. GetUriParameters () get, read the incoming url parameter, bind them to within the model name for modelForview MasterTitle fields:
Finally, bind the title property of SAP UI5 page title control of Master List to the above MasterTitle model field.
My wechat nickname null is displayed successfully on the title control of SAP UI5 Master List:
The source code implementation mentioned in this article is on my Github.
The OAuth 2 authentication mechanism mentioned in this article has been widely used in various third-party application authorization login scenarios.
In the next article of this series, Jerry will introduce how to use Redis to store the chat records between users and wechat official accounts. Thanks for reading.
Series directory
(1) Establishment of wechat development environment
(2) How to consume API through wechat public account
(3) After wechat users follow the public account, they will automatically create customer master data in SAP C4C system
(4) How to push changes of SAP C4C master data to wechat official account
(5) How to embed SAP UI5 application in wechat official menu
(6) How to obtain wechat user information through OAuth2 and display it in SAP UI5 application (this article)
(7) Use Redis to store records of conversations between wechat users and public accounts
(8) Map integration of wechat public accounts
(9) How to save the messages sent by wechat users to wechat official accounts in SAP C4C system
(10) How to reply messages directly to subscribers of wechat public accounts in SAP C4C system
More of Jerry’s original articles can be found in “Wang Zixi” :
