如何在 vue 中调用 rails 服务

Question

我只想在点击验证号码服务时调用标签上的 twilio 服务并检查号码是否有效然后下一步继续否则显示错误但我不知道我该怎么做.

service/twilio.rb

def call(number, message)
  account_sid = ENV['TWILIO_ACCOUNT_SID']
  auth_token = ENV['TWILIO_AUTH_TOKEN']
  @client = Twilio::REST::Client.new(account_sid, auth_token)
  message = @client.messages.create(body: message,from: ENV['TWILIO+NUMBER'],to: number)

vue.js

<div>
 <li v-for:'number in phoneNumbers '>

  {{ number }}
  <a>
    verify number
  </a>
 </li>

Answer 1

这里是 Twilio 开发人员布道者。

首先如果你想验证一个数字，那么我建议你看看 Twilio Verify。它为您提供了通过短信或语音验证号码的选项，并处理将代码发送到 phone 并验证代码是否正确。

接下来，如果您想从前端触发号码验证，则需要通过控制器操作公开您的服务。

这样的事情会开始验证，return 一个 JSON 对象来显示成功。

class PhoneNumbersController < ApplicationController
  def verify
    account_sid = ENV['TWILIO_ACCOUNT_SID']
    auth_token = ENV['TWILIO_AUTH_TOKEN']
    @client = Twilio::REST::Client.new(account_sid, auth_token)
    @client.verify
      .services(ENV["TWILIO_VERIFY_SERVICE_SID"])
      .verifications
      .create(to: params[:number], channel: "sms")
    render json: { :verification => "started" }
  end
end

您也需要在 config/routes.rb 中为此控制器操作设置路由。

对于前端，我没有用 Vue 做过很多工作，但希望这能让你入门。单击 link 时，您需要向控制器操作发出 HTTP 请求。您可以使用 fetch API 来发出请求。像这样的事情应该让你开始：

<template>
  <div>
    <li v-for:'number in phoneNumbers '>
      {{ number }} 
      <button v-on:click="startVerification({{ number }})">
        verify number
      </button>
    </li>
  </div>
</template>

<script>
export default {
  methods: {
    startVerification: function(number) {
      fetch("/phone_numbers/verify", {
        method: "POST",
        body: JSON.stringify({ number: number }),
        headers: { "Content-Type": "application/json" }
      })
        .then(res => res.json)
        .then(data => {
          // Verification started. Probably update the state and ask for the code somehow
        })
        .catch(console.error);
    }
  }
}
</script>

如何在 vue 中调用 rails 服务

how can call rails service in vue

ruby-on-rails

ruby

vue.js

twilio

twilio-api