微信网页静默授权

这几天接到了一个h5的新需求，需要重构登录注册流程。说实话，我知道的时候是很懵逼的，因为这个h5项目被我同事誉为“公司最坑的项目”。和我之前了解的h5有点不同，这个项目用户只能在微信打开。我之前没有碰过和微信配置相关的项目。好了，话扯了那么多，直接说下这个项目的基本情况吧。
原先的注册方式有两种方式：
1:域名进入注册页面，也就是http://XXXXX.xx/register
2:邀请链接进入注册页面

注册流程：

域名进入注册页面：
1：微信网页授权，如果用户同意授权，页面跳转至redirect_uri/?code=CODE&state=STATE，拉取用户的code传给后端，后端需要用code去获取access_token，同时判断当前用户是否可以注册。成功的情况下跳转至注册页面，注册完成跳转至登录页面
邀请链接进入注册页面：
1:微信网页授权，如果用户同意授权，页面跳转至redirect_uri/?code=CODE&state=STATE，拉取用户的code和邀请人inviteCode码传给后端，后端需要用code去获取access_token，同时判断当前用户是否可以注册。成功的情况下跳转至注册页面，注册完成跳转至登录页面

登录流程：

1:用户点击链接进入，首先拉取用户信息，会出现通知允许授权页面，
2:授权成功，拿到用户基本信息后，跳转至登录页面

总体的流程已经讲清楚了，但是不结合代码看，还是会很懵。在看代码之前，先看一段官方文档关于微信网页授权是怎么说的。

1:首先如何进入授权页面：
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxf0e81c3bee622d60&redirect_uri=http%3A%2F%2Fnba.bluewebgame.com%2Foauth_response.php&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect，
这里面redirect_uri就是授权成功后回跳的地址，redirect_uri是要前端自己设至，授权成功后你需要跳到哪个页面，比方说，redirect_uri=“http://baidu.com/"，在用户授权成功后，页面会跳转到百度的页面。这也就是为什么，授权成功后，页面会跳到注册或者登录页面，
2:code是如何拿到的：
code是在用户同意授权后，携带在回跳地址里的，例如：http://baidu.com/?code=sdahiwgfibwiu

一般前端需要做的到第二步就可以说拜拜了。里面有些参数还是需要大家仔细去看下，我讲的肯定没有官方讲的好，可以结合我讲的项目情况去看官方文档，这样会理解的更快点。
附上官方文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
附上项目的静默授权的代码：

export default {
    /**
     * 微信登录跳转获取code
     *
     * 请求url参数说明
     * @param {appid} 公众号的唯一标识
     * @param {redirect_uri} 授权后重定向的回调链接地址， 请使用 urlEncode 对链接进行处理
     * @param {response_type} 返回类型，请填写code
     * @param {scope} snsapi_base(只能获取用户openid) snsapi_userinfo(弹出授权页面，可通过openid拿到昵称、性别、所在地)
     * @param {state} 重定向后会带上state参数，开发者可以填写a-zA-Z0-9的参数值
     */
    Login(config = {}) {
        const appid = process.env.VUE_APP_WX_APPID;
        const redirect_uri = config.redirect_uri || window.location.origin + '/login';
        const state = config.state || '1'; // 额外参数
        const scope = 'snsapi_userinfo';
        const data = {
            appid: appid,
            redirect_uri: encodeURIComponent(redirect_uri),
            connect_redirect: 1,
            response_type: 'code',
            scope,
            state
        };
        const params = Object.keys(data)
            .map(function(key) {
                return key + '=' + data[key];
            })
            .join('&');
        window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?${params}#wechat_redirect`);
    }
};

这次需求来的特别突然，我也是战战兢兢的配合后端大佬完成的，重构后的流程，在我这边需要负责的就比较简单，所有的网页授权都在我公司的另一个平台完成的，所以我也算捡了个小便宜。嗯，有写错的地方欢迎指出来，前端小白进阶之路！