共计 3361 个字符，预计需要花费 9 分钟才能阅读完成。
这是 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, 存储用户和微信公众号的聊天记录，感激浏览。
系列目录
(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 零碎间接回复音讯给微信公众号的订阅者
更多 Jerry 的原创文章，尽在：” 汪子熙 ”:
