いまさらながらAmazon Cognitoを使って認証画面を作ってみた備忘録。
せっかくなのでAngular4ベースで画面は作成。
amazon-cognito-identity-jsで認証
amazon-cognito-identity-jsを利用してみます。インストールは簡単。
$ npm install amazon-cognito-identity-js --save
ユーザプールを作成しユーザ情報を追加
ユーザプールを作成。設定はとりあえず全てデフォルトを選択しました。で、ユーザを追加。ただしAWSコンソールからユーザ追加をするとメールなどによる承認手続きが必要になってしまうので、手抜きのためにコマンドでユーザ追加と承認処理を実施。
$ aws cognito-idp sign-up --client-id <ClientId> --username <Username> --password <Password> --user-attributes Name=email,Value=<Mail Address>
$ aws cognito-idp admin-confirm-sign-up --user-pool-id <UserPoolId> --username <Username>
無事ステータスが「CONFIRMED」のユーザが出来上がりました。(CONFIRMEDステータスでないと、APIでログインを試行してもVerifyしろ、というエラーが返ってきてしまう)
画面作成の参考ページ
このページを参考に認証画面ぽいモノを作成しました。
すでにバージョンの違いからパッケージの内容が若干変わっているところはありますが、特に問題なく作成することはできました。
それっぽい画面の作成
さくっとAngular4(なのかなこれ?)で作ります。
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms'
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { CognitoService } from './cognito.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [CognitoService]
})
export class AppComponent {
userName = '';
password = '';
constructor(
private cognitoService: CognitoService,
private http: Http
) { }
signIn() {
this.cognitoService.signIn(this.userName, this.password);
}
}
<!--The content below is only a placeholder and can be replaced.-->
<div>
<h1>
Amazon Cognito Test login
</h1>
</div>
<div>
<div id="loginId">
<div>
<label>Login ID: </label>
</div>
<div>
<input type="text" [(ngModel)]="userName" />
</div>
</div>
<div id="loginPass">
<div>
<label>Password: </label>
</div>
<div>
<input type="password" [(ngModel)]="password" />
</div>
</div>
<div id="signIn">
<button (click)="signIn()">Sign In</button>
</div>
</div>
Cognito用サービスは、最低限サインインだけを実装しました。
import { Injectable } from '@angular/core';
import * as AWS from 'aws-sdk';
import { CognitoUserPool, CognitoUserAttribute, CognitoUser, AuthenticationDetails } from 'amazon-cognito-identity-js';
import { environment } from '../environments/environment';
@Injectable()
export class CognitoService {
userPool = null;
constructor() {
AWS.config.region = environment.region;
const data = { UserPoolId: environment.userPoolId, ClientId: environment.clientId };
this.userPool = new CognitoUserPool(data);
}
signIn(userName, password) {
const userData = {
Username: userName,
Pool: this.userPool
};
const cognitoUser = new CognitoUser(userData);
const authenticationData = {
Username: userName,
Password: password
};
const authenticationDetails = new AuthenticationDetails(authenticationData);
cognitoUser.authenticateUser(authenticationDetails, {
onSuccess: function (result) {
alert('Sign in succeded');
},
onFailure: function (err) {
alert(err);
}
});
return;
}
}
あとはこれらを使うための環境変数を記述すればOKです。
export const environment = {
production: false,
region: 'xxxxxxxxx',
userPoolId: 'xxxxxxxxxxxxxxxxxxxxx',
clientId: 'xxxxxxxxxxxxxxxxxxx'
};
結果はこちらに。
アクセスしてみる
登録したユーザでアクセスしてみます。無事アクセスできました。
アカウント情報を間違えたらもちろんアクセスできません。
まとめ
だいぶ手抜きですが、Angular4ベースでCognitoを利用する画面を作成しました。Routerなどを実装できれば、それなりにCognitoを使ってのSPAが作成できそうなイメージも持てました。Angular4の勉強はもっとしないとなぁ。。。