一共两步:1:用户同意授权,获取code,2:将code值传给后台获取用户openId或用户信息
一.怎样获取code值
1.登录微信公众平台后台获取公众号的AppId,设置回调地址。
回调地址设置:开发>接口权限>网页服务>网页授权>修改。并将Mp***.text文件上传至填写域名或路径指向的web服务器的根目录下。
2.根据开发需要,静默授权还是非静默授权
① 静默授权:snsapi_base,没有弹窗,只能获取用户的openId。
②非静默授权:snsapi_userinfo,有弹框弹出需要用户手动点击确认授权。可以获取openId,用户的头像、昵称等
下图为scope等于snsapi_userinfo时的授权页面
用户同意授权后
如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE。
code说明 : code作为换取access_token的票据,每次用户授权带上的code将不一样,code只能使用一次,5分钟未被使用自动过期。
3.代码片段
若提示“该链接无法访问”,请检查参数是否填写错误,是否拥有scope参数对应的授权作用域权限。
尤其注意:由于授权操作安全等级较高,所以在发起授权请求时,微信会对授权链接做正则强匹配校验,如果链接的参数顺序不对,授权页面将无法正常访问
const code = this.getParam('code') // 获取路径中的code if (code == null || code === '') {//判断未获取过code const pathStr = window.location.href window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=APPID&redirect_uri=' + encodeURIComponent(pathStr) + '&response_type=code&scope=snsapi_base&state=1#wechat_redirect'; } else { this.getOpenId(code) //把code传给后台获取用户信息 }
function getParam(name) {//获取页面路径的某个字段所对应的参数。
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = str.split("?")[1].match(reg); //匹配目标参数
if (r != null) {
return decodeURIComponent(r[2]);
}
return null; //返回参数值
}
如果配置参数一一对应,那么此时已经通过回调地址刷新页面后,你就会看到在地址栏中的code了。
二:前端截取地址栏中的code后通过调接口把code传给后台,后台通过code获取openId和用户头像昵称等信息并返回给前端
代码示例:
function getOpenId (code) {
$.ajax({ type: 'POST', dataType: 'json', url: 'xxx', data: { code: code }, success: function (res) { if (res.status == -1) {
} else {
} } }); }