AWS( アマゾンWebサービス）から昨年2017年の暮れに発表されたMobile App向けのJSライブラリの「AWS Amplify」。発表されたのはいいけどドキュメントが英語…うまくいかないし…というかたもいらっしゃるのではないでしょうか。
（実際、私も１週間くらいこの話ではもがきました。）
今回は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);今回はレジストレーションなので、登録関係のプログラムを書いていきます。
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);})}公式APIドキュメント：https://aws.github.io/aws-amplify/api/index.html
公式Githubソースページ：https://github.com/aws/aws-amplify
コメントを残す