はじめに

はじめまして、shiroです(^o^)/
未経験SREとしてネクスウェイにジョインして1年が経ちました🌸

SMSLINKというSMS配信サービスが当社のイチオシサービスのひとつということで、
半年ほど勉強会をしてもらっていましたが、認証コードの仕組みが難しすぎて聞けば聞くほど宇宙猫に…💫

見かねた先輩から「一回自分で（お客様目線で）アプリ作ってみては？」と素敵な提案をいただき、
SREながらデモアプリ開発にチャレンジできることとなりました🙌

開発未経験で四苦八苦しつつ、ご指導たまわること2ヶ月……
なんとか動くものが作れました ( ；∀；)✨

というわけで……
この記事では、デモ動画を中心に、制作したアプリがSMSLINK API とどんなやりとりをしているかをご紹介していきます 😎
「電話番号を入れるとSMSが届いて、認証できる」あの流れがわかるようになる…！（かも？）

作ったもの

SMSLINKのAPIを使って、本人確認ができるデモアプリをRailsで開発しました！
指定の電話番号宛に認証コードを送信、その認証コードをSMSLINKに打ち返すことで個人が認証される仕組みです✌️

🔹デモ動画

電話番号にSMSを送信し、受け取った認証コードで認証手続きを行う流れです！

🔹 アプリの機能と認証の流れ

) ユーザーが本アプリのフォーム画面に電話番号を入力し、「次へ」ボタンを押すと本アプリからSMSLINKの認証コード生成APIにHTTPリクエストを送信する
　
) SMSLINKが認証コードを生成し、受け取った電話番号の端末にSMSで認証コードを送信してくれる
　
) ユーザーがSMSで届いた認証コードを本アプリの認証用フォームに入力し、「認証する」ボタンを押すと、本アプリから SMSLINKの認証APIにHTTPリクエストが送信される
※今回はお勉強のため英数字4桁のコードにしてみていますが、SMSLINKは4~12桁、数字or英数字混合から好きな値を設定できます！
　
) SMSLINK が本アプリに対してレスポンスとして認証結果を返してくれる（それを受けて本アプリはユーザー画面に認証結果を表示させる）

🔹 セキュリティ設定

SMSLINK自体が結構優秀で、ユーザーフレンドリーな設定に加えバリデーションチェックもしっかりしてるのですが、
今回はお勉強のため、電話番号フォームと認証コードフォームのそれぞれにバリデーションをあえて設定しました🚨
また、バリデーションメッセージは入力欄下に表示され、それ以外のエラーメッセージは画面の上部に表示される仕様にしてみています！

■ 電話番号フォーム

▼ 電話番号に不備がある場合（規定外の長さ、数字以外の文字）

■ 認証コードフォーム

▼ 認証コードに不備がある場合（規定外の長さ、英数字以外の文字、異なるコード）

▼ 同一電話番号で５回連続認証失敗した場合

▼ 一度認証が通ったあと、再度同じコードで認証しようとした場合

さいごに

初めてのアプリ制作ということもあり、指示内容がひとつも分からず、なにもかも調べながらの取り組みでしたが、Railsの仕様、rubyの書き方、テスト方法、セキュリティまわりの配慮など、学びや発見だらけでとても楽しかったです✨️
検証や動作確認を通して、SMSLINKのAPIと無事お友だちになれた気がします！🎉

ただ、実はまだこのアプリについて指摘を受けている内容は結構あって、（フラッシュメッセージにCSSを当てるとか、電話番号の条件分けをより丁寧にするなどなど…）残課題にもこのあとチャレンジしたい気持ちです…！
工夫した点や難しかった点、どう対処したかなど、はしょっている部分も多く、語りたいことがまだまだたくさんあるので、それはまた別の記事でご紹介できたらと思います٩(๑´0`๑)۶

最後まで読んでくださり、ありがとうございました！
今後も少しずつ技術記事を書いていきたいと思っているので、また読んでもらえたら嬉しいです🌸

参考
- 【SMSLINK】SMS認証とは？本人確認として有効な理由やメリット、活用例について解説
  　
もっと他の記事も読んでみたい方
- 【Qiita】株式会社ネクスウェイ【Organization】
- 【note】ネクスウェイのエンジニア
  　
当社に興味がある方はこちら👀
- エンジニア採用について | 株式会社ネクスウェイ