初次见面。这是我第一次参加 Advent Calendar！大约一年前开始接触 AWS Amplify，因为它的便利性而成为我喜爱使用的工具，所以我希望能够通过这次活动分享一些相关经验。

在东京AWS Loft Ginza，我在目黑与AWS Amplify相识。

大约一年前，在东京都目黑车站步行1分钟的地方，开设了一个名为 “AWS Loft Tokyo” 的设施。这个地方的理念是为创业公司和开发者提供一个将挑战变为现实的场所。

这次的AWS Amplify Advent Calendar也是由启动解决方案架构师塚田先生（@akitsukada）制作的。

从开业起，我就常常去Loft，并参加每周都会举办的技术相关活动，这些活动通常是在共同办公结束后举行的。其中之一是参加了“AWS Amplify黑带公开录制&AppSync入门”活动。

Ionic是一种框架，用于开发跨平台移动应用程序。

Ionic 是一个使用 HTML/CSS/JavaScript 技术来构建移动应用程序的 UI 框架。它提供了可以将应用程序的 UI 设计得非常接近 iOS/Android 界面的 UI 组件，并且可以快速搭建出漂亮的用户界面应用程序。

通过使用Cordova或Capacitor，您可以将使用Ionic创建的应用构建为适用于iOS/Android的应用，并在App Store/Google Play上发布。

由于在创业公司担任一名独立的工程师工作了大约3年，我非常喜欢Ionic，因为它可以一次性构建iOS和Android应用。

有了AWS Amplify，您可以加快速度，从前端到后端一人完成。

我打算整理一下如何在使用Ionic开发的应用程序中集成AWS Amplify的步骤。

确认操作环境

• macOS Catalina 10.15

 

• VS Code

 

• node.js v12.7.0

 

• @angular/core 8.1.2

 

• @ionic/angular 4.7.1

 

• aws-amplify 1.2.4

 

• aws-amplify-angular 4.7.1

 

@amplify/cli 3.17.0

创建一个新的Ionic项目

首先使用Ionic CLI生成项目。
通过使用npx，即使没有全局安装Ionic CLI，也可以使用命令。

# CLIでプロジェクトを作成開始
$ npx ionic start

# プロジェクト名を指定
? Project name: AmplifyIonicChat

# JSフレームワークを選択：今回はAngularを利用
? Framework: Angular

# テンプレートを選択
? Starter template: blank

# ディレクトリに移動
$ cd AmplifyIonicChat

在这个时间点上，目录结构如下所示。
基本上与Angular CLI生成的目录结构相同。

$ tree -I node_modules
.
├── angular.json
├── browserslist
├── e2e
│   ├── protractor.conf.js
│   ├── src
│   │   ├── app.e2e-spec.ts
│   │   └── app.po.ts
│   └── tsconfig.json
├── ionic.config.json
├── karma.conf.js
├── package-lock.json
├── package.json
├── src
│   ├── app
│   │   ├── app-routing.module.ts
│   │   ├── app.component.html
│   │   ├── app.component.scss
│   │   ├── app.component.spec.ts
│   │   ├── app.component.ts
│   │   ├── app.module.ts
│   │   └── home
│   │       ├── home.module.ts
│   │       ├── home.page.html
│   │       ├── home.page.scss
│   │       ├── home.page.spec.ts
│   │       └── home.page.ts
│   ├── assets
│   │   ├── icon
│   │   │   └── favicon.png
│   │   └── shapes.svg
│   ├── environments
│   │   ├── environment.prod.ts
│   │   └── environment.ts
│   ├── global.scss
│   ├── index.html
│   ├── main.ts
│   ├── polyfills.ts
│   ├── test.ts
│   ├── theme
│   │   └── variables.scss
│   └── zone-flags.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.spec.json
└── tslint.json

在安装AWS Amplify JavaScript Framework之前，我们先试着运行一下，只要能够确认这个就行了。

# 開発サーバーを起動
$ npx ionic serve

在iOS设备上，当用户打开默认浏览器时，将显示应用程序。
仅仅通过这一步骤，我们就可以得到一个应用程序的模板，该模板在iOS设备上将应用iOS的风格，在Android设备上将应用Material Design的风格。

