新しくなったAmplify FrameworkのUIコンポーネントをAngular 9で試しました

大高大輔

2020.04.14

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは！DA(データアナリティクス)事業本部 インテグレーション部の大高です。

先日、Amplify FrameworkのUIコンポーネントが新しくなったという発表があったので早速試してみました！

なお、ドキュメントはこちらになります。

前提条件

Angularは9.1.1を利用しており、パッケージ管理にyarnを利用しています。

$ ng --version

     _                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/
    

Angular CLI: 9.1.1
Node: 12.13.0
OS: linux x64

Angular:
... 
Ivy Workspace:

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.901.1
@angular-devkit/core         9.1.1
@angular-devkit/schematics   9.1.1
@angular/cli                 9.1.1
@schematics/angular          9.1.1
@schematics/update           0.901.1
rxjs                         6.5.4

Cognito側の準備

まずは、Cognito側を準備しておきます。 Congnitoのユーザープールを、デフォルトのまま作成します。

また、作成後にアプリクライアントを、こちらもデフォルトで追加しておきます。

注意点として、アプリクライアントの作成時には下記のissueの通り「クライアントシークレットを生成」のチェックを外す必要があります。

作成した「ユーザープールID」と「アプリクライアントID」は後で利用します。

Angularプロジェクトの作成

では、早速プロジェクトを作成します。

$ ng new hello-amplify-new-ui
? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#scss           
     ]

上記のように作成したら、今度はAmplifyのライブラリ、UIコンポーネントを追加します。

$ yarn add aws-amplify @aws-amplify/ui-angular

これでプロジェクト作成は完了です。

Cognito設定値の追加

プロジェクトが作成できたら、src/enviroments/enviroment.ts を開いて先程準備したCognitoの設定値を設定しておきます。

src/enviroments/enviroment.ts

// Congito設定値
const REGION = 'ap-northeast-1';
const USER_POOL_ID = 'ap-northeast-1_XXXXXXXXX';
const USER_POOL_CLIENT_ID = 'XXXXXXXXXXXXXXXXXXXXXXXXXX';

export const environment = {
  production: false,
  amplify: {
    // AWS Amplify(Auth)の設定
    Auth: {
      region: REGION,
      userPoolId: USER_POOL_ID,
      userPoolWebClientId: USER_POOL_CLIENT_ID
    }
  },
  // Localstorageの設定
  localstorageBaseKey: 'CognitoIdentityServiceProvider.${USER_POOL_CLIENT_ID}.'
};

app.component.htmlとapp.module.tsの設定

最後にapp.component.htmlとapp.module.tsの設定をします。

まず、app.component.htmlですが、デフォルトの内容を全部消して以下のようにします。

src/app/app.component.html

<amplify-authenticator>
  <div>
    My App
    <amplify-sign-out></amplify-sign-out>
  </div>
</amplify-authenticator>

次に、app.module.tsです。こちらは以下のように設定します。 Amplify.configureで先程のenvironment.tsの設定値を読み込み、UIコンポーネントのAmplifyUIAngularModuleのインポートを行っています。

src/app/app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import Amplify from 'aws-amplify';
import { AmplifyUIAngularModule } from '@aws-amplify/ui-angular';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { environment } from '../environments/environment';
Amplify.configure(environment.amplify);

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    AmplifyUIAngularModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

実行してみる

では、準備が整ったので実行してみます。

$ yarn start

が、画面が真っ白なので開発者コンソールを見てみます。

Uncaught ReferenceError: global is not defined

globalの未定義エラーが出ていますね。こちらは、下記のドキュメントに対応が記載されていました。

src/polifills.tsに下記を追記します。

src/polifills.ts

/***************************************************************************************************
 * for Amplify
 */
(window as any).global = window;
(window as any).process = {
  env: { DEBUG: undefined },
};

これで、もう一度実行してみます。

ログイン画面が表示されました！

ログインを試してみる

まず、適当にユーザ名とパスワードを入れてみます。

認証エラーになりましたね。

次に、ユーザを作成してみたいと思います。Create accountリンクをクリックしてみます。

ユーザ名、パスワード、Eメールアドレス、電話番号が要求されました。これは、Congnito側の設定に依存するので必要に応じて変えると良さそうですね。適当に入力してユーザ作成をします。なお、日本の電話番号の国コードは81なので、81を設定しています。

するとEメールアドレスに検証コードが送られきました。

フォームが切り替わっているので、検証コードを入力します。

ログインできました。以降は、先程設定したユーザ名とパスワードでログインできます。

最後に、パスワード忘れの流れを確認しておきます。Reset passwordリンクをクリックします。

ユーザ名を入力して、次に進みます。

すると、先程と同じように検証コードがEメールアドレスに送られてくるので、検証コードと新しいパスワードを入力して進みます。

するとログイン画面に戻ります。これで、先程変更したパスワードでログインできます。

まとめ

以上、新しくなったAmplify FrameworkのUIコンポーネントのご紹介でした。ほぼコーディング無しで、ここまで簡単に利用できるのは最高だと思います！

また、UIのカスタマイズなども出来るようなので、このあたりはまた別の機会に試してみようと思います。

どなたかのお役に立てば幸いです。それでは！

AWS