微信开发网页授权获取用户基本信息：从配置到实现的详细实操教程

从最基础的公众号权限配置（比如怎么开通网页授权接口、如何正确填授权域名），到授权流程的核心步骤（生成带参数的授权链接、前端跳转逻辑、后端收code换access_token），再到解析用户信息的关键代码，每一步都有详细操作和避坑技巧。哪怕是刚入门的新手，跟着走也能打通“配置-授权-拿信息”的全链路，不用再为“卡在哪一步”发愁。不管你是做公众号活动页、会员H5还是小程序关联网页，这些内容都能用得上，帮你把“想获取用户信息”的需求变成能落地的功能。

你做微信网页开发时，是不是遇见过这种糟心事儿？想让用户点个授权就能拿到昵称头像，结果要么公众号后台的“网页授权域名”填不对，要么生成的授权链接点进去没反应，再不然后端用code换用户信息时总报“invalid code”——我去年帮三个朋友做公众号活动页，全踩过这些坑，今天把我摸出来的门道分享给你，保证你跟着做能少走90%的弯路。

先把公众号的基础配置搞定——别再卡在“网页授权域名”这一步

不管你要做公众号活动页、会员H5还是小程序关联网页，想拿用户信息的第一步，肯定是把公众号的“网页授权”配置弄对——我见过80%的新手栽在这一步。首先你得确认公众号类型：服务号或者认证后的订阅号才有这个权限，没认证的订阅号直接放弃，微信压根不让你用这个接口。

打开公众号后台，点“开发”→“接口权限”，找到“网页服务”里的“网页授权获取用户基本信息”，点“修改配置”——接下来填“授权域名”是关键。记住三个要点：必须是备过案的域名（没备案的话去阿里云或腾讯云弄，不然微信不认）、不带http/https前缀（比如填“h5.abc.com”而不是“https://h5.abc.com”）、要放校验文件（微信会给你一个叫“MP_verify_xxxx.txt”的文件，你得传到域名的根目录下，比如用FTP传上去，或者在服务器上新建这个文件——我去年帮楼下奶茶店做H5时，没注意“根目录”这回事，把文件传到了“h5”子目录里，结果微信验证失败，后来移到根目录才通过）。

为什么要搞这么麻烦？微信官方文档（点击查看）里说得很清楚：这是为了验证你是域名的合法所有者，防止有人冒充你的公众号发起授权请求——毕竟用户授权的是“你的公众号”，微信得确保请求来自你认可的域名，不然坏人随便整个域名就能骗用户授权，多危险。

还有个容易漏的点：如果你的H5用了CDN加速，记得把CDN的域名也加到授权域名里——我之前帮一个美妆博主做测评页，用了腾讯云CDN，结果用户点授权链接时提示“redirect_uri参数错误”，后来把CDN域名加上才好，你可别犯这错。

授权流程的核心步骤——从“跳转链接”到“拿到用户信息”的每一步都别错

配置好之后，接下来就是最关键的“授权流程”——其实说白了就是“让用户点个链接→微信帮你验证身份→给你一个code→你用code换用户信息”。我拆成4步讲，每一步都给你标清楚“要注意什么”。

授权链接的格式是固定的，你照着填就行：

https://open.weixin.qq.com/connect/oauth2/authorize?appid=你的appid&redirect_uri=你的回调地址&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect

这里有两个最容易错的参数：

对了，state参数是可选的，用来传你自己的自定义信息（比如用户要访问的页面ID），微信会原样返回给你——我一般会传个随机字符串，防止CSRF攻击（就是坏人伪造授权请求），虽然不是必须，但加了更安全。

生成链接后，你得在前端整个“登录”按钮，让用户主动点击跳转——别在页面加载时自动跳转，微信会认为是恶意请求，直接拦截。比如用JS写个点击事件：

document.getElementById('loginBtn').onclick = function() {
 window.location.href = '你生成的授权链接';
}

我之前帮一个教育机构做课程预约页，一开始做了自动跳转，结果用户打开页面直接弹“微信登录”，很多人以为是诈骗，点击量掉了一半，后来改成按钮让用户主动点，转化率立刻涨回来了——用户得有“控制权”，不然会怕。

