微信公众号h5网页授权登录

微信公众号授权登录

微信公众号h5网页授权登录

因为之前没有做过，所以这个过程也是一个学习的过程。东西是几个月前写的，记录梳理一下，有一些细节想不起来了后边想起来的话再补充。
h5页面授权和小程序授权的道理是一样的，主要是获取code传到后端

官方文档

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

准备

授权域名配置
微信公众号-公众号设置-功能设置

配置好后，在代码中调用授权页面

appid 微信公众号的appid
redirect_url 代表的是用户授权通过之后所跳转的地址
response_type 这个值是固定的为code
scope了 这个如果不想让用户知道直接获取code的话就设置成snsapi_base 如果需要用户同意 那就设置成和我一样的非静默授权snsapi_userinfo

##代码

 	  var code = getUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openid
      var local = window.location.href;
      // 非静默授权
      if (code == null || code === '') {
          window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=appid&redirect_uri=' + encodeURIComponent(local) + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect'
          return
      } else {
      }
      ---------------------------------分割线-------------------------------------------------
      //获取地址栏的参数
     getUrlParam= function (name) {
              var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); 
              var r = window.location.search.substr(1).match(reg);
              if (r != null) return unescape(r[2]); 
              return null;
     }

感悟

有些细节没有想到，想到以后补充