

统一声明:
1.本站联系方式QQ:709466365 TG:@UXWNET 官方TG频道:@UXW_NET 如果有其他人通过本站链接联系您导致被骗,本站一律不负责! 2.需要付费搭建请联系站长QQ:709466365 TG:@UXWNET 3.免实名域名注册购买- 游侠云域名 4.免实名国外服务器购买- 游侠网云服务
从最基础的公众号配置(手把手教你设置授权回调域名),到授权流程的全步骤拆解(讲清楚用户点授权、后端拿access_token、拉取用户信息的每一步),再到前端跳转代码、后端接口的具体实现(附关键代码片段),甚至连“回调域名校验失败”“access_token过期”这些常见坑都给了你避坑技巧。不管你是刚入门的新手,还是卡壳的老开发者,跟着这篇超详细的步骤走,都能快速搞定微信网页授权获取用户基本信息的需求,再也不用到处查零散资料踩坑了。
你有没有过做微信网页开发时,卡在“获取用户基本信息”这一步?比如公众号后台配置回调域名一直提示失败,或者用户点了授权却拿不到昵称头像?我去年帮三个朋友做微信项目,全遇到过这些问题——有的是把域名填成带http的,有的是分不清静默和非静默授权,还有的是代码里参数写错了。今天这篇教程,我把自己踩过的坑全揉进去,从配置到代码,一步一步给你讲清楚,就算你是刚入门的新手,跟着做也能搞定。
先把公众号的基础配置搞对——别再踩回调域名的坑
要做网页授权,第一步得把公众号的“网页授权域名”配置好——这是最基础的,错了后面全白搭。我先给你讲怎么找这个配置:登录微信公众号后台,点左侧“设置与开发”→“公众号设置”→“功能设置”,往下翻就能看到“网页授权域名”,旁边有个“修改”按钮。
接下来填域名要注意三个坑:
第一个坑,域名必须是“裸域名”或者“子域名”,不能带http://或https://。比如你想让https://m.xx.com这个域名能用,直接填m.xx.com就行,别加https://;要是你填的是xx.com,那所有子域名(比如m.xx.com、shop.xx.com)都能用——但前提是每个子域名的服务器都要放校验文件。
第二个坑,校验文件要上传到服务器的根目录。点“修改”后,微信会给你一个.txt文件(比如MP_verify_XXXXXX.txt),你得把这个文件传到你填的域名的根目录下——比如你填的是m.xx.com,就传到m.xx.com的根目录,这样微信访问http://m.xx.com/MP_verify_XXXXXX.txt才能拿到文件。我之前帮朋友配置时,他把文件传到了子目录(比如m.xx.com/static),结果校验一直失败,后来改成根目录就好了。
第三个坑,服务器要支持http访问。微信校验文件时用的是http请求,哪怕你网站用的是https,也得确保http能访问到校验文件——比如你可以在服务器上配置80端口(http)指向根目录,或者让https自动跳转http,但校验文件必须能通过http拿到。
对了,要是你用的是云服务器(比如阿里云、腾讯云),记得要开80端口的防火墙——我之前帮一个餐饮商家配置时,他的服务器没开80端口,微信一直访问不到校验文件,后来在安全组里加了80端口的规则就解决了。
搞懂授权流程——别再分不清静默和非静默
很多人刚开始做的时候,根本分不清“静默授权”和“非静默授权”,我举个生活里的例子你就懂了:
其实不管是哪种授权,流程都是“用户点链接→微信授权→跳回你的域名→拿code换信息”,我给你拆成5步,用大白话讲清楚:
我把两种授权方式做了个对比表,你一看就明白:
授权类型 | 用户感知 | 获取信息 | 适用场景 |
---|---|---|---|
静默授权(snsapi_base) | 无弹框,直接跳转 | 仅openid | 无需用户信息的场景(如判断用户是否已注册) |
非静默授权(snsapi_userinfo) | 弹框需点“允许” | openid、昵称、头像、性别等 | 需要用户信息的场景(如会员系统、个性推荐) |
这里要注意两个踩过的坑:
代码实现——前端后端都给你写好关键片段
讲完配置和流程,终于到代码了——我不给你甩完整的项目,只写最关键的片段,你把这些片段粘到自己的项目里,改改参数就能用。
前端:构造授权链接(最核心的一步)
前端的任务就是生成那个“能触发授权的链接”,我给你写个可直接复制的示例,你把里面的参数换成自己的就行:
// 替换成你的参数
const appid = "你的公众号AppID"; // 公众号“开发→基本配置”里找
const redirectUri = encodeURIComponent("你的回调地址"); // 比如https://www.xx.com/callback,要urlencode
const scope = "snsapi_userinfo"; // 非静默授权(要用户信息),想静默就改成snsapi_base
const state = Math.random().toString(36).substr(2, 10); // 随机数,防止伪造请求
// 构造授权链接
const authUrl = https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${redirectUri}&response_type=code&scope=${scope}&state=${state}#wechat_redirect
;
// 让用户点击这个链接,比如挂在按钮上
document.getElementById("authBtn").onclick = () => {
window.location.href = authUrl;
};
这里要注意两个细节:
后端:拿code换用户信息(以PHP为例)
后端的任务是“接收code→换access_token→拉用户信息”,我用PHP写个示例(其他语言比如Node.js、Java逻辑完全一样):
// 回调接口:https://www.xx.com/callback
session_start(); // 用来存state
//
接收微信传过来的code和state
$code = $_GET['code'] ?? '';
$state = $_GET['state'] ?? '';
//
验证state(防止伪造请求)
if (empty($code) || empty($state) || $state != $_SESSION['wx_state']) {
die('参数错误,请重新授权');
}
//
用code换access_token
$appid = "你的AppID";
$appsecret = "你的AppSecret"; // 公众号“开发→基本配置”里找
$tokenUrl = "https://api.weixin.qq.com/sns/oauth2/access_token?appid={$appid}&secret={$appsecret}&code={$code}&grant_type=authorization_code";
// 发送HTTP请求( 用curl,比file_get_contents稳定)
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $tokenUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$tokenResponse = curl_exec($ch);
curl_close($ch);
$tokenData = json_decode($tokenResponse, true);
// 如果出错,打印错误信息
if (isset($tokenData['errcode'])) {
die("获取access_token失败:" . $tokenData['errmsg']);
}
//
用access_token拉取用户信息
$accessToken = $tokenData['access_token'];
$openid = $tokenData['openid'];
$userInfoUrl = "https://api.weixin.qq.com/sns/userinfo?access_token={$accessToken}&openid={$openid}&lang=zh_CN";
// 发送请求
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $userInfoUrl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$userResponse = curl_exec($ch);
curl_close($ch);
$userInfo = json_decode($userResponse, true);
//
处理用户信息(比如存数据库)
if (isset($userInfo['nickname'])) {
// 昵称可能有表情,用utf8mb4编码存数据库
$nickname = $userInfo['nickname'];
$avatar = $userInfo['headimgurl']; // 头像地址(最后加/0是小图,/132是大图)
$gender = $userInfo['sex']; // 1男,2女,0未知
$country = $userInfo['country']; // 国家
$province = $userInfo['province']; // 省份
$city = $userInfo['city']; // 城市
// 这里可以把信息存到数据库,比如:
// $db->query("INSERT INTO users (openid, nickname, avatar) VALUES ('$openid', '$nickname', '$avatar')");
echo "获取用户信息成功:
昵称:{$nickname}
头像:
";
} else {
die("获取用户信息失败:" . $userInfo['errmsg']);
}
这里要注意三个踩过的坑:
最后我再提醒你两个“必做的测试”:
如果你按这些步骤做了,应该就能搞定“微信网页授权获取用户基本信息”了——要是遇到问题,比如code拿不到、access_token报错,你可以先检查这几点:
要是还解决不了,欢迎评论区留个言,把你的问题描述清楚,我帮你看看;要是成功了,也记得回来告诉我,让我开心一下——毕竟帮人解决问题,比自己做项目还爽!
公众号网页授权域名校验总失败,可能是哪里错了?
首先看你填的域名是不是带了http://或者https://,得填裸域名(比如m.xx.com这种没有协议头的);然后校验文件是不是传对位置了,得放到域名的根目录下,别往子文件夹(比如/static)里塞,不然微信访问不到;还有服务器的80端口有没有开,微信校验用的是http请求,没开的话肯定拿不到校验文件,我之前帮朋友弄的时候就踩过这个坑。
静默授权和非静默授权有啥区别?我该选哪个?
静默授权不会弹框,用户压根没感觉,只能拿到openid(微信用户的唯一标识),像微信读书网页版直接进书架那种场景就用这个;非静默授权会弹“允许获取你的头像昵称”的框,得用户点“允许”才能继续,能拿到昵称、头像、性别这些基本信息,适合需要用户信息的场景比如会员系统或者个性推荐。选的时候看你需不需要用户的头像昵称,要的话用非静默,不用的话用静默。
code拿不到或者用一次就失效了,是怎么回事?
code有两个“小规则”得注意:一是只能用一次,用了就废了,你要是存起来想重复用肯定报错;二是有效期只有5分钟,过了就没用了。还有得确保你授权链接里的redirectUri是对的,得是你配置的网页授权域名下的地址(比如你填的是www.xx.com,redirectUri就得是https://www.xx.com/…),不然微信不会把code传回到你的回调接口。
access_token过期了,要不要让用户重新点授权?
不用折腾用户!你之前拿code换access_token的时候,会一起拿到一个refresh_token(有效期30天),用这个refresh_token就能刷新access_token,刷新后的access_token又能管用2小时,用户完全没感觉。我之前帮餐饮商家做项目时,就用这个方法避免了让用户重复点授权,体验好很多。
用户昵称里的表情存到数据库变成问号了,咋解决?
那是因为你数据库用的是utf8编码,utf8存不了表情符号(比如🍓、🎉这种),得把数据库、表还有对应的用户信息字段都改成utf8mb4编码,这样带表情的昵称就能正常存了。我之前帮朋友存昵称的时候就踩过这个坑,他的数据库是utf8,结果“小草莓🍓”变成了“小草莓??”,改成utf8mb4后就好了。
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,请使用WINRAR解压,如遇到无法解压的请联系管理员!
8. 精力有限,不少源码未能详细测试(解密),不能分辨部分源码是病毒还是误报,所以没有进行任何修改,大家使用前请进行甄别!
站长QQ:709466365 站长邮箱:709466365@qq.com