微信小程序实现一键登录

本文实例为大家分享了微信小程序实现手机号登录的具体代码，供大家参考，具体内容如下

项目需求

点击按钮获取用户电话号码绑定到后台，登录。

实现思路

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="https://www.freexyz.cn/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. 获取手机号 | 微信开放文档

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。