平均スタック：AngularとAngular CLIを使用してアプリを構築する

このチュートリアルは、平均スタックアプリケーションのユーザー認証をガイドします。共通のアーキテクチャを使用します。Node.js、Express、およびMongoDBベースのREST APIと対話するAngularシングルページアプリ。

キー認証の側面：

ユーザー登録。

1. 安全なユーザーデータストレージ（パスワードが直接保存されることはありません）。
2. ユーザーログイン。
ページ訪問全体でのセッションの永続性。
3. 保護されたページのアクセス制御（ログインしたユーザーがアクセスできる）。 ログインステータスに基づいた
動的UI更新（たとえば、「ログイン」または「プロファイル」ボタンを表示）。
平均スタック認証ワークフロー：
6. ユーザーデータ（ハッシュされたパスワードを使用）はMongodbに存在します
crud（create、read、update、delete）関数はExpress APIに実装されています。

AngularアプリはAPIと対話し、応答を処理します。

Express APIは、登録/ログイン時にJSON Webトークン（JWTS）を生成し、Angularアプリに送信します。

Angularアプリは、ユーザーセッションを管理するためにJWTを保存します。

Angular Appは、保護されたビューのJWTの妥当性を検証します
• Angularアプリは、保護されたAPIルートにアクセスするときにJWTをExpressに送り返します。
• jwtsは、ブラウザセッション管理のためにCookieよりも好まれます。 Cookieは、サーバー側のアプリケーションに適しています
の例アプリケーション：
コードはGitHubで利用できます。 node.jsとmongodbがインストールされる必要があります（Windows、Linux、およびmacOSに関するインストール手順については、MongoDBのドキュメントを参照してください）。
• Angular App構造：
• Angular Appは、4つの基本ページで構成されています
• ホームページ
• 登録ページ

ログインページ

プロフィールページ（認証されたユーザーにのみアクセス可能）

Angular CLIは、ローカルサーバーの構築と実行に使用されます。 必要に応じてガイダンスについては、「Angular CLIを使用したTODOアプリの構築」チュートリアルを参照してください。

REST API構造：

node.js、Express、およびMongodb Rest APIには、最初にこれらのルートが含まれています。
2. （投稿）：ユーザー登録を処理します
3. （post）：ユーザーログインを処理します。
4. （get）：プロファイルの詳細を取得します

APIのセットアップ：

ツールを使用して（

でインストール）、Expressアプリを作成します。

express -v pug mean-authentication
cd mean-authentication
npm i
npm i pug@latest
npm i mongoose

元のチュートリアルで説明されているように、必要なディレクトリ構造とファイルを作成します。 app.js、データベース接続（api/models/db.js）、APIルート（api/routes/index.js）、および初期コントローラースタブ（api/controllers/authentication.jsおよびapi/controllers/profile.js）が提供されます。

mongooseを使用したmongodbスキーマ：

ファイルは、mongoose：api/models/users.jsを使用してmongodbスキーマを定義します

const mongoose = require('mongoose');
const crypto = require('crypto');
const jwt = require('jsonwebtoken');

// ... (Schema definition and setPassword, validPassword, generateJwt methods as described in the original tutorial)

パスワード管理（ハッシュと塩漬け）：

メソッドは、

およびsetPasswordモジュールを使用して、直接保存せずにパスワードを安全に処理します。 validPasswordメソッドはcryptoパッケージを使用してJWTSを作成します。 認証のためのgenerateJwtpassport.js：jsonwebtoken

パスポートとローカル戦略をインストールします：

：

npm i passport passport-local

でパスポートを構成します

api/config/passport.js更新

パスポートをミドルウェアとして初期化します。

// ... (Passport configuration as described in the original tutorial)

APIエンドポイント構成：app.js

Passport.jsおよびExpress-JWTミドルウェアを使用したJWT生成と認証を含む、レジスタ、ログイン、およびプロファイル処理ロジックを使用して

および

ファイルを完了します。

api/controllers/authentication.jsAngular Appの初期化とサービス：api/controllers/profile.js /api/profileCLIを使用してAngularアプリを作成します express-jwt

必要なコンポーネント（

、

、

、

）およびサービス（

ng new client

）を生成します。 JWTストレージ、検索、削除、API呼び出し、ログインステータスチェック、およびユーザーの詳細検索を処理するには、

を実装します。 register角度成分とAPIの接続：login profileAPIインタラクションを処理するためにhomeを使用して、それぞれのコンポーネントにレジスタとログインフォームを実装します。 ナビゲーションバーを更新して、ログインステータスに基づいて「サインイン」またはユーザーの名前とプロファイルリンクを動的に表示します。 角度ルートガード（authentication）を使用してAuthenticationServiceルートを保護します。 最後に、プロファイルページを実装して、保護された

APIルートからユーザーの詳細を取得および表示します。 アプリケーションの実行：

Expressサーバーにリクエストを転送するようにプロキシを構成します。 ExpressサーバーとAngularアプリを起動します。 登録、ログイン、およびプロファイルアクセスをテストします。 必要に応じてスタイリングを追加します（スタイリングの詳細については、GitHubリポジトリを参照してください）。

よくある質問（FAQ）：AuthenticationService

FAQSセクションでは、他のフレームワークとの違い、角度CLIの役割、データベースオプション、データ処理、スケーラビリティ、セキュリティ、学習リソース、およびnode.jsの役割など、平均スタック開発に関する一般的な質問への回答を提供します。 答えは、簡潔さと明確さのために言い換えられます。

以上が平均スタック：AngularとAngular CLIを使用してアプリを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。