本記事ではTwilioとVue.jsを組み合わせたSMSテストの検証をしていきます。通常のSMS送受信をする場合は第三者のSMS送受信サービスを利用する必要があります。
Twilioとは
Twilioはアメリカのサンフランシスコに本社があるクラウドコミュニケーションプラットフォームサービス 企業です。電話の発着信やテキストメッセージ(SMS)の送受信のWEBAPIを提供しています。例えば、Twillioを使うとSMS送受信・認証やライブチャットなどの実装をすることができます。Twilio以外にもAmazon SNSなどサービスがありますので、比較検討したい方はこちらの記事を参考にしてみると良いかもしれません。
SMS（ショートメッセージ）送信サービス – Qiitaなぜ、Twilio？
FirestoreではFirebase Authentication を使用することでSMS認証できるのですが、通常のSMS送受信をする場合は第三者のSMS送受信サービスを利用する必要があります。NTT,au,ソフトバンクの通信会社を使う必要があるので、1回のSMS送信で約8円のコストがかかります。Twilioを選んだ理由は一番有名だからですね。
SMS送受信の実装
各言語のSDKはこちらに掲載されています。
今回はフロントエンドのVue.jsで実装するので、Axiosを使ってSMS送信用のAPIを叩いてあげます。curlだとこんな感じです。
curl 'https://api.twilio.com/2010-04-01/Accounts/(twilio_sid)/Messages.json' -X POST \
--data-urlencode 'To=+8100000000' \
--data-urlencode 'From=+000000000' \
--data-urlencode 'Body=商品のお届け準備が整いました。' \
-u [accountSid]:[AuthToken]curlをAxios用に記述するとこのような記述になります。以下のsendSMS()内にSMS送信のコードを定義してあげて、配達開始・完了メッセージなど使いたいタイミングで発火してあげます。accountSidとauthTokenについてはtwilioのコンソールから確認できます。
sendSMS() {
const accountSid = process.env.VUE_APP_TWILIO_ACCOUNT_SID;
const authToken = process.env.VUE_APP_TWILIO_AUTH_TOKEN;
let payload = {
To: '+00000000', //送り先
From: '+00000000', //送り元
Body: '商品が出来上がりました。ただいまからお届けにあがります。配達状況の確認。https://www.for-engineer.life/',
};
axios.post(`https://api.twilio.com/2010-04-01/Accounts/${accountSid}/Messages`,querystring.stringify(payload),{
auth: {
username: accountSid,
password: authToken
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
.then(function (response) {
console.log(response.data);
})
.catch(function (error) {
console.log(error);
});
},上のメソッドを発火させると以下のようにSMS送信
以上となります。Eメールの送受信実装はあるのですが、SMSの送受信は初めての実装だったので良い経験になりました。