how can call rails service in vue-CodePudding

I just want to call the twilio serivce on < a > tag when click on verify number service should be call and check if number is valid then proceed next otherwise show error but i don't know how can i do this.

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>

CodePudding user response：

Twilio developer evangelist here.

First up if you want to verify a number, then I recommend you take a look at Twilio Verify. It gives you options to verify numbers by SMS or voice and handles sending codes to the phone and verifying that the code is then correct.

Next, if you want to trigger a number verification from your front-end then you need to expose your service through a controller action.

Something like this would start a verification and return a JSON object to show the success.

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

You need to set a route for this controller action in config/routes.rb too.

For the front-end, I've not done a lot of work with Vue, but hopefully this gets you started. You need to make an HTTP request to the controller action when your link is clicked. You can use the fetch API to make the request. Something like this should get you started:

<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>

CodePudding user response：

If you need to verify a number, then, DON'T CALL...

Use the "Lookup" API instead and check if that phone number return information, if it doesn't then, you can say it's not valid.

Because if you call, and it's not a valid phone number, you might need to check for the "CallStatus" to check if it was answered, if it was not, then, it's not valid or something and you can be annoying to the users unless you know they don't care about that.

Also, if you want to check in a registration form to check for a phone number, you can easily send an SMS with a code that the user can check against so if the phone number is not valid, then, they should not receive that code.

If you just need to check that the phone number format is valid, then, you don't need Twilio for that, just use a library like "libphonenumber" from Google or something like that.