安装AWS Amplify JavaScript框架

由于Ionic应用程序已经准备就绪，我们将从这里开始引入主题AWS Amplify。
官方文档提供了Angular / Ionic的引入方法，我们将按照该文档的指引进行操作。

安装AWS Amplify相关的包

首先安装与AWS Amplify相关的软件包。有一个名为aws-amplify-angular的软件包，我们将使用它。

$ npm install aws-amplify aws-amplify-angular 

写下在Angular 6及以上版本中需要的配置

需要设置window.global和window.process。根据指示，将以下配置添加到src/polyfills.ts中。

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

src/polyfills.ts 最終情况如下。Ionic CLI（Angular CLI）为了方便说明而写了大量注释，但为了更清晰易读，我们将其全部删除。

import './zone-flags.ts';
import 'zone.js/dist/zone';

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

以下は中国語での同義表現です：顺便说一句，在官方文件中，

请注意，AWS Amplify Angular 组件尚未支持 Ivy。

在上面写着。看起来似乎还没有Ivy的支持…

调整TypeScript的编译选项

在src/tsconfig.app.json文件中的compilerOptions部分中添加node到types。顺便提一下，还有一个名为src/tsconfig.json的文件，因此需要注意不要混淆。

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": ["node"]
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

使用这个方法，AWS Amplify JavaScript Framework的安装已经完成，可以应用于Ionic应用。

执行AWS Amplify的初始设置

使用AWS Amplify CLI进行初始设置。初始设置是针对每个项目需要进行的操作。

# Amplify CLIの初期設定を開始
$ npx amplify init

# プロジェクト名を指定
? Enter a name for the project AmplifyIonicChat

# 環境名を指定
? Enter a name for the environment dev

# エディタを指定
? Choose your default editor: Visual Studio Code

# 開発に使う言語を指定
? Choose the type of app that you re building javascript

# 開発に使うフレームワークを指定
? What javascript framework are you using ionic

# ソースコードのディレクトリを指定
? Source Directory Path:  src

# ビルド後の成果物の格納先ディレクトリを指定
? Distribution Directory Path: www

# ビルドコマンドを指定
? Build Command:  npm run-script build

# 開発サーバー起動コマンドを指定
? Start Command: ionic serve

# Amplify CLIが使うAWSプロファイルを使う
? Do you want to use an AWS profile? Yes

# プロファイルを指定：今回は個人用のAWSに繋がるプロファイルとして用意してある「private」を指定
? Please choose the profile you want to use private

当指定了这些内容后，CloudFormation将启动并生成后端所需的资源。

在这里将创建以下资源。虽然感觉就像是在问“现在有什么资源可用呢？”，但我想知道是否有特定的目的……

• S3バケット

 

• Cognitoフェデレーテッドアイデンティティでの認証済みクライアントが引き受けるロール（AuthRole）

 

Cognitoフェデレーテッドアイデンティティでの未認証クライアントが引き受けるロール（UnauthRole）

使用AWS Amplify的Authentication类别来实现用户认证。

接下来，我们将使用AWS Amplify CLI在AWS云上构建后端。

在Amplify CLI中创建Authentication类别的设置。

首先，我们需要设置AWS Amplify的Authentication类别，以创建应用程序的注册和登录功能。

我们将按照官方文件中的以下部分进行操作。

# Amplify CLIを使ってAuthenticationカテゴリを追加
$ npx amplify add auth

# 認証の設定をどのように行うか指定：今回はデフォルトの設定を利用
Do you want to use the default authentication and security configuration? Default configuration

# サインインに使える属性を指定
How do you want users to be able to sign in? Username

# 追加の設定をするかどうかを指定
Do you want to configure advanced settings? No, I am done.

目前为止，设置已完成。此时，设置尚未应用到后端。

将设置应用于后端

然后，将设置实际应用到后端。

# 変更をバックエンドに適用
$ npx amplify push

# 変更内容が出るので、確認して先へ進む
Current Environment: dev

