其中,微信授权页是微信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前端交互。
领取专属 10元无门槛券
私享最新 技术干货