微信网页授权登录的方法

微信网页授权登录官方文档
微信网页授权登录的方法–推荐文章一
微信网页授权登录的方法–推荐文章二

总结：

微信授权方式（scope的属性值控制）：

应用授权作用域，snsapi_base （不弹出授权页面，直接跳转，只能获取用户openid），snsapi_userinfo （弹出授权页面，可通过openid拿到昵称、性别、所在地。并且， 即使在未关注的情况下，只要用户授权，也能获取其信息 ）

• 静默授权
  即scope= scopr_base是静默授权，也就是不弹出页面,直接获取用户信息
• 非静默授权(无需关注公众号，也可获取用户信息关注公众号后会是无感知的，个人比较青睐这种方式)
  -
  scope=scope_userinfo是非静默授权,用户需要同意授权,然后通过获得的openid获取用户的昵称,性别,城市等信息

1、上面已经提到，对于以snsapi_base为scope的网页授权，就静默授权的，用户无感知；
2、对于已关注公众号的用户，如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页，即使是scope为snsapi_userinfo，也是静默授权，用户无感知。

网页授权流程分为四步

1、引导用户进入授权页面同意授权，获取code

说白了就是跳转到微信的一个网址，携带将要授权的微信公众号的appId,另一方个回调URL，其实就是我们当前页面的URL，然后服务端会自动跳转回来，携带了code和state
如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE

// 获取地址栏中的参数
function getUrlParam(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
  var r = window.location.search.substr(1).match(reg);
  // 对字符串值进行解码
  if (r != null) return unescape(r[2]);
  return null;
}
 
function wxLogin(callback) {
  var appId = 'xxxxxxxxxxxxxxxxxxx';
  var oauth_url = 'xxxxxxxxxxxxxxxxxxx/oauth';
  var url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appId + "&redirect_uri=" + location.href.split('#')[0] + "&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect"
  var code = getUrlParam("code");
  if (!code) {
    window.location = url;
  } else {
    $.ajax({
      type: 'GET',
      url: oauth_url,
      dataType: 'json',
      data: {
        code: code
      },
      success: function (data) {
        if (data.code === 200) {
          callback(data.data)
        }
      },
      error: function (error) {
        throw new Error(error)
      }
    })
  }

第2，3步骤其实一般是在服务端进行操作的，第4步是当前端获取code之后，发送网络请求，用于向服务器获取openid,服务端进行2，3步骤操作后响应结果给客户端

2、通过code换取网页授权access_token（与基础支持中的access_token不同）

3、如果需要，开发者可以刷新网页授权access_token，避免过期

4、通过网页授权access_token和openid获取用户基本信息（支持UnionID机制）