Ionic 3とAWS Amplifyを使ってみる (その2: Cognito Userpoolを使った認証編)

(承前)Ionic 3とAWS Amplifyを使ってみる (その1: S3へのデプロイ編)

Cognito設定

今回はAmplifyを使って、AWS CognitoのUserpoolを設定し、Cognitoを使ってIonicアプリからSign Up/Sign Inを行う部分を実験してみます。前回作ったアプリを拡張していきます。

amplify add auth
 Do you want to use the default authentication and security configuration? (Use arrow keys)
❯ Yes, use the default configuration.
  No, I will set up my own configuration.

ここではデフォルトの設定を使う、を選択します。デフォルトとはCognito Userpoolを使った認証において「email/passwordを使う」「本人確認のための乱数コードは、登録したメールアドレスに送付される」です。これ以外の組み合わせをしたい場合は、「No, I will set up my own configuration」を選択すれば良いようですが、まだ試していません。

amplify push

あとはamplify pushコマンドを実行すればAWS側の設定は自動実行されます。楽ちん。

Ionicアプリ実装

Ionic側ではAmplifyサービスのライブラリを読み込んで、認証フォームと、認証後のコールバックを実装するだけです。

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      I'm on S3
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-item>
    Logged In={{signedIn}}
  </ion-item> 
  <ion-item *ngIf="signedIn">
    {{user.username}}
  </ion-item> 
  <ion-item *ngIf="signedIn">
    <button ion-button button-full (click)="logout()">Logout</button>
  </ion-item> 
  <ion-item *ngIf="!signedIn">
    <amplify-authenticator></amplify-authenticator>
  </ion-item>
</ion-content>

認証フォームはAmplifyが提供するdialectがあるのでそれを使ってみます。

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { AmplifyService }  from 'aws-amplify-angular';
import { Auth } from 'aws-amplify';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  private amplifyService: AmplifyService;
  private signedIn: boolean = false;
  private user: any;

  constructor(public navCtrl: NavController, public amplify: AmplifyService,) {
    this.amplifyService = amplify;

    this.amplifyService.authStateChange$
    .subscribe(authState => {
      this.signedIn = authState.state === 'signedIn';
      if (!authState.user) {
        this.user = null;
      } else {
        this.user = authState.user;
        console.log(this.user);
      }
    })
  }

  logout() {
    Auth.signOut()
    .then(data => {
      console.log(data);
    })
    .catch(err => {
      console.log(err);
    })
  }
}

ロジック側ですが、AmplifyServiceを読み込んでおいて、認証後のコールバックを受信できるようにしておくのと、Logoutのロジックを作ることくらいですかね。

実行

amplify push
ionic serve

さてIonicアプリを起動してみると...

当たり前ですがCSS指定してないので配置がいまいちです。それっぽいCSSファイルはnode_modules/@aws-amplify/ui/src/ の下にあるので、これらを@importしろってことなのでしょう。

実行してみる

Create Accountリンクをクリックし、ユーザー名、メールアドレスとパスワード、電話番号を入力してSignupボタンをクリックすると、登録したメールアドレスに確認コードが届くので、それを確認フォームに入力すると、アカウント登録が完了します。あとはユーザー名とパスワードを使ってログインが可能になります。

AWSコンソールからCognito Userpoolを見てみると、ユーザが登録されたことがわかるはずです。

AWS周りの設定が自動化されたことで、サーバレスモバイルアプリ開発がたしかに楽になりそうな感じはしてきました。

次回はS3へのアクセスあたりを触ってみます。