angular-13-login-registration-example

JWT と Web API を使用した Angular 13 のログインおよび登録の例

Web API と JWT を使用する、トークンベースの認証・認可アプリケーションを Angular 13 で構築します（HttpInterceptor、Router、フォーム検証を含みます）。

• ユーザー登録（サインアップ）とユーザーログインのための JWT 認証フロー
• HttpInterceptor と Router を含むプロジェクト構成
• HttpInterceptor の実装方法
• フォーム検証を備えたログインおよびサインアップコンポーネントの作成
• 保護されたリソースにアクセスするための Angular コンポーネント
• Angular アプリに動的なナビゲーションバーを追加する方法
• ブラウザーのセッションストレージの使用

ユーザー登録とユーザーログインのフロー

Web API を使用する JWT トークンベースの認証では、2 つのエンドポイントを呼び出します。

• ユーザー登録には POST api/auth/signup
• ユーザーログインには POST api/auth/signin

以下のフローを見ると、Angular 13 の JWT 認証・認可クライアントが送受信するリクエストとレスポンスの概要を把握できます。

Router と HttpInterceptor を含む Angular JWT アプリの図

詳しくは、チュートリアルをご覧ください。

JWT と Web API を使用した Angular のログインおよび登録の例

Spring Boot バックエンドを使用する場合

Angular + Spring Boot：JWT 認証および認可の例

Node.js Express バックエンドを使用する場合

Angular + Node.js Express：JWT 認証および認可の例

選択したバックエンドに応じて、app/_helpers/auth.interceptor.js を開き、次のようにコードを変更してください。

...

// const TOKEN_HEADER_KEY = 'Authorization'; // for Spring Boot back-end
const TOKEN_HEADER_KEY = 'x-access-token';   // for Node.js Express back-end

@Injectable()
export class AuthInterceptor implements HttpInterceptor {
  ...

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    ...
    if (token != null) {
      // for Spring Boot back-end
      // authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, 'Bearer ' + token) });

      // for Node.js Express back-end
      authReq = req.clone({ headers: req.headers.set(TOKEN_HEADER_KEY, token) });
    }
    return next.handle(authReq);
  }
}

...

開発サーバーを起動するには、ng serve --port 8081 を実行します。http://localhost:8081/ にアクセスしてください。

さらに練習する

Http Interceptor を使った Angular JWT Refresh Token の例

Web API を使った Angular CRUD アプリケーションの例

Angular のページネーションの例 | ngx-pagination

プログレスバー付き Angular ファイルアップロードの例

Node を使ったフルスタック：

Angular + Node Express + MySQL の例

Angular + Node Express + PostgreSQL の例

Angular + Node Express + MongoDB の例

Angular + Node Express：ファイルアップロードの例

Spring Boot を使ったフルスタック：

Angular + Spring Boot + H2 Embedded Database の例

Angular + Spring Boot + MySQL の例

Angular + Spring Boot + PostgreSQL の例

Angular + Spring Boot + MongoDB の例

Angular + Spring Boot：ファイルアップロードの例

Django を使ったフルスタック：

Angular + Django の例

Firebase を使ったサーバーレス：

Angular Firebase CRUD とリアルタイムデータベース | AngularFireDatabase

AngularFireStore を使った Angular Firestore CRUD の例

Angular Firebase Storage：ファイルのアップロード／表示／削除の例

統合（バックエンドとフロントエンドを同じサーバー／ポートで実行）

Angular と Node Restful Services を統合する方法

Angular と Spring Boot Rest API を統合する方法