新しくなった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の設定値を設定しておきます。

// 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ですが、デフォルトの内容を全部消して以下のようにします。

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

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

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に下記を追記します。

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

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