Vue实践之微信公众号OpenID获取

其中，微信授权页是微信OAuth2.0网页授权地址，回调页地址是在微信公众号后台绑定的授权回调地址。当微信授权校验参数成功后，将自动跳转到回调页，并附带参数code。在图1中，关键步骤为2和3，因为此两步涉及到跳转到外链并从外链进入到应用；而通过code获取openid，只需要通过http请求将code发送到Token获取地址即可从返回的json中解析出openid即可。由于通过code获取openid需要传入appid和secret等敏感参数，所以此步骤一般是在后端服务中完成。VUE前端与后端建立从code到openid的接口即可。故本文的重点在于如何通过vue获取到code。

之所以关注code的获取是因为在VUE单页面应用中，对内部路由处理得较好，跳转到外链也没有没有问题，但是从外链直接进入到内部路由则不能实现。尤其是当VUE前端应用发布之后，对外暴露的接口只有index.html，且难以获取到url参数信息。

为了解决这一问题，需要通过后端配合VUE前端进行实现。具体而言，是将回调页放在后端，在进入vue前端之前，先进入到后端，由后端跳转到授权页，并由授权页跳转到后端回调页，在后端回调页中，获取到code，并通过cookie保存到vue前端，然后跳转vue前端的index.html，此时，在vue前端即可通过cookie获取到code。具体流程如图2所示。

图2 VUE前端获取code流程图

在图2中，核心思路是通过后端回调页和前端Cookie作为跳板，完成与外链的交互。从而避免了VUE前端与外链交互的复杂性。前端读取Cookie的代码如图3所示。

图3 VUE读取Cookie方法代码

总而言之，VUE获取OpenID的方法是通过OAuth2.0机制实现的，在VUE应用中，核心问题是从微信授权页回调到回调页获取Code。该问题的解决方法是将回调页后置到后端，由后端回调页与微信授权页交互，并通过Cookie与VUE前端交互。