| Category | Resource name            | Operation | Provider plugin   |
| -------- | ------------------------ | --------- | ----------------- |
| Auth     | amplifyionicchatd1aa1b6e | Create    | awscloudformation |

? Are you sure you want to continue? (Y/n)

当您在管理控制台上进行确认时，您会发现 Amazon Cognito 已创建了用户池。

将连接信息应用到Ionic应用的后端

在执行之前的 “npx amplify push” 命令时，后端的连接信息（包括Cognito的用户池ID和身份池ID等）被输出到名为 “src/aws-export.js” 的文件中。

aws-export.js 是一个简单的JS文件，内容如下。

// WARNING: DO NOT EDIT. This file is automatically generated by AWS Amplify. It will be overwritten.

const awsmobile = {
    "aws_project_region": "ap-northeast-1",
    "aws_cognito_identity_pool_id": "＜アイデンティティプールID＞",
    "aws_cognito_region": "ap-northeast-1",
    "aws_user_pools_id": "＜ユーザープールID＞",
    "aws_user_pools_web_client_id": "＜ユーザープールクライアントID＞",
    "oauth": {}
};


export default awsmobile;

请勿手动修改此文件，根据第一行的注释所述，它将在以后执行的 $ npx amplify push 命令中被覆盖。

初始化Amplify Framework

为了将 Amplify Framework 中 aws-exports.js 中的配置信息加载到 src/main.ts 中，我们需要在其内写入以下的 Amplify 初始化处理。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

// 以下3行を追加
import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

顺便提一句，在官方文档中，Amplify 的导入源被称为 @aws-amplify/core，但是直接写这个并不起作用，会出现以下错误。

为了解决这个问题，Amplify 现在从 aws-amplify 进行加载。

前后端的连接已经完成了。

事先整理 Angular 模块

在这里，我们会先为将来做好Angular项目的准备工作。

• 未ログイン状態のときにアクセスできるページ群を管理する PublicModule を作成

 

• ログイン状態のときにアクセスできるページ群を管理する ClosedModule を作成

 

アプリケーション全体から利用するモジュールをまとめた SharedModule を作成

Angular的“模块”

在Angular中，您可以将应用程序分割成”模块”的单元。通过将页面组件创建为一个模块，可以在需要该页面时进行模块级别的延迟加载（Lazy Loading）。

在模块的定义中，使用 @NgModule 装饰器。

如果想要在一个名为模块A的模块中使用模块B，需要在模块B的定义处的@NgModule声明的imports部分指定模块A。

在Angular中，存在一个顶级模块称为 AppModule。
而通过 $ ionic start 命令选择 Blank 模板创建的空白模板中，也会生成用于首页的 HomeModule。

创建一个名为PublicModule的模块，用于管理可以在未登录状态下访问的页面组。

使用Ionic CLI创建模块。

$ npx ionic g module pages/public

通过这个命令，将创建 src/app/pages/public/public.module.ts。其内容如下所示。由于我们将在稍后添加路由，所以当前尚未创建任何内容。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// ここにルーティングの定義を書いていく
const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forChild(routes)]
})
export class PublicModule { }

创建一个名为ClosedModule的模块来管理只能在登录状态下访问的页面集合。

创建类似 PublicModule 的模块。

$ npx ionic g module pages/closed

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// ここにルーティングの定義を書いていく
const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forChild(routes)]
})
export class ClosedModule { }

将PublicModule和ClosedModule添加到AppRoutingModule。

