微信授权微博号 微信浏览器内静默授权登录
下面是好好范文网小编收集整理的微信授权微博号 微信浏览器内静默授权登录,仅供参考,欢迎大家阅读!
特别注意
浏览器直接打开地址,scope只支持snsapi_base,如需使用snsapi_userinfo,需要在公众号内打开。
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html
准备工作
需要申请微信开放平台或者在微信公众平台的账号,获取AppId 和 AppSecret。
开发工具:HBuilderX或者VS Code等均可,以下代码以uniapp为例,工具使用HBuilderX。
正式开始
拼接微信固定格式字符串,打开后微信会在我们自定义的url后面加上code参数,以便获取用户的openId。redirect_uri后面对应的url需要进行encodeURIComponent编码
//固定拼接,替换掉appId和url。redirect_uri后面对应的url需要进行encodeURIComponent编码"https://open.weixin.qq.com/connect/oauth2/authorize?appid=appId&redirect_uri=url&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect"
通过code后台去查询openId,前端保存。
为了方便,将拼好的地址转换成二维码,便于测试。
优化地址
地址太长,难免看着不舒服,我们可以将地址进行优化。具体步骤如下:
1.打开url 例如 https://xxx.xxx.xxx/xxx
2.加载时,判断本地是否有用户的openId,如果有,则不进行下面的操作。
3.如果没有openId,那就是首次进入,则加载上面拼接的字符串。这时微信会在链接后面拼接code参数,我们获取一下。
4.拿到code,传给后台去微信请求openId即可,前端拿到返回的openId存储起来,此时url里是有code的。
5.再次刷新界面,地址和第一步一样 https://xxx.xxx.xxx/xxx,因为本地已经有了缓存,所以逻辑正常进行即可。
6.再次刷新界面是为了让地址简洁,因为地址里有code,我不想让他暴露出去。
7.我们把最初的地址生成一个二维码即可。
具体代码如下:
//初始化时调用this.checkUser();//检测是否获取过openIdcheckUser(){ //获取本地存储的openId var openId = uni.getStorageSync("openId"); if (openId == undefined || openId == "") { //没有缓存用户数据 //如果微信给我们返回了code var code = this.getParam(location.href,"code"); if(code != "" && code.length > 0){ this.loadUserInfo(code); }else{ var url = "按微信要求拼接好的字符串"; //加载链接后微信会返回code window.location.href = url; } }else{ //用户登录成功,本地已经有了用户openId }},//用微信code换用户标识loadUserInfo(wxCode){ //从后台获取openId的网络请求,此处省略…… //获取到openId后,存本地 uni.setStorageSync("openId",openId); var url = "最初的地址" window.location.href = url; }