一键登录与绑定微信的方法

菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技

一键登录与绑定微信的方法

前言：

微信授权登录是指系统用户表绑定微信小程序后，通过前端发起微信登录授权。 成功获取微信授权后，获取到code一键登录与绑定微信的方法，通过我们自己的服务后端接口中的code来解析用户，然后获取对应用户的身份token信息返回给前端，前端完成登录后跳转处理。

1.微信授权登录界面

之前我们介绍过常规的账户密码登录处理和验证码登录处理。 第三种登录方式也是很常见的微信授权登录，所以集成到系统中，方便使用。 界面效果如下。

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

但授权登录需要用户登录系统并绑定微信后才能一键登录。 否则无法识别用户，无法一键登录。

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

如需取消，您可以随时取消授权。 系统只需要提供入口处理。 一般情况下，可以根据同一界面下的状态进行绑定或解除绑定。

以上是粗略的接口处理流程。 剩下的就是我们需要编写代码来实现相应的逻辑了。

2.微信授权绑定及一键登录系统处理

如果用户授权绑定或解除绑定，我们可以通过状态来识别并提供相关功能，如下接口代码所示。

    授权绑定
    取消绑定
    
    返回我的页面

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

首先通过uni获取用户信息。 返回的信息不包含信息，只包含一些基本的昵称、头像等信息，如下图

但其自身的加密信息可以通过它在服务器后端进行解析。 注意，前端正式发布后，腾讯API不在授权列表中，因此无法通过纯前端方法解析，除非通过定义云函数来调用（即不能分离来自服务器）。

这里我们通过服务器端进行解析，所以服务器端的域名在授权的HTTPS列表中。

一般情况下，如果服务器端接口成功获取到其他数据，会直接执行成功的回调操作。

服务器可以直接通过处理得到相应的数据。

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.ConvertJson(url);
            return result;
        }

如果前端通过以下代码测试非正式环境，也可以获取正式环境小程序不接受的域名。

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)
     },
 })

一般情况下，当我们获取到用户的详细信息后，我们可以将这些信息写入到服务器的相关表中，并更新用户的信息。

服务器接口接受用户数据uni-app开发微信小程序，写入或更新小程序用户表信息，同时更新系统用户。

一般情况下，如果前端成功获取到结果，直接跳转到用户页面即可。

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

如需取消用户绑定，只需清空服务器端用户表中的相应记录，并将本地用户信息清空即可。

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;
        });
}

也就是说我们封装了一个微信授权登录逻辑。 一旦成功返回，就会跳转到指定页面。

封装后的功能逻辑代码如下：

首先在前端发起登录流程，获取代码并提交给服务器进行处理和验证。

大致步骤分为：

1）通过代码兑换

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

3）根据用户身份生成

代码逻辑如下

以上是微信授权绑定及一键登录系统的相关处理逻辑和代码。 其实，无论是常规的账号密码登录、短信验证码登录，还是微信一键登录，一般的处理流程都是类似的，就是先通过直接或间接的方式确认用户身份的有效性，然后获取用户信息，构造返回的token信息供前端使用。 前端负责处理结果逻辑，是提示用户还是平滑跳转到默认的用户页面。

炫佑科技专注互联网开发小程序开发-app开发-软件开发-网站制作等