使用uView UI+UniApp开发微信小程序--微信授权绑定和一键登录系统

2021-09-26

在前面随笔《使用uView UI+UniApp开发微信小程序》和《使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转》介绍了微信小程序的常规登录处理和验证码登录处理的一些经验,本篇随笔继续介绍第三种登录方式,微信授权登录。微信授权登录是系统用户表绑定了微信小程序OpenID后,通过前端发起微信的登录授权,顺利获得微信授权后获得code,并在我们自己的服务后台接口通过code解析出用户的OpenId,然后获得对应用户的身份token信息返回给前端,前端完成登录后的跳转处理。

 1、微信授权登录界面

我们前面介绍过常规的账号密码登录处理和验证码登录处理,第三种登录方式微信授权登录也是很常见的,因此整合在系统中方便使用,界面效果如下所示。

这个界面很简单,只需要提供一个按钮触发授权登录即可。

不过,授权登录需要用户登录系统后绑定微信才能进行一键登录,否则是无法识别用户的openid,也就无法一键登录了。

 一旦绑定微信,也就是建立了用户和小程序OpenId 之间的关联,也就可以实现微信授权登录了。授权绑定需要获取用户信息,因此需要发起用户授权的确认操作,如下界面所示。

 如果需要取消,那么随时取消授权也可以,系统提供入口处理即可,一般在同一界面中根据状态绑定或者解绑。

  以上就是大概的界面处理流程,剩下的就是我们需要编码实现相应的逻辑即可。

 

2、微信授权绑定和一键登录系统处理

用户授权绑定或者解绑,我们通过状态来识别提供相关的功能即可,如下界面代码所示。

<view class="bottom">
    <u-button v-if="!vuex_user.openid" shape="circle" type="success" @click="authLogin">授权绑定</u-button>
    <u-button v-else shape="circle" type="error" @click="cancelBind">取消绑定</u-button>
    <u-gap height="20"></u-gap>
    <u-button shape="circle" @click="gotoMyInfo">返回我的页面</u-button>
</view>

微信授权登录的绑定微信操作代码如下所示。

 首先先通过uni.getUserProfile获得用户信息,返回的信息,不包括openid信息,只是一些基础的昵称,头像等信息,如下所示

 

不过它本身的加密信息,是我们可以通过它来在服务器后端解析出来openid的。注意,前端在正式发布后,腾信API是不在授权名单中,因此不能通过纯前端的方式解析openid,除非通过定义云函数方式调用(也就是离不开服务器)。

我们这里通过服务器端进行解析,因此服务端的域名是在授权Https列表中的

一般服务器端的接口顺利获取openid等数据,就直接resolve执行成功的回调操作

服务端直接通过jscode2session的处理即可获取对应的数据了

        public JSCode2SessionResult JSCode2Session(string appid, string secret, string js_code, string grant_type = "authorization_code")
        {
            var url = string.Format("https://api.weixin.qq.com/sns/jscode2session?appid={0}&secret={1}&js_code={2}&grant_type={3}", appid, secret, js_code, grant_type);
            
            var result = WeJsonHelper<JSCode2SessionResult>.ConvertJson(url);
            return result;
        }

如果前端通过下面代码测试非正式的环境,也可以获得openid,正式环境下,小程序不接受https://api.weixin.qq.com的域名的。

 uni.request({
     url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' +
         data.appid +
         '&secret=' +
         data.secret +
         '&js_code=' +
         loginRes.code +
         '&grant_type=authorization_code',
     success: codeRes => {
         // console.log(codeRes)
         resolve(codeRes.data)
     },
     fail: () => {
         var tips = '获取 SesssionKey OpenId 失败'
         vm.$u.toast(tips)
         reject(tips)
     },
 })

一般我们获得用户的openid等详细信息,我们可以把这些信息写入服务器的相关表中,并更新用户的openid即可

服务端接口接受用户数据,并写入或者更新小程序用户表信息,同时更新系统用户的openid即可。

一般前端顺利获得结果,就跳转用户页面即可。

	setTimeout(() => {
		uni.switchTab({ url: '/pages/task/login/myinfo' });
	}, 3000);

 而取消用户绑定,只需要置空服务器端用户表对应记录的openId,并置空本地用户的openid信息即可。

cancelBind() { //取消绑定微信
    var param = {id: this.vuex_user.id}
    this.$u.api.User.CancelBindWechat(param).then(res=> {
        console.log(res)
        if(res.success){
            this.$u.toast('已取消绑定')
            this.$u.vuex('vuex_user.openid', '')
            this.$u.vuex('vuex_user.wechatInfo', null) // 重置微信信息
            this.headimg = '/static/images/wx_ico.png'
        } else {
            this.$u.toast('取消绑定失败')
        }
    })
},

至此,我们就完成了用户绑定和解绑微信的相关操作了。剩下的就是我们需要处理登录界面上一键登录的处理了。

登录的方法代码如下所示。

login() {
    let _self = this;
    // 0. 显示加载的效果
    uni.showLoading({ title: '登录中...' });

    var data = {}
    _self.$u.api.User.wechatlogin(data) //微信登陆授权
        .then(res => {
            console.log(res);
            uni.hideLoading();
            _self.$u.toast('登录成功');
 uni.switchTab({ url: '/pages/task/login/myinfo' });
        })
        .catch(error => {
            console.log(error);
            _self.error = error;
        });
}

也就是我们封装了一个微信授权登录的逻辑,一旦成功返回,就跳转到指定页面上去即可。

其中封装的Promise函数逻辑代码如下所示

 

 先在前端发起登录处理,获得code提交给服务器进行处理验证即可。

大概的步骤分为:

1)通过code 换取 session_key

2)从系统中判断是否存在用户

3)根据用户身份生成tokenresult

代码逻辑如下所示

 

 以上就是微信授权绑定和一键登录系统的相关处理逻辑及代码,其实无论常规的账号密码登陆、短信验证码登陆、微信一键登录,大致的处理过程都大同小异,就是先通过直接或者间接的方式确认用户身份的有效性,然后获得用户的信息,构建返回的token令牌信息给前端使用即可。前端则负责处理结果逻辑,是提示用户还是顺利跳转到默认用户页面即可。

相关文章:

使用uView UI+UniApp开发微信小程序

使用uView UI+UniApp开发微信小程序--判断用户是否登录并跳转