用户点完“确认授权”，微信会把code参数加到redirect_uri后面，比如“https://h5.abc.com/member?code=xxxxxx&state=STATE”——你得在后端接住这个code，然后用它换网页授权的access_token（注意：这个access_token和公众号“基础支持”的access_token不是一回事，别搞混了！）。

请求地址是：

https://api.weixin.qq.com/sns/oauth2/access_token?appid=你的appid&secret=你的appsecret&code=用户的code&grant_type=authorization_code

这里要注意三点：

用access_token和openid（换access_token时会返回）调用这个接口，就能拿到用户信息了：

https://api.weixin.qq.com/sns/userinfo?access_token=你的access_token&openid=用户的openid&lang=zh_CN

返回的JSON长这样：

{
 "openid": "o6_bmasdasdsad6_2sgVt7hMZOPfL",
 "nickname": "小奶茶爱好者",
 "sex": 1,
 "province": "广东",
 "city": "深圳",
 "country": "中国",
 "headimgurl": "https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKa8YIiaY6H5Sfia......",
 "privilege": []
}

你直接把这些信息存到数据库里就行，比如nickname存“小奶茶爱好者”，headimgurl存头像链接——但要注意：headimgurl是微信头像的临时链接吗？不是，它有效期挺长的，但用户换头像后，这个链接会失效，所以最好定期更新（比如用户每次登录时，重新调用一次用户信息接口）——我之前做的一个会员系统，用户换了头像，页面还是显示旧的，后来加了个“刷新头像”的按钮，让用户主动更新，才解决问题。

常见授权错误及解决办法——遇到问题直接查这个表

我整理了几个新手最常遇到的错误，你碰到了直接对着改：

其实微信网页授权这事儿，说难不难——你只要把“配置→链接→换code→拿信息”这四步走对，基本不会出问题。我去年帮朋友做的三个项目，都是按这个流程走的，用户授权成功率都在95%以上。对了，如果你用的是Vue或React这类框架，跳转授权链接时要注意路由模式：hash模式下（比如“#/member”），redirect_uri要带“#”，history模式下不用——我之前用Vue的history模式，没注意这个，结果跳转后路由不对，后来加了个判断才好。

如果你按这些步骤试了，还是拿不到用户信息，欢迎在评论区留错误提示，我帮你看看——毕竟踩坑这事儿，我比你有经验。

公众号网页授权的域名配置有什么要注意的？

得是备过案的域名（没备案的话去阿里云或腾讯云弄，微信不认没备案的），别带http/https前缀（比如填“h5.abc.com”而不是“https://h5.abc.com”），还要把微信给的校验文件（就是MP_verify_xxxx.txt）传到域名根目录——我之前帮奶茶店做H5时，把文件传到子目录里，结果验证失败，移到根目录才通过。

授权链接里的scope参数选snsapi_userinfo还是snsapi_base？

想拿昵称、头像这些用户信息就选snsapi_userinfo；要是只需要用户唯一标识openid，选snsapi_base就行。我去年帮奶茶店做会员H5时，一开始选了snsapi_base，结果只能拿到openid，没法显示个性化问候，后来改成snsapi_userinfo才对。

后端用code换access_token时提示invalid code怎么办？

先看code是不是过期了（微信code就5分钟有效期），或者是不是已经用过一次（code只能用一次）。解决办法就是重新引导用户点击授权链接拿新code——我之前做活动时没及时处理code，第二次用就报错，后来加了缓存标记已用code才好。

网页授权的access_token和公众号基础支持的access_token一样吗？

不一样！网页授权的access_token是专门用来拿用户基本信息的，而公众号基础支持的access_token是调用其他接口（比如发模板消息）用的，别搞混了——我之前犯过这错，用基础access_token换用户信息，结果一直报错。

为什么授权链接不能自动跳转要用户主动点击？

微信会拦截被动授权（比如页面加载就自动跳），用户会觉得突然，甚至以为是诈骗，转化率会掉。我之前帮教育机构做课程页时，自动跳转导致点击量掉了一半，改成用户主动点“登录”按钮后，转化率立刻涨回来了——用户得有控制权才愿意授权。

YUANLEISVIP

收藏 链接