关于javascript:微信登录前端开发指南

应用场景

1. 微信公众号内嵌 H5 网页调用微信登录
2. 在微信浏览器中的网页唤起微信登录界面

详情能够查阅微信登录官网文档 链接地址

性能思路

1. 后盾先在微信给开发者提供的测试账号平台上创立利用，并把前台开发同学的微信增加到这个平台中，用于提供测试公众号，平台地址
2. 前台拼装各种微信登录必须的参数，并将页面跳转到微信指定的连贯获取微信登录 code 参数
3. 前台解析返回的链接，获取链接中的参数，并将 code 参数传给后盾

4. 因为后续获取的参数安全等级较高，所以后续的操作均由后盾实现，并将数据存储在服务端

   • 后盾通过 code 参数换取 access_token 参数和 openid 参数并存储在服务端
   • 后盾再通过 access_token 参数和 openid 参数换取用户详细信息，并将这两步包装成接口，让前台调用，返回前端登录状态实现微信登录操作
5. 如果 access_token 参数生效，应用 refresh_token 刷新即可，具体操作查阅文档，个别用不到这步

前端代码

1. 获取 code

function getWXcode() {
    
    // 公众号的惟一标识，找公众号管理员提供
    var APPID = '公众号的 appid';
    
    // 受权后重定向的回调链接地址，要应用 encodeURIComponent()对其进行编码解决
    // !!! 留神回调的域名必须先让公众号管理员增加到平安域名中，否则无奈实现跳转
    var REDIRECT_URI = encodeURIComponent('受权后跳转回的页面');
    
    // 常量，返回类型，填写 code 即可
    var RESPONSE_TYPE = 'code';
    
    // 常量，利用受权作用域
    // snsapi_userinfo（弹出受权页面，可通过 openid 拿到昵称、性别、所在地。并且，即便在未关注的状况下，只有用户受权，也能获取其信息）// snsapi_base（不弹出受权页面，间接跳转，只能获取用户 openid）var SCOPE = 'snsapi_userinfo' || 'snsapi_base';
    
    // 重定向后会带上 state 参数，开发者能够填写 a -zA-Z0- 9 的参数值，最多 128 字节
    // 除了此项是非必须参数，其余都是必须要带的参数
    // 留神！！！该参数通常用于判断跳转回来之前的接口是什么作用，比方用于判断是第一次微信登录还是受权过的疾速微信登录
    var STATE = '能够自定义的返回参数';
    
    // 无论间接关上还是做页面 302 重定向时候，必须带 '#wechat_redirect' 参数
    // 因为受权操作安全等级较高，所以在发动受权申请时，微信会对受权链接做正则强匹配校验，如果链接的参数程序不对，受权页面将无奈失常拜访
    location.href =
        `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${APPID}&redirect_uri=${REDIRECT_URI}&response_type=${RESPONSE_TYPE}&scope=${SCOPE}&state=STATE#wechat_redirect `;

}

2. 解析参数

function parseData() {
    
    // 截取地址栏? 前面的内容
    var search = location.search.slice(1);
    
    // 用 & 标识宰割成数组
    var arr = search.split('&');
    
    // 解决数组转换成对象，并返回
    var result = {};
    arr.forEach(function(item) {var itemArr = item.split('=');
        result[itemArr[0]] = itemArr[1];
    });
}

3. code 传给后盾，后盾实现微信登录后续操作后，返回登录状态提醒前端登录胜利还是失败，而后前台持续后续业务逻辑代码编写