微信公众号h5获取用户openId

参考微信开发文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html

一、获取openId的方法与步骤:

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

微信公众号h5获取用户openId_第1张图片
回调地址设置页面向导:开发>接口权限>网页服务>网页授权>修改。
注意:回调地址中必须为配置好的域名

微信公众号h5获取用户openId_第2张图片
2、用户同意授权,获取code

参考链接(请在微信客户端中打开此链接体验):
scope为snsapi_base
https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx520c15f417810387&redirect_uri=https%3A%2F%2Fchong.qq.com%2Fphp%2Findex.php%3Fd%3D%26c%3DwxAdapter%26m%3DmobileDeal%26showwxpaytitle%3D1%26vb2ctag%3D4_2030_5_1194_60&response_type=code&scope=snsapi_base&state=123#wechat_redirect

具体参数解析如下:
微信公众号h5获取用户openId_第3张图片

如果用户同意授权,加载上面链接将跳转至 redirect_uri/?code=CODE&state=STATE。

3、通过code换取openId

配置的参数要一一对应,获取code,并调用后台接口,把code传给后台

前端具体代码如下:


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试title>
head>
<body>
   <script>
   var STATE = window.location.search.replace('?', '');
   STATE = encodeURIComponent(STATE)
   window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?'+
   'appid=这里写公众号的AppID&redirect_uri=这里写回调页面'+
   '&response_type=code&scope=snsapi_base&state="+ STATE +"#wechat_redirect"'
   script>
body>
html>

直接加载上面这个页面,会回调 redirect_uri参数的地址,这里我写的回调地址就是下面这个页面,所以会直接跳转到如下页面:


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>测试title>
  <script>
    (function (doc, win) {
       var htmlFont = function () {
       var docEl = doc.documentElement, l = docEl.clientWidth, f; f = l / 7.5; docEl.style.fontSize = f + "px" }; htmlFont(); win.addEventListener("resize", htmlFont, false) })(document, window);
  script>
head>
<body>
body>
<script src="js/axios.min.js">script>
<script>
  !function () {
      
    // 地址栏获取参数
    function getQueryParam(key, url) {
      
      var searchStr = url || window.location.search;
      searchStr = url ? decodeURIComponent(searchStr) : searchStr;
      searchStr = searchStr.replace(/^\?/, '');
      var params = searchStr.split('&');
      var paraObj = {
      };
      params.forEach(function (s) {
      
        var ss = s.split('=');
        ss.length && (paraObj[ss[0]] = ss[1])
      })
      return paraObj[key] !== undefined ? paraObj[key] : ''
    }
    var code = getQueryParam('code');
    var state = getQueryParam('state');
    //请求后端接口,根据code获取openId
    axios.get('/pos-coupon/weChat/card/getOpenId?code=' + code).then(function (res) {
      
      if (res.data.code == 200) {
      
        openid = res.data.result.openId;
        openid && getCoupon(openid);
      } else {
      
        oFailContent.innerText = res.data.msg
      }
    })
    //拿到openId后根据具体业务请求接口
    function getCoupon(openid) {
      
      axios.post('/weChat/coupon/send', {
      
        "openid": openid,
      }).then(function(res) {
      
        if (res.data.code !== '200') {
      
          oFailContent.innerText = res.data.msg
        }else{
      
          oFailContent.innerText = res.data.msg
        }
      })
    }
  }()
script>
html>

你可能感兴趣的:(微信公众号h5获取用户openId)