前言

在微信客户端中访问第三方网页,公众号可通过微信网页授权机制,来获取用户基本信息,进而实现业务逻辑。

关于公众号网页授权前期准备:

1.微信公众号开发,首先要搞一个公众号,开发阶段可以申请一个公众平台测试账号。
(进入到微信公众公众平台,找到开发者工具,点开公众平台测试账号)

2.进入测试平台账号后台,找到体验接口权限表,配置授权回调页面域名。
(微信授权登录成功后会回调一个页面,此页面必须在此域名下)

3.记录一下appID和appsecret

授权登录:

微信公众平台技术文档:https://mp.weixin.qq.com/wiki” />{console.log(“token”,res)if(res.code == 1){//缓存拿到的数据uni.setStorageSync(‘token’, res.data.userinfo.token);uni.setStorageSync(“userInfo”,res.data.userinfo);this.user =res.data.userinfo;}})},

关于网页授权的两种scope的区别说明

1、以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的。用户感知的就是直接进入了回调页(往往是业务页面)

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

3、用户管理类接口中的“获取用户基本信息接口”,是在用户和公众号产生消息交互或关注后事件推送后,才能根据用户OpenID来获取用户基本信息。这个接口,包括其他微信接口,都是需要该用户(即openid)关注了公众号后,才能调用成功的。

关于特殊场景下的静默授权

1、上面已经提到,对于以snsapi_base为scope的网页授权,就静默授权的,用户无感知;

2、对于已关注公众号的用户,如果用户从公众号的会话或者自定义菜单进入本公众号的网页授权页,即使是scope为snsapi_userinfo,也是静默授权,用户无感知。

具体而言,网页授权流程分为四步:

1、引导用户进入授权页面同意授权,获取code

2、通过code换取网页授权access_token(与基础支持中的access_token不同)

3、如果需要,开发者可以刷新网页授权access_token,避免过期

4、通过网页授权access_token和openid获取用户基本信息(支持UnionID机制)

步骤:

  1. 如果用户同意授权,页面将跳转至 redirect_uri/?code=CODE&state=STATE。拿到code传给后端获取用户信息

    //获取url中的searchlet search = location.search.slice(1);let arr = search.split("&");let result = {};arr.forEach(function(item){let itemArr = item.split('=');result[itemArr[0]]=itemArr[1];})if(result.code){//调用后端接口getUserInfo();}

常见问题:

  1. 一般情况下是授权回调地址和授权回调页面域名不匹配导致的。

附源代码:

登录按钮:

业务逻辑: