微信小程序实现手机验证码登录

微信小程序实现手机验证码登录需要以下步骤：

1.为小程序开通短信验证功能

首先，需要在微信公众平台申请开通云开发能力，开通后再开通短信验证功能。开通后，我们可以得到相应的AppID和AppSecret，用于在小程序中调用API。

2.在小程序中引入SMS-SDK

我们需要在小程序中引入SMS-SDK，可通过微信开放平台提供的SMS-SDK进行操作。

在app.js中引入SMS-SDK，如下所示：

const SMS = require('miniprogram-sms-sdk');

App({
  SMS: new SMS({
    appid: 'your appid',  // 与云开发控制台中的APPID一致
    appsecret: 'your appsecret',  // 与云开发控制台中的APPSECRET一致
  })
})

3.获取手机号

当用户点击“获取验证码”按钮时，我们需要获取用户输入的手机号，如下所示：

<view class="form-group">
      <input type="number" name="phoneNumber" placeholder="请输入手机号" bindinput="getPhoneNumber" />
      <button bindtap="sendVerificationCode">获取</button>
</view>

getPhoneNumber: function (e) {
     this.setData({
         phoneNumber: e.detail.value
     })
}

4.调用云函数并发送验证码

获取手机号后，需要在底部添加一个“获取验证码”的按钮，并绑定发送验证码的云函数，如下所示：

<button bindtap="sendVerificationCode">获取验证码</button>

sendVerificationCode: function () {
     const phone = this.data.phoneNumber;

     // 调用云函数发送验证码
     wx.cloud.callFunction({
        name: 'sendVerificationCode',
        data: {
            phone: phone
        }
     })
     .then(res => {
         console.log(res)
     })
     .catch(err => {
         console.log(err)
     })
}

此处我们调用了一个名为sendVerificationCode的云函数，并将获取到的手机号作为参数传递给云函数。

5.校验验证码并登录

当用户输入完验证码后，可点击登录按钮进行登录操作，如下所示：

<view class="form-group">
      <input type="number" name="verificationCode" placeholder="请输入验证码" bindinput="getVerificationCode" />
      <button bindtap="login">登录</button>
</view>

getVerificationCode: function (e) {
     this.setData({
         verificationCode: e.detail.value
     })
}

login: function () {
     const phone = this.data.phoneNumber;
     const code = this.data.verificationCode;

     // 调用云函数校验验证码并登录
     wx.cloud.callFunction({
        name: 'checkVerificationCode',
        data: {
            phone: phone,
            code: code
        }
     })
     .then(res => {
         console.log(res)
     })
     .catch(err => {
         console.log(err)
     })
}

此处我们调用了一个名为checkVerificationCode的云函数，并传递了手机号和验证码作为参数，云函数会校验验证码的正确性，并返回相应结果。

示例说明

示例1：发送验证码的云函数

创建名为sendVerificationCode的云函数，代码如下所示：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

const SMSClient = require('@alicloud/sms-sdk');

// 云函数入口函数
exports.main = async (event, context) => {
    const {
        phone
    } = event;

    // 生成6位验证码
    const code = Math.floor(Math.random() * 899999 + 100000);

    const smsClient = new SMSClient({
        accessKeyId: 'your accessKeyId',  // 阿里云AccessKey ID
        secretAccessKey: 'your secretAccessKey',  // 阿里云Access Key Secret
    });

    // 发送短信
    const result = await smsClient.sendSMS({
        PhoneNumbers: phone,
        SignName: 'your signname',
        TemplateCode: 'your templatecode',
        TemplateParam: JSON.stringify({ code })
    });

    if(result.Code === 'OK') {
        console.log(result)
        return {
          success: true
        }
    } else {
        return {
          success: false,
          message: result.Message
        }
    }
}

其中，我们调用了阿里云的SMS服务发送短信，短信内容中包含了生成的6位验证码。

示例2：校验验证码的云函数

创建名为checkVerificationCode的云函数，代码如下所示：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数
exports.main = async (event, context) => {
    const {
        phone,
        code
    } = event;

    // 比对验证码
    if(code === '123456') {
        console.log('验证成功');
        return {
          success: true
        }
    } else {
        return {
          success: false,
          message: '验证码错误'
        }
    }
}

此处创建的云函数不是真实的验证码校验方法，而是模拟了一个可以通过固定的验证码123456登录的云函数，仅用于示例说明。