【第十回】AWS Amplifyを使ってログイン機能作成

AWS

はじめに

こんにちは!DreamHanksのjiniです。

前回の記事では、Reactプロジェクトを作成してみました。

前回の記事はこちらへクリックしてください。

今回は、AWS Amplifyを利用してログイン画面を作成したいと思います。

Amplify

まず、Visual Studioで前回作成したReactプロジェクトを開きます。

※Visual Studioがインストールされてない場合は下記のサイトでインストールしてください。

What's new in Visual Studio docs - Visual Studio (Windows)
DiscoverrecentchangesintheVisualStudiodocumentation,includingupdatedarticlesaboutgettingstarted,theIDE,anddeployment.

Amplify CLI 設置

①下記のコマンドを実行します。

・npm install -g @aws-amplify/cli

Amplify CLI 設定

①下記のコマンドを実行します。

②実行すると、AWSのログイン画面が表示されて、ログインをします。

③コマンドに戻って、「Enter」クリックして続きます。

④下記のように設定します。

Amplify 初期化

①下記のコマンドを実行します。

②下記のような情報を入力してください。

Amplifyライブラリ設置

①下記のコマンドを実行します。

・npm install aws-amplify @aws-amplify/ui-react

フロントエンド設定

①Reactプロジェクトのsrc/index.js に下記のコードを追加します。

//index.js

import { Amplify } from ‘aws-amplify’;

import awsExports from ‘./aws-exports’;

Amplify.configure(awsExports);

Amplify Auth追加

①下記のコマンドでauthを追加します。

・amplify add auth

・Do you want to use the default authentication and security configuration? Default configuration

・How do you want users to be able to sign in? Username

・Do you want to configure advanced settings? No, I am done. amplify push

ログインUI生成

①プロジェクトのsrc/App.jsで下記のように変更します。

import ‘./App.css’; import { Authenticator } from ‘@aws-amplify/ui-react’;

import ‘@aws-amplify/ui-react/styles.css’;

function App() { return (

<Authenticator>

{({ signOut, user }) => (

<div>

<h1>Hello {user.username}</h1>

<button onClick={signOut}>Sign out</button>

</div>

)}

</Authenticator>

);

} export default App;

②アプリを実行します。

-npm start

③ログイン画面が表示されていることが確認できます。

※CreateAccountをした時、下記のようにエラーになってしまい、「yarn install」を行ったら解決出来ました。

※Amplify追加について、下記のサイトを参照してください

Set up Amplify CLI - React - AWS Amplify Gen 1 Documentation
GettingstartedwithAmplify-PrerequisitesAWSAmplifyDocumentation

終わりに

今回の記事は以上になります。

質問がございましたら、コメントを残ってください。

ご覧いただきありがとうございます。

AWS
スポンサーリンク
dreamhanksをフォローする
スポンサーリンク
DreamHanks Blog

コメント