AWSの増幅と認知を使用してアプリケーションを反応させるための認証の追加

AWSの増幅は、フロントエンドの開発者が安全で、スケーラブルな完全なスタックアプリケーションを構築することができます、AWSによって供給されながら、Amazonの認知は、ユーザーのサインアップ、サインインを追加し、迅速かつ容易にあなたのWebおよびモバイルアプリケーションへのアクセス制御を追加することができます.この記事では、我々は我々の反応アプリケーションへの認証を追加するAWSの増幅を使用しています.

Prerequisite

あとに続くために

NPMは、

をインストールしました

AWSアカウント

アウェイプロファイル
あなたがこれらのどれも持っていないならば、私が私がこの記事のそれらのどれについて話すつもりでもないので、あなたにそれをセットアップするように提案します.

Creating React application

さて、開始するには、まず反応アプリケーションを作成する必要があります.我々は、物事を簡単にCRAを使用します.あなたがcraをインストールしたならば、あなたは単に使うことができます

create-react-app my-auth-app

CRAがインストールされていない場合は、単に使用するようにしないでください

npx create-react-app my-auth-app

Installing and initializing Amplify

さて、AWSアンプをインストールする必要があります.また、私たちは自分自身でsignin/signup UIをコード化する必要はありませんので、認証のための事前に構築された反応UIをインストールすることです.一度インストールすると、我々は、増幅を初期化することができます.

cd my-auth-app
npm i aws-amplify @aws-amplify/ui-react
amplify init

それで、我々はちょうど我々のディレクトリに移動して、AWS AmplifyとUI反応のためにコマンドをヒットしました.次に、増幅を初期化します.一旦初期化されると、いくつかの質問があります.

プロジェクト(私のAuthアプリ)

の名前を入力します

環境

の名前を入力します

あなたのデフォルトエディタ

を選んでください

あなたが

を構築しているアプリの種類を選択します

JavaScriptフレームワークは、

を使用していますか

ソースディレクトリパス( src )

ディストリビューションディレクトリパス( build )

ビルドコマンド

起動コマンド

AWSプロファイル( Y/N )

を使いますか
あなたは2と10以外のすべての他の質問の入力を打つことができます.環境名には、' test 'または' dev 'のいずれかを入力できます.私は' dev 'を好みます.
質問10については、一度入力したら、AWSプロファイルが表示されます.

Adding authentication

それは我々が最終的に我々のプロジェクトに認証を追加する時間です.これを行うには

amplify add auth

さて、もう一度質問のセットをプロンプトが表示されます.

デフォルトの認証とセキュリティ設定を使用しますか?

どのようにしてユーザーがログインできますか?

高度な設定を設定しますか?

デフォルトのオプションは十分に我々の単純なアプリのためだけで、すべての上記の質問のための入力を押すと良いです.認証が行われました.さて、クラウドのセットアップのために、我々はちょうどそれを押しなければなりません.使う

amplify push

あなたは“あなたは確かな”質問で、我々は雲のユーザープールを展開したいとして入力を押すとプロンプトが表示されます.展開プロセスを開始し、CloudFormationスタックを展開します.4分5分かかるかもしれません.一度完了すると、我々は反応を使用してCogintoを使用して、UIの反応からUIを認証を追加することができます.
今、我々は我々の反応アプリケーションを構成する必要があります.これを行うには、任意のコードエディターでプロジェクトを開きます.私は私のケースではVSコードを使用しているが、いずれかのテキストエディタを使用して自由に感じ、いずれかの最高のスーツ.
src/indexを編集します.jsファイル

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

import config from "./aws-exports";
import Amplify from "aws-amplify";
Amplify.configure(config);

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById("root")
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

さて、src/appを編集します.jsファイル

import React from "react";
import { withAuthenticator, AmplifySignOut } from "@aws-amplify/ui-react";

const App = () => (
  <div>
    <AmplifySignOut />
    My App
  </div>
);

export default withAuthenticator(App);

プロジェクトを保存し

npm start

何か問題がない場合は、次の画面が表示されます

ユーザーを作成することで試してみることができます.新しいユーザーを作成するときは、確認プロセスを完了するために入力する電子メールに検証コードを用意されます.一度証明書を提供することによって署名することができます検証.

Thanks for reading. You can find the complete project on GitHub