前回の記事では、AWS Cognitoを使って認証機能を追加しました。今回はその認証機能をアプリのUIに統合し、実際にユーザーがログインやログアウト、サインアップを行えるようにします。
ステップ1: ログインフォームの作成
まずはログイン用のフォームを作成しましょう。新たにlogin.component.ts
とlogin.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.ts
とsignup.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との基本的なインタラクションを理解することができます。
次回は、これらのフォームをナビゲーションに統合し、実際のログインやログアウトを行う方法を見ていきます。