Access制御をAmplifyとReactとDropzoneを使って実装する。Access制御をAmplifyとReactとDropzoneを使って実装する。(その3)」の続きです。Browseが起動して、Login画面が表示されます。Fileを入力できるボタンが表示されます。S3のBucketが空であることを確認しておきます。Bucketをクリックします。Applicationに戻って、FileをUploadします。「Browse」をクリックして、Fileを指定します。Fileを指定して、「開く」をクリックします。File」をクリックします。Uploadできず、Errorが表示されます。Loginしていない状態では、FileのUploadが出来ないことを確認しました。Bucketが空であることを確認しておきます。Loginして、同様にFileをUploadします。File」をクリックします。「Browse」をクリックして、Fileを再指定しても良いです。FileがUploadできました。S3にFileがUploadされているか確認します。Bucketをクリックします。Bucketの内容を表示している画面のままでしたら、更新のIconをクリックします。「protected」というFolderが作成されています。「protected」をクリックします。「ap-northeast-1:」で始まるFolderが作成されています。そのFolderをクリックします。「upload」というFolderが作成されています。「upload」をクリックします。UploadしたFileが見えます。今回は、AmplifyのStorageのLevelにProtectedを指定したので、上記のような階層にFileがUploadされます。StorageのLevelとPolicyを細かく指定することによって、User間でお互いにFileを見れるようにしたり、他のUserからは見れないようにしたりすることが可能です。この方法ではUploadするFileを一つ一つ指定してUploadする必要があります。それでは不便なため、複数のFileを一気にUploadできるようにするためにDropZoneを使ってUploadするFileを指定できるようにします。react-dropzoneをInstallします。Fileを指定するように変更します。Browseが起動して、Login画面が表示されたら、Loginします。Loginすると、UploadするFileをDrag&Dropする領域が出来ています。Uploadする複数のFileをDrag&Dropします。Browserから複数のFileを指定することもできます。ConsoleからS3を開き、UploadされたFileを確認します。それでは、以前と同様にS3にDeployしてみましょう。package.jsonにhomepageのentryが設定されているか確認します。ConsoleからS3を開き、export.hacya.comのindex.htmlのURLを確認して、BrowserでそのURLを開きます。FileをUploadします。Uploadできました。Access制御をAmplifyとReactとDropzoneを使って実装する。Access制御をAmplifyとReactとDropzoneを使って実装する。Applicationを実装します。Hostingをする。」と同じように、まずは、Reactのひな型を作ります。aws-amplify-react前回作成、または、変更したFileを参考に、S3の設定を追加しながら、作成したひな形にCopyします。詳細な説明は、「Cognitoユーザー認証をAmplifyとReactを使って実装する。(その3)」に戻って確認してください。http://bit.ly/CRA-PWAserviceWorker.unregister();services.jsでは、S3の設定を追加します。SetS3Config()というfunctionを定義します。Levelを変更した後、AmplifyのStorage.Configure()をCallして、Amplifyの設定を変更する必要があるためです。“.env”にS3の設定を追加した、5つの情報を設定ます。REACT_APP_region=ap-northeast-1REACT_APP_userPoolId=ap-northeast-1yourPoolIDREACT_APP_userPoolWebClientId=yourWebClientIdREACT_APP_identityPoolId=ap-northeast-1:yourIdentityPoolIdREACT_APP_bucket_name=yourBucketNameAppWithAuth.js、MyVerifyContact.js、MyConfirmSignUp.jsは変更ありません。MyConfirmSignUp;最後にApp.jsを編集して、S3へUploadできるようにします。startからの説明は次回。Access制御をAmplifyとReactとDropzoneを使って実装する。Access制御をAmplifyとReactとDropzoneを使って実装する。(その2)Cognitoで認証されたユーザーの権限を設定します。Roleの2種類があります。Serviceを利用するための権限設定と言えます。Consoleを操作できない仮想のUserを設定することも可能です。Serviceを外側から利用することを想定した権限設定です。Serviceを利用するための権限設定と言えます。Serviceを内側から利用することを想定した権限設定と理解しています。Roleも個々の権限を直に記述して設定することができます。RoleにAttachして権限を構成することもできます。Serviceを利用することになります。RoleにAttachします。ConsoleからIAMを開き、「ポリシー」をクリックします。Policyが表示されます。AmazonS3FullAccessの▶をクリックして、ポリシーの書き方を確認します。ポリシーを設定します。name}に「upload.hacya.com」を入れます。]}「ポリシーの確認」をクリックし、ポリシーの確認をします。ポリシーの確認では、「名前」を設定します。今回は「CognitoS3UploadPolicy」としました。「ポリシーの作成」をクリックし、ポリシーを作成します。ポリシーが作成できたら、左側の「ロール」をクリックします。Poolを作成する時に作成した「Cognito_UserPoolAuth_Role」をクリックします。「CognitoS3UploadPolicy」の左側のチェックボックスをクリックしてチェックを入れます。「ポリシーのアタッチ」をクリックして、ポリシーをアタッチします。これで、Cognitoの認証ユーザーが持つRoleに、S3のAccessに必要な権限を追加したことになります。Access制御をAmplifyとReactとDropzoneを使って実装する。Access制御をAmplifyとReactとDropzoneを使って実装する。Upload機能を実装します。ServiceにS3、ユーザー認証にCognito、Client側はAmplify、Reactを使い、最後にDropZoneによるDrag&Dropを追加します。BucketにFileをUploadできる機能を実現します。Bucketを準備します。ConsoleからS3を開きます。前回作成したBucketが見えると思います。「Bucketを作成する」をクリックしてBucketを作成します。「名前とリージョン」タブでバケット名を入力します。バケット名は、FQDN形式で入力します。AWS全体で重複のない名前を指定する必要があります。今回は、”upload.hacya.com”としました。リージョンは”アジアパシフィック(東京)”を選んでおきましょう。「オプションの設定」タブでは、タグを付けておきましょう。他はデフォルトのままで良いです。「アクセス許可の設定」タブは、デフォルトのままで良いです。今回は認証されたユーザーにのみ、中身を公開します。「確認」タブで、内容を確認して「バケットを作成」ボタンをクリックしてBucketを作成します。作成したBucketのPropertyを見ておきましょう。Windowが開きPropertyが表示されます。Windowsの上の方の「バケットARNをコピーする」をクリックしてARNをクリップボードにコピーし、テキストエディターなどに貼り付け、バケットARNを書き留めておきます。あとで、Policyを作成するときに使います。次に、作成したBucketにCORSを設定します。Sharingの略で、通常ブラウザは異なるドメインからのデータを読み込めないように設定されています。CORSを設定することで、ブラウザが異なるドメインのデータを読み込めるようにすることができます。local環境でテストする場合、ReactのApplicationのDefaultでは、http://localhost:3000がOriginとなり、そこからS3のデータを参照する際、例えば東京リージョンのS3のURL、https://s3-ap-northeast-1.amazonaws.comは異なるドメインという事になります。作成したBucketをクリックして、「アクセス権限」タブをクリック、「CORSの設定」をクリックします。下記の設定を入力し、「保存」をクリックします。<AllowedHeader>*</AllowedHeader></CORSRule></CORSConfiguration>これで、S3の設定は完了です。Access制御をAmplifyとReactとDropzoneを使って実装する。(その1)にコメントCognitoユーザー認証をAmplifyとReactを使って実装する。(その4)実際に作成したApplicationの動作を確認していきます。account」画面が表示されます。ACCOUNT」をクリックして、新しいAccountを作成します。granted」と表示されます。Consoleから認証します。ConsoleからCognitoサービスを開き、「ユーザープールの管理」へ移動します。「ユーザープール」では、作成したユーザープールをクリックし、画面左側の「ユーザーとグループ」タブをクリックします。先ほど作成したユーザーが、「UNCONFIRMED」の状態で表示されます。ユーザー名をクリックして、詳細を表示し、「ユーザーの確認」をクリックします。「アカウントのステータス」が、「Enabled/CONFIRMED」になった事を確認して、画面左側の「ユーザーとグループ」をクリックし、ユーザーの一覧を表示させます。IN」をクリックします。お馴染みのReactの画面が表示されます。Cogintoを使ったServerlessのユーザー管理が出来ることが分かりました。inの状態が分かる、という所まで理解できたと思います。最後に、このApplicationをS3にDeployします。BrowserからAccessしてみましょう。Localで実行した時と同じ画面になり、動作も同じになります。Serverlessでユーザー管理を実現ができることが分かりました。ReactCognitoユーザー認証をAmplifyとReactを使って実装する。(その4)にコメントCognitoユーザー認証をAmplifyとReactを使って実装する。(その3)Client側のAmplifyをInstallします。Hostingをする。」で使用した環境に追加します。aws-amplify-reactClient側のApplicationを作って行きます。ReactのWelcome画面にCognitoユーザー認証を追加します。Amplifyの設定を入れて置く”services”というfileをimportする行を追加します。'./services'そのあとで、Amlifyをconfigureするために、configureAmplify();を呼び出します。/>に変更し、ユーザー認証を追加した描画処理に変更します。http://bit.ly/CRA-PWAserviceWorker.unregister();index.jsからimportされる”services”を準備します。”services”では、Amplifyの設定をしますが、実際の情報は環境変数に設定しておき、起動時に”.env”から読み込むようにしておきます。このようにすることで、環境が変わっても再buildすることなく、環境を変更することができるようになります。directoryに置きます。これらは、Cognitoに接続するための情報ですが、URLのような物で隠す必要はありません。Deviceの認証を追加するなど検討します。ReactDom.renderから最初に描画されるelement、”AppWithAuth.js”を作成します。今回はEメールによる認証を行わないため、Login画面を簡素化しました。単純にusernameとpasswordだけを入力できるようにしています。AppWithAuth;Login画面を簡素化するために、Amplifyが提供している”VerifyContact”、”ConfirmSignUp”をoverrideしてCustomizeしています。Amplifyは手っ取り早くApplicationを作成できるのですが、こういったCustomizeをするのが簡単ではありません。MyConfirmSignUp;最後に、”App.js”を編集して、Loginの状態を表示するようにします。startしてみます。AmplifyのLogin画面が表示されます。次回は、ユーザー認証の方法について説明していきます。ReactCognitoユーザー認証をAmplifyとReactを使って実装する。(その3)にコメントCognitoユーザー認証をAmplifyとReactを使って実装する。Poolを作成します。ConsoleからCognitoを開き、「IDプールの管理」をクリックします。「新しいIDプールの作成」で、「IDプール名」を設定します。「認証プロバイダー」の▶をクリックして開き、「Cognito」タブを設定します。Poolで作成した、「ユーザープールID」と「アプリクライアントID」を設定し、「プールの作成」をクリックします。resources」では、「詳細を表示」の▶をクリックし開きます。IdentityにRoleを設定する必要があり、ここで新しく作成されるRoleが表示されます。ここの画面は英語が混ざっていたり、既存のRoleを設定することが出来なかったり、デフォルト以外のRoleを設定できなかったりと、今一な作りです。「許可」をクリックします。Identityは作成されます。Boardに戻って内容を確認し、必要があれば修正します。Cognitoでの作業開始」では、「ダッシュボードに移動」をクリックして「ダッシュボード」に移動し、右上の「IDプールの編集」をクリックします。「IDプールの編集」では、作成した「IDプールのID」を確認します。このIDは、Amplifyの設定で使用します。Roleが正しく設定されているか確認します。Relationshipsが正しく設定されているか確認します。Poolの作成は完了です。ReactCognitoユーザー認証をAmplifyとReactを使って実装する。(その2)にコメントCognitoユーザー認証をAmplifyとReactを使って実装する。不特定多数のUserにServiceを提供する場合は、特段のユーザー認証は必要ありませんが、不特定多数のUserからAccessを無制限に受け付けてしまうと、意図しないFileがUploadされたり、意図しない情報漏洩が起きたり、と問題となることが考えられます。Onlyとし、認証された特定多数のUserに対し、FileのUploadや、特定の情報を開示するようにすることが必要になります。Base(DB)を使って管理するのが一般的です。Serviceを24時間提供しようとすると、24時間User管理のDBを稼働させておく必要があります。AWSには、CognitoというUser管理Serviceがあり、これを利用すれば自前でUser管理用のDBを稼働させておく必要がなくなります。SourceのLibraryがあり、Client側の実装を簡単に実現できてしまいます。発展途上の感はありますが、これを使ってユーザー認証を実装してCognitoの使い方を把握していきます。configureを実行すると、Server側も設定してくれます。Serviceを運用する側からすると、裏で何が起こっているのか分からないのは気持ちが悪く、Server側の設定は全て把握しておきたい所です。今回は、Server側の設定は手作業で行います。最終的にはScriptにしてDeployの自動化を目指すことになりますが、今はAWSに必要な設定を理解することに主眼を置きます。今回は、特定のユーザーにのみServiceを公開する、という前提で、Eメールでの認証をせず、管理者が手動で認証する方式にします。Poolを作成していきます。ConsoleからCognitoを開きます。「ユーザープールの管理」をクリックして、ユーザープール作成画面に移ります。「ユーザープールを作成する」をクリックして、ユーザープールを作成する画面、名前タブに移ります。「名前」タブでは、「プール名」を入力して、「ステップに従って設定する」をクリックします。「属性」タブに移ったら、「エンドユーザーをどのようにサインインさせますか」では、「ユーザー名」を選択、「どの標準属性が必要ですか?」では、全ての項目のチェックを外します。「カスタム属性を追加しますか」では、「カスタム属性の追加」をクリックして、カスタム属性を追加しておきます。今回は「group」という属性を追加し、変更可能のチェックを外しました。「次のステップ」をクリックします。「ポリシー」タブでは、「パスワードの強度はどれくらいを要求しますか?」は、希望のパスワード強度を設定します。今回は「特殊文字を要求する」のチェックを外しました。「ユーザーに自己サインアップを許可しますか?」は、「ユーザーに自己サインアップを許可する」のチェックのままにします。「有効期限(日数)」は「7」のままにして、「次のステップ」をクリックします。「MFAそして確認」タブ、「メッセージのカスタマイズ」タブは、Eメールを使わないので内容は変更せず「次のステップ」をクリックしていきます。「次のステップ」をクリックします。「デバイス」タブは変更せず、「次のステップ」をクリックします。「アプリクライアント」タブでは、アプリクライアントの設定を行います。このアプリクライアントの情報をAmplifyで使用して、Cognitoのユーザー認証を行うことになります。「アプリクライアント名」を設定して、「クライアントシークレットを作成」のチェックを外し、あとは変更せず、「アプリクライアントの作成」をクリックします。「このユーザープールへのアクセス権限があるアプリクライアントはどれですか?」では、内容を確認して「次のステップ」をクリックします。「トリガー」タブは変更せず、「次のステップ」をクリックします。「確認」タブで内容を確認して、「プールの作成」をクリックします。「ユーザープールは正常に作成されました。」と表示されるので、その下の「プールID」を確認します。Identityの作成時と、Amplifyの設定で使用します。左側の「アプリクライアント」をクリックして、「アプリクライアントID」を確認します。「詳細を表示」をクリックして詳細も確認します。Identityの作成時と、Amplifyの設定で使用します。「シークレットキーなし」になっていることを確認します。Poolが空であることを確認しておきます。Poolの作成が完了しました。ReactCognitoユーザー認証をAmplifyとReactを使って実装する。Hostingをする。S3にDeployしましょう。Fileを一つ一つUploadするのは現実的ではありません。LineからCommand一発で、直接Uploadしたいですよね。Interface)を使ってUploadすることにします。Userを作成します。AWSでは、このような権限管理が徹底していて、強靭なSystemを構成することができます。その反面、設定が煩雑になり、難解で取っつきにくい印象を持たれているように感じます。Serviceを呼び出します。IAMの「ダッシュボード」から、「ユーザ」をクリック、「ユーザを追加」をクリックしてユーザの追加を行います。ConsoleにLoginすることは無いので、チェックしません。「アクセス許可の設定」では、「既存のポリシーを直接アタッチ」をクリックし、「ポリシーのフィルタ」に「S3」を入力し、S3関連のPolicyを表示させます。後々、管理しやすいようにタグを付けておきましょう。内容を確認して、「ユーザの作成」をクリックしてユーザを作成します。ユーザが作成されたら、必ず「.csvのダウンロード」をクリックして、.csvをダウンロードして保存してください。CLIからAWSへのアクセスする際に、.csvに保存されているアクセスキーIDとシークレットアクセスキーを使って認証を行います。このキーペアーが外部に漏れると、外部からAWSへアクセスし悪用される可能性があるため、外部に漏れないように管理してください。作成したユーザを確認しましょう。作成したユーザ名をクリックすると、「概要」の「アクセス権限」タブに許可されている権限が表示されます。「認証情報」タブをクリックして、「サインイン認証情報」の「コンソールパスワード」が無効になっていることを確認します。「アクセスキー」に「アクセスキーID」があることを確認します。このアクセスキーIDに対応するシークレットアクセスキーは、先ほど保存した.csvにあります。紛失した場合は、紛失したアクセスキーIDを無効化し、再度この画面から「アクセスキーの作成」を行うことで再作成することができます。CLIのInstallです。https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/install-windows.htmlを参考にInstallします。Downloadが完了したら、AWSCLI64PY3.msiをダブルクリックしてInstallしていきます。CLIの設定を行います。configureここで、先ほど保存したアクセスキーIDとシークレットアクセスキーを入力します。formatはjsonを指定します。これで環境設定は完了です。次にReactの設定を変更します。前回exportというディレクトリにReactのApplicationを作成しました。exportの直下にpackage.jsonファイルがあります。S3のURLを指定してBuildする必要があるため、”homepage”というエントリを追加します。ApplicationをBuildします。結果は、buildディレクトリに作成されます。S3にDeployします。Syncを使って、S3にCodeをUploadします。BrowserからAccessしてみましょう。ReactをLocalで実行した時と同じ画面になります。S3を使って公開することができることになります。Hostingをする。Hostingをする。Hostingでしたが、今回はReactを使ってみましょう。Pageの更新管理が簡単になります。Node.jsのInstallです。FeaturesをDownloadしてInstallします。(.msi)の64-bitを選びました。現在(2019年6月)のVersionは、V12.5.0で、node-v12.5.0-x64.msiをdownloadして、downloadしたfileをDouble-clickしてInstallします。Modulesでは、Optionを選択せずに進みます。2がInstallされ、あとあと面倒なことになります。このToolが必要なModulesに出くわしたら、その時Installするか考えましょう。Node.jsのInstallが完了しました。Node.jsがInstallされているか確認してみます。同時にnpmがInstallされているか確認してみます。-vnpmは、Node.jsのPackageを管理するApplicationです。npmをFirewallの内側から使用する場合は、proxyの設定が必要になる場合が多いです。Numberは、Windowsの設定を参照します。Editorで設定内容を確認します。Browserにproxy.pacのURLを入力すればTextとしてDownloadすることができます。Applicationを作ります。create-react-appをnpmを使ってInstallします。続けて、create-react-appで、exportというApplicationを作成します。Applicationを立ち上げましょう。startすると、DefaultのBrowserが立ち上がり、http://localhost:3000/を表示します。