悩んでいる人Reactでログインの機能ってどうやってやるんだろう？
ということで、本記事ではReact開発における認証周りを中心に記事をまとめております。
実際のアプリでは非常に重要な機能ですが、なかなか個人で小さなアプリを作っているだけだと使わなかったりして僕も理解が浅い部分です。
今回は、スクール課題のなんでもメモできるアプリケーションの作成を通して認証周りや、バックエンドとのデータの受け渡し周りについて学んでいきます。
また、本記事は、Raise Techのフロントエンドエンジニアコースの受講記でもあります。
こちらの記事は、第12回の講義のまとめとなります。
認証について
認証の方法もいくつかあるので、それぞれの特徴について見ていきたいと思います。
▼言葉の定義
認証・・・サーバー側で通信相手が誰かを識別する
認可・・・特定の条件を元にリソースへのアクセスを制限する
従来の認証
ログイン時に、サーバーが「Session ID」を管理して、クライアントはSession IDをCookieに保存していた。
再度ページに訪問した際には、Cookieに保存されたSession IDをサーバー側に渡すことでログインした状態でページを見ることができる。
SPAでの認証
フロントエンドとバックエンドが別々のサーバーにあることが多い。
ID/パスワードなどのログインに必要な情報をサーバーに送信する。
サーバーは認証処理を行う。認証処理を行う際に、認証情報を変換して、トークンを作成する。
レスポンスとしてトークンを返却して、クライアントはトークンを保持し、以降の通信にトークンを仕様してサーバーとのデータのやり取りを行います。
このことを、トークン認証と呼びます。
JWT認証（JSON Web Token）
JWTは「ヘッダー、ペイロード、署名」の３要素で構成されるエンコードされた文字列。
・ヘッダー：暗号化のアルゴリズムを指定
・ペイロード：ユーザーの識別情報
・署名：tokenが改ざんされていないか検証
ログイン時、認証ユーザーにJWTを発行しレスポンスとして返却される。
JWTを受け取ったクライアントは、以降リクエスト時に、リクエストヘッダーにJWTを付与する必要がある。
リクエストヘッダーにJWTを付与するAuthorizationヘッダーに「Bearer<token>」の形式で指定。
※今回作成アプリではJWTを使用しました。
オカHTTP通信とかそのあたり苦手意識がまだあるのです。。。
セキュリティリスク
認証についてざっくりと理解できたところで、代表的なセキュリティリスクについても見ておきましょうー！
XSS（クロスサイトスクリプティング）
URL先（例:https://bit.123）に埋め込まれたスクリプトが実行してしまい、認証情報が流出してしまう。
CSRF（クロスサイトリクエストフォージェリ）
ユーザーを攻撃用のサイトに誘導して、攻撃対象のサーバーに対して不正なリクエストを送信する。
こちら、勉強になったQiitaの記事を貼っておきますので興味があれば是非！！
API開発で仕様する便利ツール
実際の開発では、フロントエンドとバックエンドの開発が同時に進めることができていないことも多いみたいです。
そんなときに便利なツールについて紹介します。
フロント
使用したいAPIが未実装の場合に、モックのサーバーを用意して動作を確認することができます。
json-server(https://github.com/typicode/json-server)
msw(https://github.com/mswjs/msw)
バック
ボタン押下などでデータ取得等のリクエストを送信するが、開発段階では画面がなくリクエストを送信する方法がないときなどに使えます。
Postsman(https://www.postman.com/)
Insomunia(https://insomnia.rest/)
ThunderClient(https://www.thunderclient.io/)
仕様書作成ツールについて
開発時には、どのような仕様にするかをまとめた仕様書に沿って開発を行っておきます。（個人で小さなアプリぐらいだと作らないことの方が多いかも。）
APIの仕様書を作成することで、フロントエンドとバックエンドが共通の認識を持って開発をしていくことができる。
Swagger（https://swagger.io/）
JSONやYAML形式で「Swagger Spec」を記述することで仕様書を作成することができる
API Blueprint(https://apiblueprint.org/) + Aglio(https://github.com/danielgtaylor/aglio)
API Blueprintでマークダウン形式でAPI仕様を記述して、AglioでHTML形式で出力する。
また、api-mockを導入することでAPIの実行が可能になります。
アプリ開発の方法
フロントエンドコースでは、基本的にReactしか触らないのでバックエンドをやる機会というのはありません。
しかし、アプリを作る上でバックエンドを必須となるのでどのようにバックエンドを準備するかについて少し触れていきます。
自分でバックエンド環境を作る
バックエンド言語・データベースを自分で準備する。
バックエンド言語とは、PHPやRuby、Pythonなどのことを指します。
またデータベースも準備しないといけないので結構大変だと思います。
オカ今回、フロントエンドコースで学び、作成したアプリのバックエンドを自分で実装するのを今自身の課題としています。
サーバーレスアーキテクチャを利用する
Amazon Web ServiceやGoogle Cloud Platform(GCP)などのクラウドコンピューティングシステム(※)を活用する。
※インターネット上でサーバー・データベース・ストレージなどのコンピュータ資源をサービスとして提供
また、インフラ周りも開発プラットフォームを利用することでプラットフォーム側に任せることができます。
Amplify
AWSが提供する開発プラットフォーム
Firbase
Googleの子会社が提供する開発プラットフォーム
Supabase
2020年から提供されている新しいプラットフォーム
まとめ
今回の課題で、はじめてしっかりとしてHTTP通信を行ってバックエンドからデータを取得するということを行いました。
今後は、自分でもバックエンドを準備でき個人での開発ができるようになっていきたいなと思っています。
