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

たっちゃん
  1. HOME
  2. ブログ
  3. フロントエンド
  4. 【AWS Cognito】ログイン認証機能作ってみた
Amplify

目次

  1. 概要
  2. 今回の環境
    1. Amplifyとは
  3. さっそく作ってみた
    1. Next.js
  4. Amplify
    1. インストールと初期設定
    2. プロジェクトでAmplifyを使う
  5. 画面の実装
  6. まとめ

概要

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

今回の環境

Next.js + Amplify

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

「!DOCTYPE」へのご意見・ご相談などに関しては
こちらからお気軽にご連絡ください。