72日目:パスワードの暗号化bcrypt・CORS・バックエンドとフロントエンドを繋ぐ

B!

制作完了したReactのアプリケーション(フロントエンド)にサーバー(バックエンド)を繋げる作業をしています。

本日学んだのは、パスワードの暗号化(セキュリティ強化)・CORS・バックエンドとフロントエンドを繋ぐ方法です。

パスワードの暗号化でセキュリティ強化:bcryptを使用してパスワードを暗号化

パスワードを暗号化(encrypt)するためにnpm packageのbcryptをNodejsで作ったサーバー側にインストールしました。npmでのインストール方法はシンプルにnpm install bcrypt です。

詳しくはnode.bcrypt.js(公式・英語)

他にも、argon2、scryptなどのnpmパッケージがあるそうですが、私が現在受講しているUdemyの講師によると、bcryptは3つの理由からおすすめだそうです。

1)15年という長い歴史がある

2)scryptより簡単にNodejsに組み込みやすい

3)人気があってコミュニティから支持されている

CORS

良い記事を見つけたのでこちらに。

CORS (Cross-Origin Resource Sharing)ってなに?

こちらの記事によると、CORSとは、

別オリジンのリソースへアクセス(= クロスサイトHTTPリクエスト)できるようにするためのルール、手法。

MDNの記事もぐぐっと読み込む必要がありそうです。

Cross-Origin Resource Sharing (CORS)

フロントエンドとバックエンドを繋げる

フロントエンドとバックエンドを繋げるためにReactアプリケーション(フロントエンド)とサーバー(バックエンド)にコードを書きました。

使用している教材と現時点での状態

Udemy:The Complege Web Developer: Zero to Mastery

Andrei Neagoie

Section 25 Lecture 253-256 (84%完了)

作業時間:3時間

次回の課題

本日のところはポート番号がフロントエンドとバックエンドで重なってしまいエラーで終了。Udemyの講師の画面のように、Git上で”would you like to run the app on another port instead?”という質問が出てこなかったので解決方法がわからず、ポートが重なっているというエラーのままとなりました。次回解決する予定です。

⇒(解決しました!)73日目:フロントエンドとバックエンドで違うポートを使う方法がわかった

最新の記事はこちらから