AWS の開始方法

フルスタック React アプリケーションを構築する

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

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

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

概要

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

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

実行する内容

このモジュールでは、次のことを行います。
  • Amplify ライブラリをインストールする
  • 認証サービスを作成してデプロイする
  • React アプリを設定して認証を含める

主要な概念

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

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

 所要時間

10 分

 使用するサービス

実装

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

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

    import { Amplify } from 'aws-amplify';
    import config from './aws-exports';
    Amplify.configure(config);
    
  • 次に、src/App.js を開き、次のコードで更新します。

    import logo from "./logo.svg";
    import "@aws-amplify/ui-react/styles.css";
    import {
      withAuthenticator,
      Button,
      Heading,
      Image,
      View,
      Card,
    } from "@aws-amplify/ui-react";
    
    function App({ signOut }) {
      return (
        <View className="App">
          <Card>
            <Image src={logo} className="App-logo" alt="logo" />
            <Heading level={1}>We now have Auth!</Heading>
          </Card>
          <Button onClick={signOut}>Sign Out</Button>
        </View>
      );
    }
    
    export default withAuthenticator(App);

    このコードでは、withAuthenticator コンポーネントを使用しました。このコンポーネントは、ユーザー認証フロー全体をスキャフォールディングして、ユーザーがサインアップ、サインイン、パスワードのリセット、および多要素認証 (MFA) のサインインの確認を行うことができるようにします。また、ユーザーをログアウトするための [Sign Out] (サインアウト) ボタンも追加しました。

  • リソースのデプロイが完了するのを待ってからアプリケーションを実行すると、アプリケーションを保護する新しい認証フローが表示されます。

    npm start

    ここでサインアップを試すことができます。これを実行すると、検証コードがユーザーのメールアドレス宛てに送信されます。検証コードを使用してアプリにログインします。サインインすると、サインアウトして認証フローを再開する [Sign Out] (サインアウト) ボタンが表示されます。

  • 次に、Amplify 構築プロセスを設定して、継続的デプロイワークフローの一部としてバックエンドを追加する必要があります。ターミナルウィンドウから次を実行します。

    amplify console
    ? Which site do you want to open? AWS console

    これにより、Amplify コンソールが開きます。ナビゲーションペインから [App settings] (アプリの設定) > [Build settings] (ビルドの設定) を選択し、それを変更してバックエンドセクション (以下のコードの 2~7 行目) を amplify.yml に追加します。編集を行った後、[Save] (保存) を選択します。

    version: 1
    backend:
      phases:
        build:
          commands:
            - '# Execute Amplify CLI with the helper script'
            - amplifyPush --simple
    frontend:
      phases:
        preBuild:
          commands:
            - yarn install
        build:
          commands:
            - yarn run build
      artifacts:
        baseDirectory: build
        files:
          - '**/*'
      cache:
        paths:
          - node_modules/**/*

    [Build image settings] (ビルドイメージの設定) まで下方向にスクロールし、[Edit] (編集) を選択します。[Add package version override] (パッケージバージョンのオーバーライドを追加) ドロップダウンを選択し、[Amplify CLI] を選択します。画像で示すように、デフォルトでは最新バージョンに設定されているはずです。

    次に、作成したバックエンド環境をポイントするようにフロントエンドブランチを更新します。ブランチ名の下で、[Edit] (編集) を選択し、作成したステージングバックエンドをメインブランチにポイントします。[Save] (保存) を選択します。

    Please set up a service role...」(サービスロールを設定してください...) というメッセージが表示された場合は、表示される手順に従ってから、サービスロールの設定とアプリへのアタッチを続行してください。

  • ローカルターミナルウィンドウに戻り、変更を GitHub にデプロイして、Amplify コンソールで新しい構築を開始します。

    git add .
    git commit -m "added auth"
    git push origin main
    

まとめ

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

このページはお役に立ちましたか?

API とデータベースを追加する