最後，通过在应用程序的路由定义中注册AppRoutingModule，可以使PublicModule和ClosedModule生效。这样，PublicModule和ClosedModule中编写的路由将生效。

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  // 直下へのアクセスは /auth へリダイレクト
  { path: '', redirectTo: 'auth', pathMatch: 'full' },
  // 未ログイン状態でアクセスできる画面群のルーティング
  {
    path: '',
    loadChildren: () => import('./pages/public/public.module').then(m => m.PublicModule)
  },
  // ログイン状態でアクセスできる画面群のルーティング
  {
    path: '',
    loadChildren: () => import('./pages/closed/closed.module').then(m => m.ClosedModule)
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule { }

在Angular中，有一种称为“守卫”的机制，它可以控制是否允许通过URL进行页面转换。通过将这个守卫放在PublicModule和ClosedModule上，我们可以很好地控制在登录状态下访问注册表单时进行重定向，而在未登录状态下访问注册表单时也会进行重定向，这样可以很简洁地进行控制。

创建一个名为SharedModule的模块，用于整个应用程序共享使用。

由于前面所述，每个页面都是独立的模块，因此将共享的处理功能放在它们的模块中会更加方便。
我们将所有页面都会使用的IonicModule和FormsModule等都放在SharedModule中，然后在每个页面的模块中只需导入这个SharedModule即可。

$ npx ionic g module shared

生成在 “src/app/shared/shared.module.ts” 路径下的文件实例已经创建完成。

内容如下。

import { NgModule } from '@angular/core';
import { IonicModule } from '@ionic/angular';
import { FormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { AmplifyIonicModule, AmplifyService } from 'aws-amplify-angular';

const modules = [
  FormsModule,
  IonicModule,
  CommonModule,
  AmplifyIonicModule,
];

@NgModule({
  imports: [...modules],
  exports: [...modules],
  providers: [AmplifyService],
})
export class SharedModule { }

为了使import能够使用绝对路径进行编写。

整理源代码到目录中时，导入语句可能会变成以下这样。

import { MyService } from '../../../../../services/myservice/myservice.service';

因为这样会很辛苦，所以我会确保可以通过项目根目录的绝对路径进行指定。

在 tsconfig.json 的 compilerOptions 中指定 paths。

{
  "compilerOptions": {
    （...略）
    "paths": {
      "@/*": ["src/*"]
    },
    （...略）
  }
}

只需写入此设置，前面的 import 语句可按照以下方式书写。

import { MyService } from '@/services/myservice/myservice.service`;

调整之前已通过脚手架生成的AppModule。

由于稍后要在 AppComponent 中使用 AmplifyService 提供的 AWS Amplify，因此在 AppModule 中也应导入 SharedModule。

同时，删除了在模板生成期间被创建的无用模块的导入。

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

import { IonicModule, IonicRouteStrategy } from '@ionic/angular';

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

import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    SharedModule,
    IonicModule.forRoot(),
    AppRoutingModule,
  ],
  providers: [
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],
  bootstrap: [AppComponent]
})
export class AppModule {}

调整原先生成的首页。

最后，将自动生成的首页（HomePage）放入整理后的模块结构中。
在生成时，将原本位于 src/app/home/ 的 HomePage 全部内容移至 src/app/pages/closed/。

然后，将 src/app/pages/closed/home/home.module.ts 调整如下：
（将 FormsModule / IonicModule / CommonModule 的导入替换为 SharedModule 的导入）

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { HomePage } from './home.page';
import { SharedModule } from '@/app/shared/shared.module';

@NgModule({
  imports: [
    SharedModule,
    RouterModule.forChild([{ path: '', component: HomePage }])
  ],
  declarations: [HomePage]
})
export class HomePageModule {}

最后，我们在ClosedModule中定义HomePage的路由。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then(m => m.HomePageModule),
  },
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
  ]
})
export class ClosedModule { }

我們結構調整的工作變得很多。儘管這篇文章的主角是AWS Amplify，但我還是想寫到一定程度的應用程式擴展性配置，既然有這個機會。

生成处理认证的页面

由于我刚刚成功地在后端建立了AWS的身份验证基础设施Amazon Cognito，现在我将使刚刚创建的Ionic应用程序能够进行注册和登录。

AWS Amplify提供了能够在各个框架中一键实现登录功能的组件，这正是它的强大之处（！）

具体而言，提供了一个名为的组件，将其放置在应用程序内，即可出现登录表单。

当将认证集成到Web应用程序中时，

• サインアップ画面は /sign-up

サインイン画面は /sign-in

パスワードリマインダーは /password

我认为通常会将各个URL分开，就像这样。

然而，由于本次使用 组件进行身份验证，只需要一个处理身份验证的页面就足够了。

創建一個頁面來設置認證功能。

使用Ionic CLI来准备认证页面。如果使用CLI来生成页面，则会自动创建模块并启用延迟加载。

