微信公众号与小程序授权登录流程详解及代码实现指南

2025-03-15
来源:网络整理

这是一个非常古老的话题,用于开发公共帐户。我以前做过一些,但是我写了有关后端接口的文章,我对前端操作的某些过程并不十分清楚,例如非常重要的进入功能和授权过程。

快速注册和认证小程序,官方帐户版本,授权登录过程代码说明

说到授权登录,微信小程序也已授权登录。两者的授权登录过程相似。他们都首先交换代码(用户对当前官方帐户或的唯一标识)和。 **请注意,这与基本支持不同,此处是根据不同用户生成的,每个用户都不同,基本是接口调用的标识。 **然后,前端可以直接获取用户信息(微信头像,昵称,区域和性别信息),并且官方帐号需要通过呼叫接口获取用户基本信息。

基于授权范围(参数),将用户授权分为无声授权(AS)和非详细授权(AS)。无声授权意味着用户无需感知即可授权,但是授权页面只能跳过而不会弹出,并且只能获取用户。非详细授权将弹出授权页面,可以通过获取头像,昵称,性别和位置来获得。此外,即使不关心用户,只要授权其授权,就可以获取信息。

通过公共帐户授权登录的效果可能就像以下内容一样,这意味着,一旦您输入主页(非详细授权),用户授权的弹出窗口就会弹出。

授权主要前端网页的步骤如下

// 授权获取code toRedirect() { let redirect_uri = encodeURIComponent(this.$redirect_uri); let url = this.$auth_url.replace('REDIRECT_URI',redirect_uri); if (this.wechatCode == null || this.wechatCode === '') { window.location.href = url; } else { this.saveOpenID(); } }, // 截取url中的code方法 getUrlCode() { var url = location.search 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换取accessToken和openid最后获取用户信息 saveOpenID() { if(this.wechatCode) { this.getOpenId(); } }, getOpenId() { let url = this.$api_url + this.$access_token_uri + '/' + this.wechatCode; uni.request({ async: false, url: url, method: 'GET', success: (res) => { console.log('getOpenId:',res); this.userOpenid = res.data.data.openid; this.accessToken = res.data.data.access_token; uni.setStorage({ key: 'user_openid', data: this.userOpenid }); this.login(); } }) }, // 获取登录用户信息 login() {

授权开发程序版小程序下载_开发版小程序授权_微信小程序授权开发

let url = this.$api_url + this.$user_info_uri + '/' + this.accessToken + '/' + this.userOpenid; uni.request({ async: false, url: url, method: 'GET', success: (res) => { console.log('login:',res); uni.setStorage({ key: 'user_info', data: res.data.data }) } }) }, onLoad() { if (!this.userOpenid) { this.wechatCode = ''; this.wechatCode = this.getUrlCode().code; this.toRedirect(); }; },

分享