微信公众号网页授权

第一次接触微信公众号的开发，被各种问题折腾，这里做个记录。

本文大纲如下：

1. 业务需求
2. 为什么要进行微信公众号网页授权
3. 微信公众号网页授权步骤
4. 注意事项
5. 详细授权代码

1.业务需求

因为我这个项目的业务需求是，根据用户的openid来判断用户是否已经绑定过我们平台的账号，如果已经绑定就直接进入项目首页，如果没有绑定过那么先去登录页面绑定账号。所以我们先要获取到用户的openid，如何获取用户的openid呢，这里就涉及到微信公众号的网页授权问题了。因为第一次接触微信公众号的开发，被这个授权问题折腾了好久，所以下面将详细的讲述一下授权的过程，可能会比较啰嗦。但是都是比较有用的信息。

2.为什么要进行微信公众号网页授权

关于为什么要进行微信公众号网页授权呢？这个问题微信开发文档有详细说明。

在微信中打开第三方的网页，我们可以通过微信网页授权的方式，来获取用户的基本信息，从而实现进一步的我们的业务逻辑。

嗯，就这一句话，就是这么傲娇，因为我们要判断用户是否绑定过我们平台的账号，所以我们需要获取当前微信的openid，每个微信用户的openid是唯一的。拿到它我们就可以进行判断了。

3.微信网页授权的的步骤

1.进入微信公众平台——公众号设置——功能设置中找到“网页授权域名”，在这里填写我们部署的项目的域名。

在填写域名之前我们可以看到有一个txt文件，我们需要先把这个文件放置在项目部署的域名根目录下，记住是根目录。然后填写我们项目部署的服务器的域名，这里的域名记住不要加http或者https，而且微信公众号的网页授权域名必须是80或者443端口，因为没有仔细看文档，折腾了好久，汗颜。

2.引导用户进入
https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirec

进入这个页面的目的，就是为了拿到微信授权的code，有了这个code我们就可以把它发送给后台取得openid啦～

其中scope表示应用权限作用域，值有两种，一种是snsapi_userinfo（非静默授权，也就是说会有授权页面，需要用户点击确认授权），一种是snsapi_base（静默授权，也就是说用户没有感知），我这里用的是非静默授权，关于这两种授权方式的区别这里不多做说明，文档上有详细介绍。

4.注意事项

• 需要注意的第一点：

这里重点强调一下redirect_uri，这个参数表示的是获取到code值之后的回调地址，也就是说我们跳转到微信的这个地址进行授权拿到code之后，跳转回到我们项目的地址。所以这里是可以填详细路径的，请注意这里的域名一定要与我们在微信公众号后台填写的网页授权域名一致，并且要填写全域名，http://等协议一定要带上。

• 需要注意的第二点：

我们微信公众号后台中填写的网页授权域名必须是80或者443端口，这是微信的规定，因为我在项目中最开始用的8082端口号，导致一直提示10003，redirect_uri域名与后台配置不一致的错误。又是好一顿折腾。

获取到code之后，我们就可以通过请求后台的接口获取用户的openid了，虽然前端拿到code之后也可以获取openid，但是由于微信公众号有以下提示

尤其注意：由于公众号的secret和获取到的access_token安全级别都非常高，必须只保存在服务器，不允许传给客户端。后续刷新access_token、通过access_token获取用户信息等步骤，也必须从服务器发起。

因此我们还是通过向后端请求接口的形式来获取openid。

5.详细授权代码

下面贴出的授权的详细代码

mounted() {
    this.getUrlCode();
},
methods: {
    ...mapMutations([
        'SET_USER_INFO'
    ]),
    getUrlCode() {
         //getUrlParams是封装的方法，用于截取当前地址栏中的参数
        const code = getUrlParams('code'); 
        if (code == null || code == '') {
            this.getWxCode(); //进入微信授权页面获取code
            return false;
        } 
         //获取到code之后就可以请求后台接口获取OpenId了 因为接口参数需要token 我们先取token
        this.code = code;
        this.GetToken();
    },
    getWxCode() {
        const AppId = this.AppId;
        let state = '123';
        let redirectURL = encodeURIComponent(window.location.href);
        let base = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=`;
        window.location.href = base + AppId +
            `&redirect_uri=` + redirectURL + 
            `&response_type=code&scope=snsapi_base&state=STATE&connect_redirect=1#wechat_redirect`;
    },
    GetToken() {
        GetToken(this.tokenParams).then(data => {
            if (!data.iserror) {
                utils.setSession('token', data.data.access_token);
                 //拿到token啦 可以通过code获取OpenId了
                this.GetWxOpenId();
            }
        })
    },
    GetWxOpenId() {
        GetWxOpenId({Code:this.code}).then(data=>{
            if(!data.iserror) {
                this.OpenId = data.data.openid;  //获取到openid啦
                utils.setSession('OpenId',data.data.openid);
                this.GetCode()  //通过openid判断用户是否绑定平台账号然后跳转到对应的页面
            }
        })
    },
    GetCode() {
        GetCode({
            OpenId: this.OpenId
        }).then(data => {
            if (!data.iserror) {
                let fullpath = this.$route.query.redirect;
                if(fullpath) {
                    utils.setSession('Code', data.data.Code); //将Code存入到header中
                    this.SET_USER_INFO(data.data)
                    this.$router.push(this.$route.query.redirect);
                }else{
                    this.$router.push({path:'/home'});
                }
            }
        })
    },
}

点击下方的阅读原文，就可以看到微信开放文档关于微信公众号网页授权的内容啦！