AWS の開始方法

React アプリケーションの構築

AWS Amplify を使用してシンプルなウェブアプリケーションを作成する

モジュール 3: 認証を追加する

このモジュールでは、Amplify CLI とライブラリを使用して、認証を設定し、アプリに追加します。

はじめに

次に追加する機能は認証です。このモジュールでは、マネージド型のユーザー ID サービスである Amazon Cognito を利用して、Amplify CLI とライブラリでユーザーを認証する方法を学びます。

また、Amplify UI コンポーネントライブラリを使用してユーザー認証フロー全体を構築する方法を学び、ユーザーが数行のコードでサインアップ、サインイン、パスワードのリセットを行えるようにします。

学習内容

  • Amplify ライブラリをインストールする
  • 認証サービスを作成してデプロイする
  • React アプリを設定して認証を含める

主要な概念

Amplify ライブラリ – Amplify ライブラリにより、ウェブまたはモバイルアプリケーションから AWS のサービスを操作できます。

認証 – ソフトウェアでは、認証は、認証サービスまたは API を使用してユーザーの ID を確認および管理するプロセスです。

 所要時間

10 分

 使用するサービス

実装

  • Amplify ライブラリをインストールする

    プロジェクトには 2 つの Amplify ライブラリが必要です。メインの aws-amplify ライブラリには、使用するさまざまな AWS のサービスとやり取りするためのすべてのクライアント側 API が含まれ、@ aws-amplify/ui-react ライブラリにはフレームワーク固有の UI コンポーネントが含まれています。これらのライブラリをプロジェクトのルートにインストールしてください。

    npm install aws-amplify @aws-amplify/ui-react
  • 認証サービスを作成する

    認証サービスを作成するには、Amplify CLI を使用します。

    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 コマンドを実行して認証サービスをデプロイできます。

    amplify push --y
  • Amplify リソースを使用して React プロジェクトを設定する

    CLI が作成し、プロジェクトの src ディレクトリにある aws-exports.js というファイルを引き続き更新します。このファイルを使用して、Amplify プロジェクトで使用できるさまざまな AWS リソースについて React プロジェクトに伝えていきます。

    これらのリソースを使用してアプリを設定するには、src/index.js を開き、最後のインポートの下に次のコードを追加します。

    import Amplify from 'aws-amplify';
    import config from './aws-exports';
    Amplify.configure(config);
    
  • App.js に認証フローを追加する

    次に、src/App.js を開き、次のコードで更新します。

    import React from 'react';
    import logo from './logo.svg';
    import './App.css';
    import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react'
    
    function App() {
      return (
        <div className="App">
          <header>
            <img src={logo} className="App-logo" alt="logo" />
            <h1>We now have Auth!</h1>
          </header>
          <AmplifySignOut />
        </div>
      );
    }
    
    export default withAuthenticator(App);
    

    このコンポーネントでは、withAuthenticator コンポーネントを使用しました。このコンポーネントは、ユーザー認証フロー全体を足場にして、ユーザーがサインアップ、サインイン、パスワードのリセット、および多要素認証 (MFA) のサインインの確認を行えるようにします。サインアウトボタンをレンダリングする AmplifySignOut コンポーネントも使用しました。

  • アプリをローカルで実行する

    次に、アプリを実行して、アプリを保護する新しい認証フローを確認します。

    npm start
    Front End Sign In Screen Module 3

    ここで、サインアップを試みると、自動的にサインインします。サインインすると、ユーザーをサインアウトして認証フローを再開するサインアウトボタンが表示されます。

  • 変更をライブ環境にデプロイします

    変更を GitHub にデプロイして、Amplify コンソールで新しいビルドを開始します。

    git add .
    git commit -m “added auth”
    git push origin master
    

まとめ

これで、数行のコードでユーザー認証がアプリに追加されました。 次のモジュールでは、アプリに API を追加します。

このモジュールは役に立ちましたか?

ありがとうございます
このチュートリアルで良かった点をお聞かせください。
ご期待に添えず申し訳ありません
古い説明、わかりにくい説明、間違った説明はございませんでしたか? このチュートリアルの改善のために、ぜひフィードバックをお寄せください。

GraphQL を追加する