続【AngularとNode.jsで始める】JavaScript系WEBアプリケーション開発コンプリートガイド②

ログイン及び新規会員登録ページも0から作る必要はありません。うまく移植してそれをベースに改良を加えて行きましょう。

移植したコンポーネントとURLの紐付けを行っていきましょう。

ベクトルデータで構成されるFontAwesomeのアイコンを読み込めるようにする方法を解説していきます。

pngやjpgなどと異なりベクトルデータは画像を引き伸ばしたりしても荒くならないのが特徴です。

前のレクチャーで学んだ知識を用いて、新規会員登録（Register）コンポーネントも、registerと打った際に表示されるようにしよう。

ログイン・新規会員登録コンポーネントをモジュール化してプロジェクト全体の視認性をよくしましょう。

ログイン・新規会員登録コンポーネントをモジュール化してプロジェクト全体の視認性をよくしましょう。

ログイン・新規会員登録コンポーネントをモジュール化してプロジェクト全体の視認性をよくしましょう。

細かな作り込みとCommit（コミット）までを行います。

次のセクションでバックエンド側の作り込みをして行きます。

以前Productモデルを作った時と同じようにして、ユーザー情報に関しても、「ユーザー名」「Eメール」「パスワード」等、決まった型としてモデル化しましょう。

ログイン・新規会員登録のフォームデータを送るエンドポイントを用意しましょう。

Body parserを使うことでログイン・新規会員登録フォームからの入力データを受け取れるようにしましょう。

VSCodeのデバッガ機能を使ってNodeサーバーをデバッグできるようにしていきます。

VSCodeでのNodeサーバーのデバック方法をご説明していきます。

実際にコーディングを進めるにあたり、ワイヤフレーム を考えて見ましょう。

ワイヤフレーム をもとに、バックエンド側のフローチャートも合わせて設計しましょう。

設計したフローチャートの内容をコーディングしていきましょう。

エラーハンドラ（Error handler）を用意して、エラーの原因がわかるようにしましょう。

VSCodeを使ってバックエンド側のデバッグを行うにあたり、デバッガの使い方を補足説明していきます。

エラーハンドラが正しく動作してるかデバッガを使いながら検証していきましょう。

MogoDBにデータが正しく保存されるか確認していきましょう。

データベースにパスワードをそのまま保存しておくのは個人情報保護の観点からも良くないだけでなく、万一DBがハッキングされた際の事も考え暗号化した方が良いでしょう。

今回はハッカーがどのようにハッシュ化されたパスワードを解読するかの一例をご紹介していきます。

DBのパスワードをそのまま保存するのは個人情報保護の観点からよくないですので、bcryptを使って対策を行って行きましょう。

ログイン認証にJWT（Json web token）が便利なのでJWTについて解説していきます。

ログイン認証を実現して行くためのバックエンド側フローチャート設計を行っていきましょう。

設計したフローチャートをもとにコーディングしていきましょう。

パスワード照合メソッド（関数）を実装していきましょう。

ログイン認証に成功したらJWTを発行し、リクエストしたユーザーに返してあげるように実装していきます。

設計したフローチャート通りに動作するかの検証を行っていきましょう。

JWTトークンは扱いに注意すればとても便利ですので、扱いかたの注意事項を紹介していきます。

いよいよフロントエンド側と結合して行きます！とても密度が高い内容なので頑張って学んで行きましょう。

フロントエンドとの結合における全体の流れを説明していきます。

実際にAngularでフォーム対応して行くにあたり、実現手法がいくつかあります。

目的に合わせて扱いやすいフォームを選び、実現して行きましょう！

ngFormを使って実際にJson形式でフォームデータを取得しましょう。

今まで学んだ知識を用いてパスワード欄もJson形式でデータを取得できるようにしよう。

パスワード入力時に値がユーザーに直接見えないように保護するようにして行きます。

「入力必須」のフォーム欄の実装方法を説明していきます。

ユーザーが正しいEメールアドレスを入力するようにパターン認証を追加する方法を解説していきます。

バックエンド側との通信は、以前Productsを作った時と同じ方法でInjectableを用いて通信できるようにしていきます。

バックエンド側との通信は、以前Productsを作った時と同じ方法でInjectableを用いて通信できるようにしていきます。

フロントエンド側で最低入力文字数制限をかける方法についてご説明していきます。

入力エラーがあったことをユーザーにわかるよう、フロント側にエラーが表示されるようにアップデートしていきましょう。

以前設計したフローチャート通りに機能するかをフロントエンド側からもチェックしましょう。またエラー文言に関しては必要に合わせて日本語にしましょう。

navigateを用いて、正常に会員登録が完了したら自動的にログインページに画面遷移するようにしていきます。

ログインフォーム側もJson形式でフォーム入力の値を取れるようにしていきましょう！

ログインフォーム側もフロントエンドからバックエンド側のエンドポイントにPOSTリクエストが送れるようにしていきます。

新規会員登録時と同様に、ログイン後に適切なページに遷移するようにしていきましょう。

Push前にnpm run buildを忘れずに行いましょう。

buildコマンドを無事通す事ができれば、Herokuにも問題なくデプロイできるようになります。

ビルドが無事通ったのでMasterへマージ＆ Herokuへの自動デプロイを確認しましょう。

本番環境で動作検証をしましょう。Token部分に関しては次のセクションでAuthGuardを作りながら修正していきます。

AuthGuardセクションのイントロダクションです。ラストスパート頑張っていきましょう！

JWTをローカルストレージに保存できるようにしていきます。

情報を扱いやすいようデコードしたデータもローカルストレージに保存できるようにしていきます。

デコードした情報をAngular（フロント）側で保持できるようにしていきます。

ログイン時にヘッダーメニューが切り替わるようにアップデートしていきます。

ログイン時にヘッダーメニューが切り替わるようにアップデートしていきます。

Nodeサーバー側で用いる「ミドルウェア」とは何か？について説明していきます。

実際にAuthミドルウェアを実装するためにフローチャートを先に設計していきます。

設計したフローチャートを元にコーディングをしていきましょう。

設計したフローチャートを元にコーディングをしていきましょう。

エラーハンドラもしっかり実装していきます。

設計した通りに動くか動作検証していきます。

設計した通りに動くか動作検証していきます。

AuthGuardはフロントエンド側、AuthMiddlewareはバックエンドからの情報を保護します。

実際にAuthGuardを実装していきましょう。

実際にAuthGuardを実装していきましょう。

ログインユーザーを識別できるようにする為、Tokenインターセプターを実装していきましょう。

ログインユーザーを識別できるようにする為、Tokenインターセプターを実装していきましょう。

プロダクションビルドを行いGitHubへPUSHしていきます。

一部ソースを微修正し、本番環境（Heroku）で問題なく動くかを確認していきます。

ここまで本当にお疲れ様でした！

最後まで到達できたあなたはもう既にプロフェッショナルエンジニアとして活躍できる能力が身につけられていると思います。

学んだ知識をぜひ実務でも役立ててくださいね。

それではまた他のコースでもお会いしましょう！