BLOG【AWS Cognito】ログイン認証機能作ってみた

概要

こんにちは、現場で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なんかの記事もあげようと思ってるので、よろしくお願いします。