Chapter 15

# 記事15: AngularアプリのUIに認証機能を統合

Yuki
Yuki
2023.06.13に更新

前回の記事では、AWS Cognitoを使って認証機能を追加しました。今回はその認証機能をアプリのUIに統合し、実際にユーザーがログインやログアウト、サインアップを行えるようにします。

ステップ1: ログインフォームの作成

まずはログイン用のフォームを作成しましょう。新たにlogin.component.tslogin.component.htmlを作成します。

ng generate component login

login.component.tsは以下のようになります。

import { Component } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent {
  username: string;
  password: string;

  constructor(private authService: AuthService) {}

  login() {
    this.authService.signIn(this.username, this.password)
      .then(result => console.log(result))
      .catch(err => console.error(err));
  }
}

login.component.htmlは以下のようになります。

<div>
  <label for="username">ユーザー名</label>
  <input id="username" [(ngModel)]="username" type="text">

  <label for="password">パスワード</label>
  <input id="password" [(ngModel)]="password" type="password">

  <button (click)="login()">ログイン</button>
</div>

これでログイン用のフォームが完成しました。

ステップ2: サインアップフォームの作成

次に、新規ユーザーを作成するためのサインアップフォームを作成します。signup.component.tssignup.component.htmlを新たに作成します。

ng generate component signup

signup.component.tsは以下のようになります。

import { Component } from '@angular/core';
import { AuthService } from '../auth.service';

@Component({
  selector: 'app-signup',
  templateUrl: './signup.component.html',
  styleUrls: ['./signup.component.css']
})
export class SignupComponent {
  username: string;
  password: string;
  email: string;

  constructor(private authService: AuthService) {}

  signup() {
    this.authService.signUp(this.username, this.password, this.email)
      .then(result => console.log(result))
      .catch(err => console.error(err));
  }
}

signup.component.htmlは以下のようになります。

<div>
  <label for="username">ユーザー名</label>
  <input id="username" [(ngModel)]="username" type="text">

  <label for="password">パスワード</label>
  <input id="password" [(ngModel)]="password" type="password">

  <label for="email">メールアドレス</label>
  <input id="email" [(ngModel)]="email" type="text">

  <button (click)="signup()">サインアップ

</button>
</div>

これでサインアップ用のフォームが完成しました。

これらのフォームはまだ非常に基本的なものであり、エラーハンドリングやフォームのバリデーションなどは行っていません。これらの拡張は、より高度なテーマとなりますが、この基本的なフォームを通じて、AWS Cognitoとの基本的なインタラクションを理解することができます。

次回は、これらのフォームをナビゲーションに統合し、実際のログインやログアウトを行う方法を見ていきます。