
目次
概要
こんにちは、現場でAWSをよく利用してるので個人的にも勉強しなきゃなと思い今回はAWS Amplifyを使って簡単にログイン認証を作ってみました。
今回の環境
Next.js + Amplify
Amplifyとは

AWS Amplify は、セキュアでスケーラブルなモバイルアプリケーションとウェブアプリケーションを構築するための開発プラットフォームです。ユーザーの認証、データとユーザーのメタデータのセキュアな保存、データへの選択的なアクセスの許可、機械学習の統合、アプリケーションのメトリクスの分析、サーバー側コードの実行するといった作業を容易にします。Amplify は、バージョンコントロール、コードのテスト、実稼働環境へのデプロイといったモバイルアプリケーションの開発ワークフロー全体をカバーしています。また、ビジネスの拡大に伴い、数千名のユーザーから数千万名のユーザーまで容易にスケーリングできます。Amplify フレームワークの一部である Amplify のライブラリと CLIはオープンソースであり、プラグインが可能なインターフェイスがあるので、カスタマイズや自分自身のプラグインの作成を行えます。
字面だとちょっとわかりにくいかもですが、要約するとWeb及びモバイルアプリを作る上で便利なフレームワークです。
さっそく作ってみた
Next.js
セットアップの話なので割愛
Amplify
インストールと初期設定
まずはインストール
npm install -g @aws-amplify/cli
or
yarn add global @aws-amplify/cli
インストールできてるか確認 amplify -v
4.13.1
次にAWSアカウントとの紐付け
amplify configure
アカウントがない人は作成から
プロジェクトでAmplifyを使う
Next.jsプロジェクトでAmplifyを使えるように設定します
amplify init
言語やディレクトリ構造を聞かれるので、自分の環境を入力
auth認証を追加(Cognitoの設定)
amplify add auth
amplify push
Vue用のamplifyライブラリのインストール
npm i aws-amplify aws-amplify-vue
or
yarn add aws-amplify aws-amplify-vue
画面の実装
Vueで使うためにpluginの実装
import Vue from 'vue'
import Amplify, * as AmplifyModules from 'aws-amplify'
import { AmplifyPlugin } from 'aws-amplify-vue'
import awsconfig from './aws-exports'
Amplify.configure(awsconfig)
Vue.use(AmplifyPlugin, AmplifyModules)
ログイン判定用のmiddlewareの実装
ログイン判定をしたい画面でこのmiddlewareを使います。
import { Auth } from 'aws-amplify'
export default async ({ redirect }) => {
let signedIn = false
await Auth.currentUserInfo()
.then((data) => (signedIn = Boolean(data)))
.then(() => signedIn || redirect('/signin'))
}
pagesの実装
ログイン処理を行うsignupページを作ります。
コンポーネントが提供されてるのでそれを使うだけです。
カスタマイズする場合はconfigを渡すのですが、詳しくは以下参照
https://aws-amplify.github.io/docs/js/vue
<template>
<div class="container">
<amplify-authenticator />
</div>
</template>
まとめ
今回はログインできるだけの簡単な内容でしたが、
この機能を使えば簡単に独自の登録制のwebサービスなんかも作れちゃうなと進歩に感動しました。
他にもAWS Lamda AWS Appsyncなんかの記事もあげようと思ってるので、よろしくお願いします。