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

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

https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html很详细滴~~

页面授权

根据开发需要，静默授权还是非静默授权
① 静默授权：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.页面授权后，跳转会有出现空白情况，时间很短（可优化）

最后编辑于：2020.11.11 10:50:50