为了将认证处理的页面设为仅在未登录状态下可见，我们将在先前创建的 PublicModule 下创建页面模块。

$ npx ionic g page pages/public/auth

这样下面的文件就完成了。

src/app/pages/public/auth/auth.page.ts
src/app/pages/public/auth/auth.page.spec.ts
src/app/pages/public/auth/auth.page.html
src/app/pages/public/auth/auth.page.scss
src/app/pages/public/auth/auth.module.ts
src/app/pages/public/auth/auth-routing.module.ts

出于这个原因，我们决定将路由器的设置写在 auth.module.ts 中，因此我们将删除 auth-routing.module.ts。关于身份验证页面的模块 auth.module.ts，可以按以下方式编写。

import { RouterModule } from '@angular/router';
import { NgModule } from '@angular/core';
import { SharedModule } from '@/app/shared/shared.module';

import { AuthPage } from './auth.page';

@NgModule({
  imports: [
    SharedModule,
    RouterModule.forChild([{ path: '', component: AuthPage }]),
  ],
  declarations: [AuthPage]
})
export class AuthPageModule {}

最后，在 PublicModule 中添加路由定义以便在 /auth 上访问此页面。

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [
  {
    path: 'auth',
    loadChildren: () => import('./auth/auth.module').then(m => m.AuthPageModule),
  },
];

@NgModule({
  imports: [
    RouterModule.forChild(routes),
  ]
})
export class PublicModule { }

在浏览器中访问 http://localhost:8100/auth ，你将看到以下内容的页面。现在/auth页面已经准备就绪。

将AWS Amplify提供的认证组件部署

接下来，让我们将 AWS Amplify 提供的 组件放置在我们创建的 AuthPage 中。

<ion-header>
  <ion-toolbar>
    <ion-title>auth</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    <amplify-authenticator-ionic></amplify-authenticator-ionic>
  </div>
</ion-content>

如果使用纯Angular而不是Ionic，可以使用组件。而如果使用Ionic，可以使用专门的组件。

这一个操作就可以完成认证界面的实现。

我试着注册一下。

点击位于显示的登录页面底部的“创建账户”选项。

然后，页面会跳转到注册页面。
跳转的意思是， 组件只是将UI从登录表单切换到注册表单，但路由并没有改变。

在注册表格中填写信息。
默认设置要求填写以下项目。

• ユーザー名

 

• メールアドレス

 

• パスワード（英数字 + 記号 / 8文字以上）

 

電話番号（ 090 の先頭のゼロは取る）

当点击“创建账户”按钮后，将在Cognito用户池中创建一个账户。系统还默认提供了邮箱验证功能，因此请检查您输入的邮箱地址的收件箱。

有一封简单的邮件送到了。

一旦注册， 组件会自动切换到以下的电子邮件地址确认码输入界面，请输入收到的6位确认码。

点击「确认码」后，注册过程将完成。完成注册后，需要重新登录。

使用注册的帐户信息登录后， 组件的界面将切换为以下内容。

顺便说一句，不断在控制台上出现的错误是因为我多次输入账户信息时弄错了?

通过使用AWS Amplify，我们能够在Ionic应用中集成认证系统。
其实，认证部分相当复杂，需要根据用户的状态来显示以下类似的界面。

• サインアップ

 

• メールアドレスの開通確認

 

• サインイン

 

• パスワードリマインダー

 

パスワード再設定

使用AWS Amplify JavaScript Framework可以在一个组件中轻松构建这些功能，非常强大。

将Amplify的认证状态同步到Ionic应用程序中。

好的，在准备阶段中，我努力创建了 PublicModule 和 ClosedModule，并将未认证状态和认证状态的页面分开。

可以在组件中进行登录，但我想根据Amplify内部的登录状态来更改路由。

在AppComponent中添加代码以监视Amplify的认证状态。

作为Ionic应用的根组件，我们有一个叫做AppComponent的组件，所以我希望在那里监测Amplify的认证状态并将其应用到路由中。

