微信公众号h5获取用户openId的方法和步骤

野性酷女 2021-07-26 21:29 1445阅读 0赞

# 微信h5静默、非静默授权获取用户openId的方法和步骤: #

### 一、openId是什么？ ###

openId是用户在当前公众号下的唯一标识（‘身份证’），就是说通过这个openId，就能区分在这个公众号下具体是哪个用户。

二、openId有什么用？

假如用户A在当前公众号下购买了一件商品，用户的下单信息肯定要存储到后台数据库，那根据什么进行存储呢？openId是用户在当前公众号下的唯一标识，通过openId和用户的下单购买信息进行键值对的数据绑定。那么我要查询该用户购买过什么商品，就能够通过openId去查询，并且数据是唯一的，不会和另外的用户数据有冲突。

拓展：UnionID：一个商家或公司可能会有多个公众号，假如用户A同时都关注了这个公司下面的三个公众号，那么这个用户就会有三个openId(一个公众号就对应一个openID)。如果作为开发者的我们，要对这个用户在这三个公众号下消费的数据进行汇总，我怎么获取到这三份数据（同一用户的）？答案是 UnionId，微信开发者文档：如果开发者拥有多个移动应用、网站应用和公众帐号，可通过获取用户基本信息中的unionid来区分用户的唯一性，因为同一用户，对同一个微信开放平台下的不同应用（移动应用、网站应用和公众帐号），unionid是相同的。就是说如果要获取用户在同一公司不同公众号下的数据，后台表结构不但要关联openId,还要关联UnionId。

三、怎么获取openId？

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

![70][]

回调地址设置页面向导：开发>接口权限>网页服务>网页授权>修改。开发的项目需要放到已经解析好服务器域名的服务器下，同时把Mp\*\*\*.text文件放到服务器根目录下，此时你的服务器必须能联通外网也就是有公网IP,并且80端口是打开的，可以使用阿里云等服务器，默认配置就可以了。

![70 1][]

（二）根据开发需要，静默授权还是非静默授权

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

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

![70 2][]

（三）前端代码，配置的参数要一一对应，获取code，并调用后台接口，把code传给后台

![70 3][]

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

redirect\_uri，这个的意思是：授权完成后再重新回到当前页面（又刷新了一次页面）

getUrlParam的方法，可以百度下，就是获取页面路径的某个字段所对应的参数。

![70 4][]

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
      }

![70 5][]

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

![70 6][]

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

为什么，前端不能一起把获取code和获取openId的操作一并做了，还要请求后台，让后台获取openId？

![70 7][]

（五）后台通过 code、AppSecret（公众号平台后台取得）请求微信链接获取openId

![70 8][]

![70 9][]

![70 10][]

（六）通过openId做用户的数据绑定或查询等操作

前后端都获取了openId后，就能通过openId做用户数据的绑定和查询了。

**完整案例：**

// 强制关注公众号，获取openid
    getCode = function () {
        if (sessionStorage.getItem("openid")&&sessionStorage.getItem("openid")!="undefined") {
            return false;
        }
        var code = getUrlParam('code') // 截取路径中的code，如果没有就去微信授权，如果已经获取到了就直接传code给后台获取openId
        var local = window.location.href;
        var APPID = 'xxx';
        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_base&state=#wechat_redirect'
        } else {
            getOpenId(code) //把code传给后台获取用户信息
        }
    }
    //把code传给后台,得到openid
    getOpenId = function (code) {
        $.ajax({
            type: 'POST',
            dataType: 'json',
            url: 'xxx',
            data: { code: code },
            success: function (res) {
                if (res.status == -1) {
                    // 提示没有关注公众号 没有关注公众号跳转到关注公众号页面
                    console.log('您还未关注公众号喔');
                    //二维码弹窗
                    $('.openPopup').click();
                    return;
                } else {
                    // 本地存储这个openid，并刷新页面
                    sessionStorage.setItem("openid", res.data.openid);
                    location.reload();
                }
            }
        });
    }
    //获取地址栏的参数
    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;
    }
    //页面执行调用
    getCode();

[70]: /images/20210726/cbbe1f11c97148cf906dab924a3d999a.png
[70 1]: /images/20210726/c3dded708ea2471a8a596e57188e51b2.png
[70 2]: /images/20210726/d03a8ad967e340eab33ac3a7f6beb90d.png
[70 3]: /images/20210726/2d9b525a4b064e448e416722fc57ef95.png
[70 4]: /images/20210726/f4f4103f24a04b9b9994e4fce559d3c1.png
[70 5]: /images/20210726/9a2ed23563ed4db8b40aa745b87a4e83.png
[70 6]: /images/20210726/e8b3d448b5f64afa9ed2440ff97f21b9.png
[70 7]: /images/20210726/2d0783135b7c47baaca8e28571784525.png
[70 8]: /images/20210726/e8370b3274754e0db7b3c724889f114d.png
[70 9]: /images/20210726/cf7073c162f94da9ae291ad3f92d3464.png
[70 10]: /images/20210726/75b9fd2f4c9c4b96be3e8013a91117ed.png