关于oauth:SAP系统和微信集成的系列教程之六如何通过OAuth2获取微信用户信息并显示在SAP-UI5应用中

这是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, 存储用户和微信公众号的聊天记录，感激浏览。