Rails未経験が2ヶ月でSMS認証アプリを作ってAPI理解した話

## はじめに

はじめまして、shiroです(^o^)/
未経験SREとして[ネクスウェイ](https://qiita.com/organizations/nexway/profile)にジョインして1年が経ちました🌸

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

　<img width="300" alt="uchuneko_generate_from_ChatGPT.png (1.7 MB)" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933335/5fd854c5-fcab-4652-997b-457caea789bd.png">

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

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

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


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

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

<img width="500" alt="sms-sending-app-ok.gif (184.4 kB)" 
src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933335/7ec5d670-3436-4657-be8e-db4e0e1edf39.gif">

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

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

<img width="1024.5" alt="sms-sending-app-flow.png (178.9 kB)" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933335/90ae6889-0f43-443a-9625-a14cb4bf3fe1.png">

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

#### ■ 電話番号フォーム
<figure>
  <figcaption>▼ 電話番号に不備がある場合（規定外の長さ、数字以外の文字）</figcaption>
    <img width="500" alt="phone_number_ng_patern.gif (355.7 kB)" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933335/0c39fe19-1fc2-4258-8126-e24d4b9725b0.gif">
</figure>

#### ■ 認証コードフォーム

<figure>
  <figcaption>▼ 認証コードに不備がある場合（規定外の長さ、英数字以外の文字、異なるコード）</figcaption>
        <img width="500" alt="validation_error.gif (367.7 kB)" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933335/4764eac7-f538-47fc-bbff-a74f25958131.gif">
</figure>
<br>
<br>
<figure>
  <figcaption>▼ 同一電話番号で５回連続認証失敗した場合</figcaption>
        <img width="500" alt="five_times_misstake.gif (292.0 kB)" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933335/ef6a9252-4d90-4c70-9325-e36f74201b79.gif">
</figure>
<br>
<br>
<figure>
  <figcaption>▼ 一度認証が通ったあと、再度同じコードで認証しようとした場合</figcaption>
        <img width="500" alt="verified.gif (228.8 kB)" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3933335/42c26ad3-930b-4ab3-aecd-1f5c0cf9bcbb.gif">
</figure>

## さいごに

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

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

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

---

- **参考**
    - [【SMSLINK】SMS認証とは？本人確認として有効な理由やメリット、活用例について解説](https://smslink.nexway.co.jp/column/02)
　
- **もっと他の記事も読んでみたい方**
    - [【Qiita】株式会社ネクスウェイ【Organization】](https://qiita.com/organizations/nexway/profile)
    - [【note】ネクスウェイのエンジニア](https://note.nexway.co.jp/m/m02fea7380a40)
　
- **当社に興味がある方はこちら👀**
    -  [エンジニア採用について | 株式会社ネクスウェイ](https://recruit.nexway.co.jp/recruitinfo/engineer/)