微信公众号网页授权

更新日期: 2021-05-24阅读: 3k标签: 公众号

在微信公众号开发时候,一般需要使用到微信登录功能,这里就需要加入微信授权,来获取用户的openid(或unionid),利用openid(或unionid)做唯一的身份识别。下面介绍授权开发的步骤


一、添加业务域名

这是很重要的一步,js安全域名配置配置,添加方式如下:

登录微信公众号平台->开发->接口权限->网页授权(修改),进入后选择“js接口安全域名”进行添加即可。


需要注意两点:

1.端口必须是默认80端口,添加的域名不能带端口号!(这是微信规定的)

2)下载的txt验证文件必须放置在提供的域名目录下。配置好之后,直接浏览器地址栏访问这个路径,能打开就成功了。


二、前端授权获取code

微信授权的第一步,是前端获取微信返回的code值,把code值传递给服务器端才能获取到用户的openid(或unionid)。

那怎么拿到微信返回的code值?

通过window.location.href跳转下面链接进行获取:

https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&state=STATE#wechat_redirect 
//若提示“该链接无法访问”,请检查参数是否填写错误,是否拥有scope参数对应的授权作用域权限。

参数说明:

APPID:公众号的唯一标识,申请公众号已经分配好的;

REDIRECT_URL :  在成功拿到code值,你需要跳转到你项目的路径地址,比如login.html之类的;

SCOPE :有两个固定值:snsapi_base(静默授权),snsapi_userinfo(显式授权) ,两者任选其一;

STATE : 这个参数是自定义,什么值都行,你配置什么值,到时候跳转回来后,原样给你带回来,需要注意的是有格式要求(重定向后会带上state参数,开发者可以填写a-zA-Z0-9的参数值,最多128字节);

静默授权与显式授权的区别:

1.以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的.(静默的另一种:对于已关注公众号的用户,如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页,即使是scope为snsapi_userinfo,也是静默授权,用户无感知。)

2.以snsapi_userinfo为scope发起的网页授权,是用来获取用户的基本信息的。但这种授权首次需要用户手动同意,并且由于用户同意过,所以无须关注,就可在授权后获取该用户的基本信息。

前端获取code的代码

methods: {//(以vue为例)
getCode() { // 非静默授权,第一次有弹框
this.code = ''
var local = window.location.href // 获取页面url
var appid = 'wx65adcf075369****'
this.code = this.getUrlCode().code // 截取code
if (this.code == null || this.code === '') { // 如果没有code,则去请求
window.location.href =
`https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(local)}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`
} else {
// 你自己的业务逻辑
}
},
getUrlCode() { // 截取url中的code方法
var url = location.search
this.winUrl = url
var theRequest = new Object()
if (url.indexOf("?") != -1) {
var str = url.substr(1)
var strs = str.split("&")
for (var i = 0; i < strs.length; i++) {
theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1])
}
}
return theRequest
}
}

代码逻辑是先判断有没有code,没有才去获取,使用encodeURIComponent()对回调url进行编码。


三、后端获取openid(或unionid)

这里一般是有前端传递code给后端,由后端请求微信提供的接口,来获取用户的openid(或unionid)

1.获取openid:

get请求接口链接如下:

https://api.weixin.qq.com/sns/oauth2/access_token?appid=APPID&secret=SECRET&code=CODE&grant_type=authorization_code
参数说明:
appid公众号的唯一标识
secret公众号的appsecret
code填写第一步获取的code参数
grant_type填写为authorization_code

成功返回数据如下:

{ 
"access_token":"ACCESS_TOKEN", //接口调用凭证
"expires_in":7200,//access_token接口调用凭证超时时间,单位(秒)
"refresh_token":"REFRESH_TOKEN",//用户刷新access_token
"openid":"OPENID",//授权用户唯一标识
"scope":"SCOPE"//用户授权的作用域,使用逗号(,)分隔
}

如果你只需要得到opend_id,这里就结束了。如果需要获取unionid则还需要请求下面接口。

2.获取unionid

通过返回的openid和access_token获取用户信息,get请求接口如下:

