IonicでAWS Amplifyを使用する

AWS( アマゾンWebサービス)から昨年2017年の暮れに発表されたMobile App向けのJSライブラリの「AWS Amplify」。発表されたのはいいけどドキュメントが英語…うまくいかないし…というかたもいらっしゃるのではないでしょうか。
(実際、私も1週間くらいこの話ではもがきました。)

今回はAmplifyライブラリを試してわかった実装方法について記していきます。

前提:AWS公式サイトのCognito Javascript SDKは使わない(IonicチュートリアルもNG。最新ではありません)

「Ionic」のWEBサイトにアクセスすると出てくるのが、ionic v3のスターターテンプレート「aws」の情報です。結論から言うと、このテンプレートは昔の(昨年のAmplify発表以前の)Cognito JSライブラリがバンドル(同梱)されており、ionic start→awsと進むと旧来型のセットアップとなってしまうケースもあります(必ず最新のCLIにアップデートしてからawsテンプレートでのスタートをおこなってください。
AWSからも公式のチュートリアル(サンプル)はリンクつきで紹介されています(リンク)。

では、実際の実装方法について説明します。
(すでにIonic startでAWS以外を選んでスタートした人のための話です)

まずはawsmobileをダウンロードする

まずはAWS Mobile HUBと言うサービスを使用するためにawsmobile-cliをnpmからダウンロードし、インストールしましょう。CLIなので-g(グローバル)オプションをつけるのを忘れずに。

npm install -g awsmobile-cli

ダウンロードが終わったら「awsmobile configure」を実施します。
リージョンやAPIキーを聞かれます。もしAWS Mobile HUBを使用したことがない場合は、aws startコマンドを叩きAWS mobile Hubのプロジェクトを最初に作成してください。

awsmobile使用経験者→awsmobile pullで設定ファイルをWEBからダウンロードします。
awsmobile使用未経験者→awsmobile pushで設定ファイルをWEBにアップロードします。

ユーザー登録を実装する

ユーザー登録を実装します。
まずは、registerページをIonicのコマンドを使って生成します。

ionic generate page Register

ページを作成したら、このページにAuthクラスとawsの設定ファイルを読み込ませます。

import Amplify, { API,Auth } from 'aws-amplify';
const aws_exports = require('../../aws-exports').default;
Amplify.configure(aws_exports);
このような形で、AmplifyとAuthを読み込ませ、読み込んだAmplifyにaws_exportsのJSを読み込ませるのがコツです。
※aws_exports.jsをrequireでそのまま読み込ませるとAllow_JSエラーが出てきてしまうので、上記のような書き方をして読み込ませる必要があります。
完了したら、コマンドを書いていきます。
今回はレジストレーションなので、登録関係のプログラムを書いていきます。
Auth.signupの引数にサインアップ情報を渡し、signupが完了したらEmailやSMSに送られる確認コード(4桁〜6桁の数字?)を入力する画面への画面移動を実装します。
signup() {
letloading=this.loadingCtrl.create({
content:'Please wait...'
});
loading.present();
letdetails=this.userDetails;
this.error=null;
logger.debug('register');
letphonenum='+81'+details.phone_number; //+81などの国番号がないと先に進めないので注意
Auth.signUp(details.username, details.password, details.email,phonenum)
.then(user => {
this.navCtrl.push(ConfirmCodePage,{username:details.username});
})
.catch(err => {
this.error=JSON.stringify(err);
})
.then(() => loading.dismiss());
}

ここまで登録し、Signupしたユーザーには電話番号/E-mailの存在を確認するVerifyコードがそれぞれの携帯電話に配信されます。そのVerifyコードをAWSサーバーに指定した方法で送信することで認証できるので、その認証部分のtsを記入し、入力が完了したら送信されるように仕組みます。

confirmCode(){
Auth.confirmSignUp(this.username, this.code)
.then(result => {
this.navCtrl.first();
})
.catch(err => {
this.result=JSON.stringify(err);
})
}
ここまででSignupまでが完成しました!

公式APIドキュメント:https://aws.github.io/aws-amplify/api/index.html
公式Githubソースページ:https://github.com/aws/aws-amplify

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください