React

aws-amplifyでログイン機能を作成する

aws-amplifyを使うと、15分程度でログイン認証機能を作成することができます。

React.jsのプロジェクトが作成済みの段階から開始します。

amplify init

このコマンドでamplifyのプロジェクトを開始します。

次に以下のコマンドを打ちます。

amplify add auth

これで質問に答えていけば、認証機能を作成する準備ができました。

では、以下のモジュールをインストールした上で、srcフォルダのApp.jsを以下のように書き換えてください。

npm install aws-amplify
npm install @aws-amplify/ui-react
//App.js
import React from 'react';
import './App.css';
import Amplify, { Auth } from 'aws-amplify';
import awsconfig from './aws-exports';
import { withAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';

Amplify.configure(awsconfig);

function App() {
  return (
    <div className="App">
ようこそ!
<AmplifySignOut />
    </div>
  );
}

export default withAuthenticator(App);

するとサーバーが3000番ポートで立ち上がり、無事認証画面が立ち上がりました。

-React

Copyright© 起業家のためのプログラミング , 2020 All Rights Reserved Powered by AFFINGER5.