前端对接微信公众号网页开发流程，授权对接

2024-05-03 16:57:38

前面讲到前端对接微信公众号网页开发流程，前期配置，本篇文章主要详细介绍关于公众号的授权对接。

一、引入微信js-sdk

在需要调用 JS 接口的页面引入如下 JS 文件

http://res.wx.qq.com/open/js/jweixin-1.6.0.js

如需进一步提升服务稳定性，当上述资源不可访问时，可改访问：

http://res2.wx.qq.com/open/js/jweixin-1.6.0.js

二、引导授权

在调用微信的授权地址之前，需要有几个必要的参数，appid、redirect_uri、response_type、scope、#wechat_redirect，下面的链接是授权地址，下面介绍下几个参数的获取及作用。微信网页授权文档

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect

1.appid
appid一般通过接口获取得到，因为在代码里尽量不要出现明文的appid

2.redirect_uri
redirect_uri为授权后重定向的回调链接地址，也就是微信开发者工具地址栏的地址。

3.scope
scope为应用授权作用域，有两个参数，snsapi_base 和 snsapi_userinfo。
snsapi_base为静默授权只能拿到用户的openid
snsapi_userinfo非静默授权，会弹出授权页面，需要用户主动授权，可以通过openid拿到用户的详细信息，如昵称、性别、所在地等

三、开始授权完整代码

怎么判断用户是否授权呢，我是根据重定向后的地址中是否含有code来作为判断条件的，也可以按照是否获取到用户信息来作为判断条件，下面代码就是完整的授权流程
1.获取redirect_uri

var locationHref = document.location.href;

2.获取地址栏路径参数

// 路径是否存参数
var array = []
var index = locationHref.indexOf("?")
// 如果本地路径存在参数则进行参数解析
if (index != -1) {var objStr = locationHref.substr(index + 1);var obj = objStr.split("&");for (var i = 0; i < obj.length; i++) {array[obj[i].split("=")[0]] = (obj[i].split("=")[1]);}
}

结果

3.判断路径是否含有参数code
判断路径是否含有参数code，如果有代表已经授权，没有则为未授权

if (array.code == undefined) {window.location = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${locationHref}&response_type=code&scope=snsapi_userinfo&state=#wechat_redirect`
}

前端对接微信公众号网页开发流程，授权对接相关推荐

前端对接微信公众号网页开发流程，前期配置
微信公众号网页开发,其实就是我们开发的h5网页需要放到微信浏览器环境中使用,但是需要对接公众号授权,授权之后可以获取到用户的个人信息,以及可以使用公众号提供的一些API,如:图片上传.图片预览.获取位 ...
前端对接微信公众号网页开发流程，JSSDK使用
前面两篇文章讲解了前端对接微信公众号网页开发流程,前期配置和前端对接微信公众号网页开发流程,授权对接,本篇文章讲解关于微信JSSDK的使用,官方文档地址一.通过 config 接口注入权限验证配 ...
微信公众号网页开发——实用真机调试
前言微信公众号网页开发的真机调试一直是很头疼的事情. 原因一微信公众号配置的JS安全域名只有三个,一个大中型的公众号这三个JS安全域名都是生产的域名,不可能预留域名用于开发和调试. 原因二在微信 ...
微信公众号网页OAuth2.0授权登录并获取用户信息（SpringBoot实现）
微信公众号网页OAuth2.0授权登录并获取用户信息(SpringBoot实现) 文章目录微信公众号网页OAuth2.0授权登录并获取用户信息(SpringBoot实现) 准备工作开发思路具体代 ...
php公众号开发配置网页域名,微信公众号网页开发授权配置流程
1.配置 1.1 公众号配置 1.2 开发者账号配置选择开发者工具->web开发者工具->绑定开发者微信账号. 1.3 开发域名配置选择公众号设置->功能设置,根据需求设置:业务 ...
微信公众号H5开发登录授权流程
很久没写博客了,最近实在是太忙,有太多东西想写想记录.今天写个关于微信登录的过程吧,这次项目是我第一次写关于微信的东西,这个登录授权搞了半天.但总算是把流程搞明白了,先附上微信官方文档微信公众平台 ...
有关于微信公众号网页开发的流程（自己的看法）
微信官方文档 (真的很详细) 第一步: 网页授权回调域名网页服务内容这个网页回调域名是非常关键的,后面会讲解这个回调的域名的使用,回调字面意思就是会跳转的. 第二步: 使用微信官方的api进行co ...
微信公众号网页开发：播放视频，在列表中滑动会脱离文档流
项目场景: antd移动端端开发微信公众号移动端网页开发问题描述: video-react有问题,在跑马灯中第一次白屏,在列表中滑动会脱离文档流原因分析: 未知解决方案: 直接上代码 < ...
企业微信公众号网页开发之引入高德地图API
test.jsp 页面文件 WxController.java 后端Controller层代码 WxService.java 后端Service层代码 WxDao.java 后端Dao层代码一.JS ...

最新文章

热门文章