【微信网页授权】SpringBoot+uniapp实现网页授权获取用户基本信息
JavaDog程序狗JavaDog程序狗 -前言🍊缘由
起因于本狗上一个项目本打算采用微信公众号网页授权登录做用户鉴权,但最终因公众号是未认证的订阅号,无权限获取用户信息,所以改变思路,采用登录注册方式实现用户区分。但在开发中,学习了微信网页授权登录流程,特此分享,带你手把手操作,让我们一起捋清授权的逻辑。
⏲️建议阅读时长约20分钟
🎯主要目标测试公众号实现网页授权并获取用户基本信息灵活掌握微信接口文档,熟练对接相关接口整理授权逻辑,前后端对接熟悉流程
👨🎓试用人群对于微信公众号网页授权流程模糊或初次接触做过相关流程但想回顾熟悉复盘
🎁快速链接公众号:JavaDog程序狗
在公众号,发送【wx】 ,无任何套路即可获得
🚨 切记无权限时调用会提示【微信公众号授权scope参数错误或没有scope权限】,只可在测试公众号进行调试!!!2.开发工具序号分类工具1后端IDEA2前端uniapp3前端微信开发者工具3.接口文档
微信官方公众号文档
4.网页授权获取用户基本信息配置以测试号进行展示操作步骤在公众号左侧菜单【开发工具】=》【公众平台测试帐号】在网页服务-网页账号-修改修改OAuth2.0网页授权【授权回调页面域名】切记不要带http,此处地址填写本地ip即可。可在键盘通过【win+R】,输入【cmd】,确定后输入ipconfig,复制出IPv4地址即可。或者启动uniapp后,控制台打印的地址,以上方法仅限本地调试。🎯 如果看不懂不要划走,下面才是重点讲解
🎯 如果看不懂不要划走,下面才是重点讲解
🎯 如果看不懂不要划走,下面才是重点讲解
前端uniapp中新建授权页
页面进入后,onLoad直接跳转微信接口地址,微信方通过appId获取code,并携带code根据redirect_uri返回到当前页面,此刻地址栏中就包含着code信息跳转前
跳转后
关键代码
//通过微信官方接口获取code之后,会重新刷新设置的回调地址【redirect_uri】,之后会继续进入到onload()方法
location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + appid + "&redirect_uri=" +
local + "&response_type=code&scope=snsapi_userinfo&state=STATE&connect_redirect=1#wechat_redirect""
appid :公众号对应的appId
redirect_uri:页面回跳地址,也就是当前页面的地址,此地址也就是在上方准备4中OAuth2.0网页授权【授权回调页面域名】填入的值。微信根据这个回调地址进行携带code回跳。
其他参数可看官方参数说明
2.步骤二1.后端提供接口,入参为上一步的code,通过code调取微信接口换取access_token。此处后端使用了weixin-java-mp组件,方便对接微信接口。
@Api(tags = "网页授权控制器")
@RestController
@RequestMapping("/login")
public class AuthController {
@Resource
private UserService userService;
@ApiOperation(value = "网页授权获取用户基本信息", notes = "网页授权获取用户基本信息")
@GetMapping
public ResponseData login(@RequestParam String code) throws WxErrorException {
return userService.auth(code);
}
}
2.前端带着code,调用1中的/login接口
const res = await this.$api.login({
code
})
if (!res.success) {
uni.$u.toast(res.message)
return
}
// 用户信息
this.userInfo = res.data;
}
3.步骤三将步骤二后端拿到的access_token,调用微信获取用户信息,将用户信息返回给前端
WxOAuth2AccessToken accessToken;
WxMpUser wxMpUser;
try {
// 获取accessToken
accessToken = wxMpService.getOAuth2Service().getAccessToken(code);
log.info("AccessToken={}" + accessToken);
// 获取用户信息
wxMpUser = wxMpService.getUserService().userInfo(accessToken.getOpenId());
log.info("wxMpUser={}", JSONUtil.toJsonStr(wxMpUser));
} catch (WxErrorException e) {
return ResponseData.error(e.getMessage());
}
return ResponseData.success(wxMpUser);
❌常见错误错误1:redirect_uri 参数错误微信中【OAuth2.0网页授权】-授权回调页面域名配置错误本文虽然篇幅长,但是实现功能简单,主要目的是展示网页授权的流程与思路,对于微信对接,本人建议多查看微信官方文档,写的很详细,通读过几遍后就会对疑问点有些许领悟,希望能对大家有所帮助。
特别申明:本文内容来源网络,版权归原作者所有,如有侵权请立即与我们联系(cy198701067573@163.com),我们将及时处理。