微信小程序一键登录

本文介绍了微信小程序如何实现一键登录功能。通过用户点击按钮获取电话号码授权,利用微信登录接口获取code,结合openid调用后台接口获取access_token完成登录。同时检查用户是否已绑定手机号,若未绑定则进行绑定操作,最后根据项目需求进行页面跳转。

项目需求

    点击按钮获取用户电话号码绑定到后台,登录。
在这里插入图片描述

实现思路

  1. 使用微信开放功能为获取用户手机号的button按钮绑定点击事件为获取用户授权。
  2. 如果获取用户手机号授权成功调用微信登录接口获取code。
  3. 用获取到的code去调用后台接口获取到用户的openid。
  4. code+openid去调用后台写的小程序自动登录接口获取到access_token,至此登录功能完成。
  5. 查询用户是否绑定过手机号,未绑定就去调用绑定手机号的接口。绑定过就直接提示登录成功,根据自己项目需求跳转页面,我是直接返回到上一页。

关键代码

<!-- wxml -->
<button open-type="getPhoneNumber" class="button" bindgetphonenumber="author">
  <image class="button-img" src="../../assets/images/wx_icon@2x.png"></image>
  <text>微信一键授权登录</text>
</button>
// wxss
@import '../../common.less';
.button {
  width: 80%;
  height: 88rpx;
  display: flex;
  background: @baseColor1;
  color: #fff;
  font-size: 30rpx;
  border: none;
  border-radius: 44rpx;
  justify-content: center;
  align-items: center;
  font-weight: 400;
  margin: 254rpx auto 74rpx;
  .button-img {
    width: 56rpx;
    height: 40rpx;
    margin-right: 6rpx;
  }
}
// login.js
/**
 * 用户点击一键授权登录按钮
 */
author(e) {
  if (e.detail.errMsg === 'getPhoneNumber:ok') {
    this.login(e);
  }
},
/**
 * 用户登录
 */
login(e) {
  let that = this;
  // 微信获取登录code
  wx.login({
    success(res1) {
      if (res1.code) {
        wx.setStorageSync('code', res1.code);
        // 后台获取用户openid
        app.api.user.getOpenID({
          code: res1.code
        }).then(res2 => {
          if (res2.code === 2000) {
            wx.setStorageSync('openid', res2.data.openid);
            wx.setStorageSync('session_key', res2.data.session_key);
            // 后台小程序自动登录
            app.api.user.autologin({
              openid: res2.data.openid,
              code: res1.code
            }).then(res3 => {
              if (res3.code === 2000) {
                // 至此登录完成
                wx.setStorageSync('access_token', res3.data.access_token)
                // 查询用户是否绑定过手机号
                app.api.user.info().then(res4 => {
                  if (res4.code === 2000) {
                    if (res4.data.bind === 2) {
                      app.toast('登录成功', 'none');
                      that.goBack();
                    } else {
                      // 未绑定手机号,去绑定
                      that.getPhoneNumber(e);
                    }
                  } else {
                    app.toast(res4.msg, 'none');
                  }
                })
              } else {
                app.toast(res3.msg, 'none');
              }
            })

          } else {
            app.toast(res2.msg, 'none');
          }
        })
      } else {
        app.toast('登录失败!' + res1.errMsg);
      }
    }
  })
},
/**
 * 绑定用户手机号
 */
getPhoneNumber(e) {
  // 判断session是否失效
  app.check.session((res) => {
    let token = wx.getStorageSync('access_token');
    let session_key = wx.getStorageSync('session_key');
    app.api.user.bindphone({
      token,
      session_key,
      encryptedData: e.detail.encryptedData,
      iv: e.detail.iv
    }).then(res => {
      if (res.code === 2000) {
        app.toast('绑定成功', 'none');
        this.goBack();
      } else {
        app.toast(res.msg, 'none');
      }
    }).catch(err => {
      app.toast('绑定手机号失败', 'none');
    })
  }, this.getPhoneNumber, e)
}

// utils/check.js
let api = require('../api/index');
let toast = require('./toast');
let check = {};

/**
 * session是否过期
 * @param {function} success seesion_key未过期时调用的方法
 * @param {function} error seesion_key过期时调用的方法
 * @param {eventhandle} e getPhoneNumber传参
 */
check.session = (success, error, e) => {
  wx.checkSession({
    //session_key 未过期,并且在本生命周期一直有效
    success,
    fail() {
      // session_key 已经失效,需要重新执行登录流程
      wx.login({
        success(res1) {
          if (res1.code) {
            wx.setStorageSync('code', res1.code);
            // 后台获取用户openid
            api.user.getOpenID({
              code: res1.code
            }).then(res2 => {
              if (res2.code === 2000) {
                wx.setStorageSync('openid', res2.data.openid);
                wx.setStorageSync('session_key', res2.data.session_key)
                // 后台小程序自动登录
                api.user.autologin({
                  openid: res2.data.openid,
                  code: res1.code
                }).then(res3 => {
                  if (res3.code === 2000) {
                    wx.setStorageSync('access_token', res3.data.access_token)
                    error(e);
                  }
                })
              }
            })
          } else {
            toast('登录失败!' + res.errMsg);
          }
        }
      })
    }
  })
}

module.exports = check;

参考文档
1. 小程序登录 | 微信开放文档
2. wx.login(Object object) | 微信开放文档
3. button | 微信开放文档
4. 获取手机号 | 微信开放文档

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值