（ＡＷＳ）Cognitoの認証をVue.jsで利用してみた

Amazon Cognitoを利用したWebシステムの紹介をします。
Amazon Cognitoとは、

ユーザーのサインアップおよびサインイン機能を追加し、ウェブおよびモバイルアプリケーションへのアクセスを制御できます。Amazon Cognito は、数百万人のユーザーに拡張できるアイデンティティストアを提供し、ソーシャルおよびエンタープライズ ID フェデレーションをサポートし、コンシューマーとビジネスを保護するための高度なセキュリティ機能を提供します。オープンアイデンティティ標準に基づいて構築された Amazon Cognito は、さまざまなコンプライアンス規制をサポートし、フロントエンドおよびバックエンドの開発リソースと統合します。 

Amazon Cognitoサイト

記載の通り、サインアップ～サインイン機能の追加や、その他のサービスのアクセスを制御できます。たとえば、AppSyncサービスとの連携などが可能です。
今回は、Vue.jsでの利用した場合の記述について紹介します。
（以前に紹介したAmplifyを利用してAmazon Cognitoの連携を行った紹介となります）

<script setup>
  import { Authenticator } from "@aws-amplify/ui-vue";
  import "@aws-amplify/ui-vue/styles.css";

  import { Amplify } from 'aws-amplify';
  import awsconfig from './aws-exports';

  Amplify.configure(awsconfig);
</script>

<template>
  <authenticator>
    <template v-slot="{ user, signOut }">
      <h1>Hello {{ user.username }}!</h1>
      <button @click="signOut">Sign Out</button>
    </template>
  </authenticator>
</template>

ごらんの通り、太字の部分を記載するだけでサインアップ～サインインをWebシステムに組み込む事ができます。

Amazon Cognitoでは、非常に素早く認証機能を組み込む事が可能です。（細かい使い方は、こちらを参照してください）

AWSに関連する記事　よろしければご覧下さい。

（本記事にたいする質問やお問合せ・ＩＴ改善のご相談はこちら）