実際に作成したApplicationの動作を確認していきます。npm start
すると、DefaultのBrowserが立ち上がり、「Sign in to your account」画面が表示されます。
最初はCognitoに一つもAccountが設定されていないので、下側にある「Create Account」をクリックして、「Create a new account」画面に移動し、UsernameとPasswordを入力、「CREATE ACCOUNT」をクリックして、新しいAccountを作成します。
「Your account is not granted」と表示されます。これは、Eメールでの自動認証の設定をしていないためで、Management Consoleから認証します。
Management ConsoleからCognitoサービスを開き、「ユーザープールの管理」へ移動します。「ユーザープール」では、作成したユーザープールをクリックし、画面左側の「ユーザーとグループ」タブをクリックします。
先ほど作成したユーザーが、「UNCONFIRMED」の状態で表示されます。ユーザー名をクリックして、詳細を表示し、「ユーザーの確認」をクリックします。「アカウントのステータス」が、「Enabled/CONFIRMED」になった事を確認して、画面左側の「ユーザーとグループ」をクリックし、ユーザーの一覧を表示させます。
Browserに戻って、「Goto Signin」をクリックして、「Sign in to your account」画面に戻り、先ほど作成したAccountのUsernameとPasswordを入力し、「SIGN IN」をクリックします。
お馴染みのReactの画面が表示されます。
右上の「SIGN OUT」をクリックしてSign Outすると、 「Sign in to your account」画面に戻り ます。
これで、AWS Cogintoを使ったServerlessのユーザー管理が出来ることが分かりました。
Client側のJava ScriptからCognitoのSign inの状態が分かる、という所まで理解できたと思います。
最後に、このApplicationをS3にDeployします。cd exportnpm run build aws s3 sync --exact-timestamps --delete --acl public-readdirname bucketname
S3にUploadが完了したら、 Web BrowserからAccessしてみましょう。Localで実行した時と同じ画面になり、動作も同じになります。
Serverlessでユーザー管理を実現ができることが分かりました。