はじめに
はじめまして、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`๑)۶
最後まで読んでくださり、ありがとうございました！
今後も少しずつ技術記事を書いていきたいと思っているので、また読んでもらえたら嬉しいです🌸
- 参考
- もっと他の記事も読んでみたい方
- 当社に興味がある方はこちら👀