H5获取微信公众号用户openId,用户信息

一共两步:1：用户同意授权，获取code，2：将code值传给后台获取用户openId或用户信息

 一.怎样获取code值

 1.登录微信公众平台后台获取公众号的AppId，设置回调地址。

回调地址设置：开发>接口权限>网页服务>网页授权>修改。并将Mp***.text文件上传至填写域名或路径指向的web服务器的根目录下。

2.根据开发需要，静默授权还是非静默授权

   ① 静默授权：snsapi_base，没有弹窗，只能获取用户的openId。

   ②非静默授权：snsapi_userinfo，有弹框弹出需要用户手动点击确认授权。可以获取openId，用户的头像、昵称等

下图为scope等于snsapi_userinfo时的授权页面

用户同意授权后

如果用户同意授权，页面将跳转至 redirect_uri/?code=CODE&state=STATE。

code说明 ： code作为换取access_token的票据，每次用户授权带上的code将不一样，code只能使用一次，5分钟未被使用自动过期。

3.代码片段

若提示“该链接无法访问”，请检查参数是否填写错误，是否拥有scope参数对应的授权作用域权限。

尤其注意：由于授权操作安全等级较高，所以在发起授权请求时，微信会对授权链接做正则强匹配校验，如果链接的参数顺序不对，授权页面将无法正常访问

const code = this.getParam('code')  // 获取路径中的code
if (code == null || code === '') {//判断未获取过code
  const pathStr = window.location.href
  window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=' + encodeURIComponent(pathStr) + '&response_type=code&scope=snsapi_base&state=1#wechat_redirect';
} else {
  this.getOpenId(code) //把code传给后台获取用户信息
}

function getParam(name) {//获取页面路径的某个字段所对应的参数。
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); 
                var r = str.split("?")[1].match(reg); //匹配目标参数
                if (r != null) {
                    return decodeURIComponent(r[2]);
                }
                return null; //返回参数值
}

如果配置参数一一对应，那么此时已经通过回调地址刷新页面后，你就会看到在地址栏中的code了。

二：前端截取地址栏中的code后通过调接口把code传给后台，后台通过code获取openId和用户头像昵称等信息并返回给前端

代码示例：

function getOpenId (code) {

        $.ajax({ type: 'POST', dataType: 'json', url: 'xxx', data: { code: code }, success: function (res) { if (res.status == -1) { 

} else { 

} } }); }