使用Ionic CLI创建项目后，AppComponent中包含了针对原生应用程序的启动屏幕和状态栏操作处理的代码，但由于本次不需要这些功能，我们会大胆地将其删除。

我只会用中文完成。

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

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent implements OnInit {

  constructor(
    private navCtrl: NavController,
    private amplifyService: AmplifyService,
  ) {}

  ngOnInit() {
    this.amplifyService.authStateChange$.subscribe(authState => {
      switch (authState.state) {
        case 'signedIn':
          this.navCtrl.navigateForward(['/home']);
          break;
        case 'signedOut':
          this.navCtrl.navigateForward(['/auth']);
          break;
      }
    });
  }
}

当我们订阅 Observable 时，如果不及时取消订阅，在不再需要时会导致内存泄漏。但是，对于 AppComponent 这个组件来说，由于它始终存在于应用程序的整个生命周期中，所以我们并没有特别编写取消订阅的处理。

要在Angular中使用Amplify，可以从aws-amplify包中导入Auth或API，但是Angular使用了强大的依赖注入（DI）机制。

在 aws-amplify-angular 包中，提供了 AmplifyService 服务类，可以通过依赖注入操作 Amplify。

同时，Angular与RxJS紧密结合。通过AmplifyService，Amplify将内部的登录状态变化以RxJS的可观察对象的形式提供给我们（即this.amplifyService.authState()的部分）。

以这种状态登录时，将自动转到主页。

暂时在首页上设置一个登出按钮

因为我想尝试登出功能，所以我会在主页上设置一个登出按钮。由于我正在使用Ionic，所以只需在标题栏上设置一个带有图标的按钮就能完成。

<ion-header>
  <ion-toolbar>
    <ion-title>
      Ionic Blank
    </ion-title>

    <!-- ここから追加 -->
    <ion-buttons slot="end">
      <ion-button slot="icon-only" (click)="onSignOutButtonClicked()">
        <ion-icon name="log-out"></ion-icon>
      </ion-button>
    </ion-buttons>
    <!-- ここまで追加 -->

  </ion-toolbar>
</ion-header>

<ion-content>
  <div class="ion-padding">
    The world is your oyster.
    <p>If you get lost, the <a target="_blank" rel="noopener" href="https://ionicframework.com/docs/">docs</a> will be your guide.</p>
  </div>
</ion-content>

接下来，在src/app/pages/closed/home/home.page.ts中编写登出处理。同样地，通过注入AmplifyService并使用提供的方法，可以轻松完成。

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

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  constructor(
    private amplifyService: AmplifyService,
  ) {}

  onSignOutButtonClicked() {
    this.amplifyService.auth().signOut();
  }
}

这样的运作方式可以符合要求。感觉不错，对吧！

我們已經成功將Amplify Framework集成到Ionic應用程式中。

继续在后续的AWS AppSync设置和请求中进行。

总结到目前为止的工作，

• Ionic CLIを使ってIonicプロジェクトを作成

 

• Amplify CLIを使ってバックエンドにAmazon Cognitoを構築

 

• Amplify Frameworkをセットアップ

 

• Amplify提供の コンポーネントを使って認証周りをサクッと構築

 

Amplifyが持つ認証状態をAngular側で監視してルーティングを切り替える

成为。

我最想写的部分是使用AWS AppSync创建GraphQL API，并从AWS Amplify JavaScript Framework调用它的部分，但是由于准备步骤比预期多，所以我想先在这个阶段停下来。

由于这是我在Qiita的首次尝试，所以我对这个大概的感觉有些不安，但是我决定勉强写两天，希望能在12月17日的文章中提供续篇。

大致上，我计划使用AWS AppSync搭建API，制作一个实时同步的聊天应用程序。
作为AppSync的练习题目，聊天应用程序经常被提及。
awslabs上也有一个名为ChatQL的Angular+AppSync示例项目。

计划中的下一步实现将倾向于聊天应用程序，但本文的内容我打算设计得相对通用。

如果在AWS Amplify上可以快速开发后端，而且在Ionic上也可以快速开发前端，你不觉得梦想会更加广阔吗？

明天将由@moaible4qiita大人主持AWS Amplify Advent Calendar的内容！