H5页面使用微信授权登录开发记录
2023-12-27 15:20:42
流程
1、进入项目
2、跳转微信授权
3、微信授权成功通过redirect_uri
返回本地页面,并且url中带入code
参数
4、通过code
换取 access_token
本地调试准备
1、微信公众平台测试账号
本地调试可以直接使用微信提供的测试账号
2、ngrok内网穿透
微信授权后需要通过redirect_uri
回到我们的项目地址,但是本地调试时是无法被外网访问的,会报错redirect_uri
错误,因此需要使用ngrok
将我们的本地服务变为微信可访问的服务
实践
1、devserve中配置 host: '0.0.0.0'
(为了ip和localhost都能访问,如果项目启动后本就可以ip+localhost访问就不用配置)
2、启动项目,我的地址是0.0.0.0:8080
3、ngrok内网穿透
ngrok.exe http 0.0.0.0:8080
此时,就可以通过https://3676-61-164-41-154.ngrok-free.app
访问本地项目
4、在微信公众平台测试号配置相关信息
授权回调页面域名,注意不需要带https:
5、进入项目后跳转微信授权
window.location.href =
"https://open.weixin.qq.com/connect/oauth2/authorize?appid=" +
this.appId +
"&redirect_uri=" +
encodeURIComponent(this.redirect_uri) +
"&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
redirect_uri
是微信授权后要回到的页面,就是你需要通过ngrok代理的地址
6、微信授权后回到redirect_uri
地址,会携带code
参数
文章来源:https://blog.csdn.net/qq_43223007/article/details/135101342
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!