https://api.weixin.qq.com/sns/userinfo?access_token=ACCESS_TOKEN&openid=OPENID&lang=zh_CN

a:scope为snsapi_userinfo显式授权返回的数据如下:

{
"subscribe": 1,//用户是否订阅该公众号标识,值为0时代表此用户没有关注该公众号
"openid":" OPENID",//用户的标识,对当前公众号唯一
" nickname": NICKNAME,//用户的昵称
"sex":"1",//用户的性别,值为1时是男性,值为2时是女性,值为0时是未知
"language": "zh_CN",//用户的语言,简体中文为zh_CN
"province":"PROVINCE"//用户所在省份
"city":"CITY",//用户所在城市
"country":"COUNTRY",//用户所在国家
"headimgurl": "http://thirdwx.qlogo.cn/mmopen/g3MonUZtNHkdmzicIlibx6iaFqAc56vxLSUfpb6n5WKSYVY0ChQKkiaJSgQ1dZuTOgvLLrhJbERQQ4eMsv84eavHiaiceqxibJxCfHe/46",//用户头像,最后一个数值代表正方形头像大小(有0、46、64、96、132数值可选,0代表640*640正方形头像),用户没有头像时该项为空。若用户更换头像,原有头像URL将失效。
"subscribe_time": 1382694957,//用户关注时间,为时间戳。如果用户曾多次关注,则取最后关注时间
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL",//UnionID 来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序),用户的 UnionID 是唯一的
"remark": "",//公众号运营者对粉丝的备注,公众号运营者可在微信公众平台用户管理界面对粉丝添加备注
"groupid": 0,//用户所在的分组ID(兼容旧的用户分组接口)
"tagid_list":[128,2] //用户被打上的标签ID列表
}

ps:需要获取用户信息,必须使用scope为snsapi_userinfo的方式。

b:scope为 snsapi_base静默授权返回的数据如下:

{
"subscribe": 0,
"openid":" OPENID",
"unionid": "o6_bmasdasdsad6_2sgVt7hMZOPfL"
}


四、unionid与openid的区别

如果开发者拥有多个移动应用、网站应用、和公众帐号(包括小程序),可通过unionid来区分用户的唯一性,因为只要是同一个微信开放平台帐号下的移动应用、网站应用和公众帐号(包括小程序),用户的unionid是唯一的。换句话说,同一用户,对同一个微信开放平台下的不同应用,unionid是相同的。

具体请查看公众号开发文档:https://developers.weixin.qq.com/doc/


链接: https://www.fly63.com/article/detial/10321

推荐几款常用的微信公众号排版工具

作为一个新媒体小编,我们常接触的几个工具,莫过于排版、素材、图片这几个了。今天天天主要是想给大家介绍几款我常用的微信排版工具,希望对大家有用。

微信公众号默认背景为灰色的解决方法

最近公司有一个项目,使用Vue开发微信公众号,开发过程遇到一个问题,即设计图的整体背景是白色的,但是公众号里默认的背景是浅灰色,如果某个页面高度没能占满一屏,就会露出浅灰色的默认背景,会显得很不协调。 使用单纯的CSS没能解决这个问题,在网上查了些资料也没发现特别好的方法,最后还是采用了JS解决这个问题。

Vue微信公众号兼容微信JS-SDK,使用分享等功能

最近项目是基于微信公众号的Vue项目,有一个非常重要的分享功能,不搞不知道一搞不得了,发现vue-router和微信SDK配置有很大的兼容性问题,我们一起一个一个方法、一个一个api尝试才找到解决办法

Node微信公众号开发 cheerio网页抓取和memory-cache缓存模块

运用以上模块,对我个人的公众号做了如下修改:access_token 存储方式由 fs.writeFile 写入本地文件改为利用缓存,由于 wp-json 会导致原站点安全性降低,故数据获取改用 cheerio 爬取网站内容对象获得

公众号网页开发经验总结

用户通过扫码生成带有参数的二维码后可以获得微信的推送,拿到 openid 和订阅状态,然后通过 openid 可以获取 unionid 和微信基本信息,在与我们的数据做一个绑定,然后订阅之后可以获得推送

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!