SPA应用公众号授权登录和授权后页面返回的方案

VUE等SPA单页面应用公众号授权登录和授权后页面返回的方案

作者 拓荒 日期 2019-05-31
VUE

以前开发微信公众号授权登录都是由后端来完成，但是最近在开发单页面应用时，页面路由不走后台，在网上查找了一些资料，了解了授权登录的原理，便自己封装的一个前端授权登录的模块。授权登录比较顺利完成了，但是遇见了授权完成后返回页面的问题，由于授权成功后微信会跳转到用户设置的redirect_uri链接，在按返回键返回的时候又会返回到微信授权的链接，造成了死循环。所以经过层层怕坑，决心写下此文章，做个记录。

第一步：用户同意授权，获取code

我是在收到后台返回code值为需要授权登录的时候跳转到登录页面，在登录页面先判断连接中是否有code，如果没有跳转授权链接。
在确保微信公众账号拥有授权作用域（scope参数）的权限的前提下（服务号获得高级接口后，默认拥有scope参数中的snsapi_base和snsapi_userinfo），引导关注者打开如下页面：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。

以上链接中的appid时申请公众号获得的appid，redirect_uri是用户授权登录成功后需要跳转的链接，需要注意的是redirect_uri需要使用 urlEncode 进行处理，其他参数请查看微信官方文档https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140842

第二步：获取授权登录成功跳转链接中的code值

可以使用一下函数获取链接中的所有参数

function getUrlParams(){
    var url = location.search; //获取url携带的参数
    var urlParams = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        var strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
            urlParams[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
        }
    }
    return urlParams;
}

getUrlParams().code便是我们需要得到的内容

第三步：将code通过ajax发送给后台获取后台传递过来的token和其他用户信息

有了code我们就可以发送给后台，后台通过code解析出用户信息并生成用户和用户的token返回给前端，这个时候前端需要将token和用户信息保存下来，我是使用本地存储保存的token，用vuex来保存用户信息。

第四步返回之前的页面

因为跳转授权链接之前我是先跳转下一个专门的登录页面，所按道理说应该向前返回3个页面，分别为：第一次跳转的登录页面，微信授权的页面，微信授权成功后跳转的链接（这里我配置的是登陆页面），故使用 history.go(-3); 返回。这在开发者工具中每什么问题，可以返回之前的页面，但是在手机上却不行，经过尝试发现手机只需要向前返回两个页面，但是考虑为了开发方便或者可能其他的手机或其他版本的微信需要向前返回3个页面，所又想了一方法不管怎么样都能返回到之前的页面的方法，方法就是在登录页面（第一次跳转的页面中判断是否有存储的token，有的话就再返回一次），哈哈，机智，骚操作~~~

总结：
为了方便自己封装了一个模块：

const wxApi = {
    appid:"*****",
    urlencode: function(url){
        url = (url + '').toString();
        return encodeURIComponent(url).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').  
        replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');  
    },
    author: function(redirect_uri){
        redirect_uri = this.urlencode(redirect_uri)
        var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + this.appid + "&redirect_uri=" + redirect_uri + "&response_type=code"  + "&scope=snsapi_userinfo" + "&state=STATE#wechat_redirect";
        window.location.href = url;
    },
    getUrlParams: function(){
        var url = location.search; //获取url携带的参数
        var urlParams = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            var strs = str.split("&");
            for(var i = 0; i < strs.length; i ++) {
                urlParams[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
            }
        }
        return urlParams;
    }
}
module.exports = {
    wxApi
}

使用方法：

  1. 引用模块
import {wxApi} from "../common/wxApi.js"
  1. 判断本地是否有taoke,有的话返回上一页
if(localStorage.getItem('token')){
    history.go(-1);
    return
}
  1. 判断当前页的链接是否有code值
    if(wxApi.getUrlParams().code!=undefined){ //如果获取到了微信code,则执行获取token的接口，拿到token需要往前返回两个页面
        this.getToken(wxApi.getUrlParams().code)
        return
    }
    // 如果没有code则跳转到微信的授权页面
    const redirect_uri = config.apiDomain + "/login";
    wxApi.author(redirect_uri)

总的代码就是：

import {wxApi} from "../common/wxApi.js"

export default {
    data() {
        return {}
    },
    created(){
        if(localStorage.getItem('token')){
            history.go(-1);
            return
        }
        if(wxApi.getUrlParams().code!=undefined){
            this.getToken(wxApi.getUrlParams().code)
            return
        }
        const redirect_uri = config.apiDomain + "/login";
        wxApi.author(redirect_uri)
    },
    methods: {
        getToken(code){
            this.$ajax.get("", {code}, res => {
                if(res.data.code == 1) {
                    localStorage.setItem("token", res.data.token);
                    history.go(-2);
                }
            })
        }
    }
}

完结。

FEATURED TAGS
VUE