如何在Vue中调用Rails封装的Twilio服务实现手机号校验

后端Rails侧调整 #

1. 完善Twilio服务类 #

你现有代码只实现了发送短信的逻辑，需要新增手机号校验方法，可直接调用Twilio官方Lookup API完成有效性校验，同时修复原有环境变量的非法命名问题：

# service/twilio.rb
class TwilioService
  # 新增手机号有效性校验方法
  def validate_number(number)
    account_sid = ENV['TWILIO_ACCOUNT_SID']
    auth_token = ENV['TWILIO_AUTH_TOKEN']
    @client = Twilio::REST::Client.new(account_sid, auth_token)
    begin
      # 调用Lookup API校验号码格式、是否真实存在
      response = @client.lookups.v1.phone_numbers(number).fetch
      { valid: true, formatted_number: response.phone_number, error: nil }
    rescue Twilio::REST::RestError => e
      { valid: false, error: e.message }
    end
  end

  # 原有发短信方法，修复ENV变量名（TWILIO+NUMBER为非法命名，建议改为TWILIO_FROM_NUMBER）
  def send_sms(number, message)
    account_sid = ENV['TWILIO_ACCOUNT_SID']
    auth_token = ENV['TWILIO_AUTH_TOKEN']
    @client = Twilio::REST::Client.new(account_sid, auth_token)
    @client.messages.create(
      body: message,
      from: ENV['TWILIO_FROM_NUMBER'],
      to: number
    )
  end
end

2. 新增校验接口 #

先配置路由，config/routes.rb中添加：

post '/api/verify_phone', to: 'phones#verify'

新增对应控制器处理请求：

# app/controllers/phones_controller.rb
class PhonesController < ApplicationController
  # 生产环境建议保留csrf校验，请求头携带X-CSRF-Token即可，这里仅作示例简化
  skip_before_action :verify_authenticity_token
  def verify
    result = TwilioService.new.validate_number(params[:phone_number])
    render json: result
  end
end

前端Vue侧调整 #

补全点击事件、错误提示逻辑，同时修复原有v-for的语法错误：

<template>
<div>
  <!-- 错误提示区域 -->
  <p v-if="errorMsg" style="color: red;">{{ errorMsg }}</p>
  <ul>
    <li v-for="number in phoneNumbers" :key="number">
      {{ number }}
      <a @click.prevent="verifyNumber(number)" href="javascript:;">
        verify number
      </a>
    </li>
  </ul>
</div>
</template>

<script>
export default {
  data() {
    return {
      phoneNumbers: [], // 替换为你的原有号码数组
      errorMsg: ''
    }
  },
  methods: {
    async verifyNumber(number) {
      this.errorMsg = ''
      try {
        const res = await fetch('/api/verify_phone', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({ phone_number: number })
        })
        const result = await res.json()
        if (result.valid) {
          // 校验通过，此处编写后续业务逻辑
          alert('手机号校验通过')
        } else {
          this.errorMsg = `校验失败：${result.error}`
        }
      } catch (e) {
        this.errorMsg = '网络异常，请稍后重试'
      }
    }
  }
}
</script>

补充说明 #

• 如果需要校验手机号归属权而非仅格式有效性，建议改用Twilio验证码发送+回填校验的流程，准确率更高
• 生产环境不要关闭CSRF校验，可在Vue请求头中携带页面meta标签内的CSRF Token即可

内容的提问来源于stack exchange，提问作者waqar ahmad