位置：广州松河 > 技术支持 > 微信公众号H5页面中获取openId

微信公众号H5页面中获取openId

来源：网络整理时间：2023/2/14 0:38:43 共 3681 浏览

必要条件

    已经认证的公众号（企业号可以，个人号是不能绑定H5的）
    https认证域名，没有认证的域名微信中不能配置回调地址
    微信公众平台认证通过，并创建app

步骤

    获取code （需要配置选取scope=snsapi_base模式，code五分钟过期，使用过一次过期）
    通过code就可以配置参数获取openId（注意这个openId和access_token是一起获取的）

    没错，只需要两部就可以初步获取用户的唯一标识openId，下面介绍具体的配置

详细
1、获取code

这个code只能在微信中发起请求，也就是说使用微信H5发起请求，原因下面介绍，这里先明确这个请求是从微信客户端中通过H5的链接请求的，只能在微信客户端中发起。
1.1参数说明

在这里插入图片描述
1.2拼接后的url

注意：url中的回调地址需要进行urlEcode处理，而且scope=snsapi_base模式不能改，改掉之后第二步只能获取到access_token。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号的应用标识&redirect_uri=回调地址&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect

    1

1.3如何发起url请求code

在我们H5相应界面中js的方法中使用window.location.href发起url请求，再次强调这个请求必须是从**微信的移动客户端（手机）**上发出！

window.location.href = "已经拼接的url"

    1

    1

1.4响应是什么？

redirect_uri/?code=CODE&state=STATE

    1

回调地址+查询字符串（包含code和state），那么接下来的问题是，我们如何接收这个查询字符串中的code呢？目前我是用截取的方式
1.5截取code

从当前地址栏中截取出code

// 从地址栏的url中截取code
            var url_str = location.href // 获取整个地址栏的url_str
            var num = url_str.indexOf("?")
            url_str = url_str.substr(num + 1) // 获取url中的参数
            var arr = url_str.split("&") // 获取url参数数组
            // 获取code
            for(var i=0;i<arr.length;i++){
                num = arr[i].indexOf('=')
                if(arr[i].substring(0, num) == 'code'){
                    this.code = arr[i].substr(num+1)
                }
            }



到此code通过this.code存起来了，用于下一步获取openId使用。
1.6解释为什么必须微信发出

通过url我们不难发现，整个url中只有我们自己公众号app的相关id信息，关于用户的信息并没有拼接到url中，所以我们从浏览器中发起url请求时，微信服务器并不能区分哪一个微信用户发起获取code的请求。而通过微信客户端发起，微信就可以通过微信客户端中的一些默认字段区分用户，并返回用户的code信息。
2、获取openId

公众号获取网页授权access_token。获取code的url中的scope=snsapi_base，则本步骤中获取到网页授权access_token的同时，也获取到了openid，snsapi_base式的网页授权流程即到此为止。
2.1参数说明

在这里插入图片描述
2.2拼接后的url

登录微信公众平台：开发 >> 基本配置 >> 开发者密码

https://api.weixin.qq.com/sns/oauth2/access_token?appid=替换为公众号的标识&secret=公众号的开发者密码&code=CODE&grant_type=authorization_code

    1

现在有了url我们怎么发起请求呢？谁来发这个请求呢？
2.3如何发起请求，谁来发起请求

如何发起请求呢？前端H5不能发么？能！但是不用！原因：用户的access_token和openId我们不希望前端给我们后端发送，很难想象前端被破解之后发送过来千奇百怪的openId,后端又不具备校验能力，只能存储！所以最终我们使用的openId需要在后端服务器上获取，之后发送到前端做本地化存储！
在这里插入图片描述

后端怎么请求这里不重点做介绍，简单说只是写一个接口，对微信服务器发起请求，获取微信服务器的返回值，并对openId做存储，紧接着就要写返回参数，将openId返回给前端。
2.4H5怎么获取openId

H5想要从自己服务器中获取openId想必已经很简单，只需要使用axios向自己后端接口发起请求即可。
总结

至此我们总算是完成了H5获取openId，需要提醒的是这个openId只用作用户的唯一标识，并不能获取用户的头像、用户名等重要信息，如果想要获取重要的用户信息，还需要使用access_token继续请求微信服务器。而且需要注意的是从第一步开始的scope要设置为snsapi_userinfo，才会有后文。具体的还要自己阅读微信官方文档。
参考文档：微信开发文档

版权说明：
本网站凡注明“广州松河原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：C# DataTable导出Excel | ·下一条：H5页面获取微信公众号的openid