在微信H5网页中获取用户基本信息和openid

项目需求,需要在h5中获取用户基本信息或是openid,那么我们就需要微信授权(在微信中访问)这种时候要是不明白的要找官方文档

页面授权

根据开发需要,静默授权还是非静默授权
① 静默授权:snsapi_base,没有弹窗,只能获取用户的openId。
②非静默授权:snsapi_userinfo,有弹框弹出需要用户手动点击确认授权。可以获取openId,用户的头像、昵称等
③是需要获取用户基本信息还是只需要获取openid就可以
③前端代码,配置的参数要一一对应,获取code,并调用后台接口,把code传给后台

<script>
  const appid = ******
  const location = window.location.href
  window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid${appid}&redirect_uri=${encodeURIComponent(location)}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`
</script>

注意这里的回调返回的code

1.如果获取用户信息的话就用返回的code去获取access_token,通过access_token调用其他API才可以获取用户的基本信息

<script>
  let url1 = `https://api.weixin.qq.com/sns/oauth2/access_token?appid=${appid}&secret=SECRET_CODE&code=xxxxxx&grant_type=authorization_code`
  //这里返回结果
  let obj = {
    "access_token":"*****",
    "expires_in":7200,
    "refresh_token":"*****",
    "openid":"*****",
    "scope":"snsapi_userinfo"
  }
·
  //拿到access_token后,就可以获取用户的基本信息了
  let url2 = `https://api.weixin.qq.com/sns/userinfo?access_token=${obj.access_token}&openid=${obj.openid}&lang=zh_CN`
  //返回结果
  let  userinfo = {
    "openid":"****",
    "nickname":"***",
    "sex":1,
    "language":"zh_CN",
    "city":"***",
    "province":"***",
    "country":"***",
    "headimgurl":"****",
    "privilege":[]
  }
  
</script>

2.如果获取openid的存到数据库的话:只需要访问这个开放地址就可以获取code,通过code后台换取openid

<script>
  const appid = ******
  const location = window.location.href
  window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid${appid}&redirect_uri=${encodeURIComponent(location)}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`
</script>

以上都需要获取地址中的参数可以封装到公用文件然后再导出引用

<script>
  getUrlParam(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
    let url = window.location.href.split('#')[0]
    let search = url.split('?')[1]
    if (search) {
      var r = search.substr(0).match(reg)
      if (r !== null)
        return unescape(r[2])
      return null
    } else
      return null
    },
   }
</script>
以上是获取的方法。具体的细节还要看项目需求去完善的
  • 请求的参数说明:


    image.png

注意事项

1.公众号必须要通过认证,否则无法获取用户基本信息。
2.公众号需要到“安全中心”设置好白名单,比如后端服务器的外网IP地址,否则没法访问微信接口
3.公众号需要设置好JS接口安全域名和回调域名
4.移动端调试可用微信开发者工具,但记得添加权限
5.页面授权后,跳转会有出现空白情况,时间很短(可优化)

推荐阅读更多精彩内容