AWS Amplifyでcognitoを使用したログイン画面がすぐにできるとよく見かけるので試してみようと思います。
「AWS Amplify」は、サインアップやサインイン、サーバーレスAPI統合などの実装が容易にできるJavaScriptライブラリです。
開発は「Cloud9」を使用します。
AWS Amplify Vue Starterをベースにアプリケーションを作成
まずはCloud9で、パッケージマネージャーyarnを使用できるように インストールします。
|
1 2 |
curl --silent --location https://dl.yarnpkg.com/rpm/yarn.repo | sudo tee /etc/yum.repos.d/yarn.repo sudo yum install yarn |
インストール後にgitから取得
|
1 2 |
git clone https://github.com/aws-samples/aws-amplify-vue.git cd aws-amplify-vue |
UIのコンポーネントもインストール
|
1 |
yarn add element-ui |
Amplify Frameworkをインストール
|
1 2 |
npm install -g @aws-amplify/cli amplify version |
AmplifyでAWSリソースを作成
|
1 |
amplify init |
以降名称やリージョンなど必要な箇所を入力します。
認証（Cognito）機能を追加
|
1 |
amplify add auth |
サインインはEmailを選択します。
ストレージ（S3）機能を追加します。
|
1 |
amplify add storage |
Cloud9でcredendialを設定可能にするために以下設定を行う
以下、ＡＷＳ managed temporaryをＯＮにする
リソースをデプロイします。これによりCognito、S3などのリソースがAWS上に作成されます。
|
1 |
amplify push |
ローカルでの動作確認
|
1 |
yarn run dev |
cloud9でローカルで動くようにするために記述を変更する
config配下のindex.js以下部分を「host: ‘0.0.0.0’」に変更します。
|
1 2 3 4 5 6 7 8 9 |
devServer: { clientLogLevel: 'warning', historyApiFallback: true, hot: true, compress: true, //host: HOST || config.dev.host, //port: PORT || config.dev.port, host: '0.0.0.0', port: '8080', |
実行すると「ログイン画面」でてきました。すごい！もう表示ができました。
「Create account」クリックしてユーザー作成
メール確認すると認証コードがとどいている
認証コード入力
ログイン
ログイン成功、サンプルのログイン後画面が表示されています
cognitoは何も直接さわっていませんが、ユーザープールも自動でできている。これはほんとすごいです。
ＩＤプールもできている。
ユーザーもできている
いくつかのコマンドで入力だけでサーバーレスのログインができてしまいました。
うわさ通りほんと衝撃の簡単さでログイン画面ができました。