{"id":257,"date":"2019-09-01T18:00:17","date_gmt":"2019-09-01T09:00:17","guid":{"rendered":"https:\/\/blog.hacya.com\/?p=257"},"modified":"2021-07-04T14:57:33","modified_gmt":"2021-07-04T05:57:33","slug":"cognitos3amplifyreactdropzone3","status":"publish","type":"post","link":"https:\/\/blog.hacya.com\/index.php\/2019\/09\/01\/cognitos3amplifyreactdropzone3\/","title":{"rendered":"Cognito\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u306b\u3088\u308bS3 \u306eAccess\u5236\u5fa1\u3092Amplify\u3068React\u3068Dropzone\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3059\u308b\u3002(\u305d\u306e3)"},"content":{"rendered":"\n

Web Application\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002\u300cReact\u3092\u4f7f\u3063\u3066Static\u306aWeb Hosting\u3092\u3059\u308b\u3002<\/a>\u300d\u3068\u540c\u3058\u3088\u3046\u306b\u3001\u307e\u305a\u306f\u3001React\u306e\u3072\u306a\u578b\u3092\u4f5c\u308a\u307e\u3059\u3002
create-react-app upload<\/code>
cd upload<\/code>
npm install -save aws-amplify aws-amplify-react<\/code><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n

\u524d\u56de\u4f5c\u6210\u3001\u307e\u305f\u306f\u3001\u5909\u66f4\u3057\u305fFile\u3092\u53c2\u8003\u306b\u3001S3\u306e\u8a2d\u5b9a\u3092\u8ffd\u52a0\u3057\u306a\u304c\u3089\u3001\u4f5c\u6210\u3057\u305f\u3072\u306a\u5f62\u306bCopy\u3057\u307e\u3059\u3002\u8a73\u7d30\u306a\u8aac\u660e\u306f\u3001\u300cCognito\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u3092Amplify\u3068React\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3059\u308b\u3002(\u305d\u306e3)<\/a>\u300d\u306b\u623b\u3063\u3066\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n\n\n\n

import React from 'react';\nimport ReactDOM from 'react-dom';\nimport '.\/index.css';\nimport AppWithAuth from '.\/AppWithAuth';\nimport * as serviceWorker from '.\/serviceWorker';\n\n\/\/Import Amplify Configure function\nimport { configureAmplify } from '.\/services'\n\nconfigureAmplify();\n\nReactDOM.render(<AppWithAuth \/>, document.getElementById('root'));\n\n\/\/ If you want your app to work offline and load faster, you can change\n\/\/ unregister() to register() below. Note this comes with some pitfalls.\n\/\/ Learn more about service workers: http:\/\/bit.ly\/CRA-PWA\nserviceWorker.unregister();<\/code><\/pre><\/div>\n\n\n\n
services.js\u3067\u306f\u3001S3\u306e\u8a2d\u5b9a\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002\u307e\u305f\u3001SetS3Config()\u3068\u3044\u3046function\u3092\u5b9a\u7fa9\u3057\u307e\u3059\u3002Bucket\u3084S3\u306eAccess Level\u3092\u5909\u66f4\u3057\u305f\u5f8c\u3001Amplify\u306eStorage.Configure()\u3092Call\u3057\u3066\u3001Amplify\u306e\u8a2d\u5b9a\u3092\u5909\u66f4\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u305f\u3081\u3067\u3059\u3002<\/p>\n\n\n\n
import Amplify from '@aws-amplify\/core';\nimport Auth from '@aws-amplify\/auth';\nimport Storage from '@aws-amplify\/storage';\n\nexport function configureAmplify() {\n  Amplify.configure(\n  {\n    Auth: {\n      region: process.env.REACT_APP_region,\n      userPoolId: process.env.REACT_APP_userPoolId,\n      userPoolWebClientId: process.env.REACT_APP_userPoolWebClientId,\n      identityPoolId: process.env.REACT_APP_identityPoolId,\n    },\n    Storage: {\n      AWSS3: {\n        bucket: process.env.REACT_APP_bucket_name,\n        region: process.env.REACT_APP_region,\n      }\n    }\n\n  } );\n}\n\n\/\/Configure Storage with S3 bucket information\nexport function SetS3Config(bucket, level){\n  Auth.configure({\n    region:  process.env.REACT_APP_region,\n    identityPoolId: process.env.REACT_APP_identityPoolId,\n  });\n  Storage.configure({ \n    bucket: bucket,\n    level: level,\n  });\n}<\/code><\/pre><\/div>\n\n\n\n
project\u306eroot directory\u306e  \u201c.env\u201d\u306bS3\u306e\u8a2d\u5b9a\u3092\u8ffd\u52a0\u3057\u305f\u30015\u3064\u306e\u60c5\u5831\u3092\u8a2d\u5b9a\u307e\u3059\u3002
REACT_APP_region=ap-northeast-1<\/code>
REACT_APP_userPoolId=ap-northeast-1yourPoolID<\/em><\/code>
REACT_APP_userPoolWebClientId=yourWebClientId<\/em><\/code>
REACT_APP_identityPoolId=ap-northeast-1:yourIdentityPoolId<\/em><\/code>
REACT_APP_bucket_name=yourBucketName<\/em><\/code><\/p>\n\n\n\n
AppWithAuth.js\u3001MyVerifyContact.js\u3001MyConfirmSignUp.js\u306f\u5909\u66f4\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\n\n\n\n
import React from 'react';\nimport { Authenticator, ConfirmSignIn, RequireNewPassword, ConfirmSignUp, VerifyContact, ForgotPassword, TOTPSetup } from 'aws-amplify-react';\nimport App from ".\/App";\nimport MyVerifyContact from ".\/MyVerifyContact"\nimport MyConfirmSignUp from ".\/MyConfirmSignUp"\n\nconst signUpConfig = {\n  hideAllDefaults: true,\n  signUpFields: [\n    {\n      label: 'Username',\n      key: 'username',\n      required: true,\n      placeholder: 'Username',\n      displayOrder: 1\n    },\n    {\n      label: 'Password',\n      key: 'password',\n      required: true,\n      placeholder: 'Password',\n      type: 'password',\n      displayOrder: 2\n    }\n  ]\n}\n\nfunction AppWithAuth() {\n\n  function handleAuthStateChange(state, data) {\n    if (state === 'confirmSignIn') {\n        \/* Do something when the user has signed-in *\/\n    }\n  }\n\n  return (\n    <Authenticator signUpConfig={signUpConfig} hide={[ConfirmSignIn, RequireNewPassword, VerifyContact, ConfirmSignUp, ForgotPassword, TOTPSetup]} onStateChange={handleAuthStateChange}>\n      <MyVerifyContact override={VerifyContact} \/>\n      <MyConfirmSignUp override={ConfirmSignUp} \/>\n      <App \/>\n    <\/Authenticator>\n  )\n}\n\nexport default AppWithAuth;<\/code><\/pre><\/div>\n\n\n\n
import { AuthPiece } from 'aws-amplify-react';\n\nclass MyVerifyContact extends AuthPiece {\n  constructor(props) {\n    super(props);\n    this._validAuthStates = ["verifyContact"];\n    this.state = {}\n  }\n\n  static getDerivedStateFromProps(props, state) {\n    if(props.authState === "verifyContact") {\n      props.onStateChange('signedIn');\n      return props;\n    } else {\n      return null;\n    }\n  }\n\n  showComponent(theme) {\n    return null;\n  }\n\n}\n\nexport default MyVerifyContact;<\/code><\/pre><\/div>\n\n\n\n
import React from 'react';\n\nimport { I18n } from 'aws-amplify';\nimport { AuthPiece } from 'aws-amplify-react';\n\nimport {\n  FormSection,\n  SectionHeader,\n  SectionBody,\n  SectionFooter,\n  Button\n} from 'aws-amplify-react';\n\nclass MyConfirmSignUp extends AuthPiece {\n  constructor(props) {\n    super(props);\n    this._validAuthStates = ["confirmSignUp"];\n    this.gotoSignIn = this.gotoSignIn.bind(this);\n  }\n\n  gotoSignIn() {\n    super.changeState('signIn');\n  }\n\n  showComponent(theme) {\n    return (\n      <FormSection theme={theme}>\n        <SectionHeader theme={theme}>{I18n.get('Please contact your administrator to grant your account.')}<\/SectionHeader>\n        <SectionBody theme={theme}>\n        <\/SectionBody>\n        <SectionFooter theme={theme}>\n          <Button onClick={this.gotoSignIn} theme={theme}>\n            {I18n.get('Goto SignIn')}\n          <\/Button>\n        <\/SectionFooter>\n      <\/FormSection>\n    );\n\n  }\n\n}\n\nexport default MyConfirmSignUp;<\/code><\/pre><\/div>\n\n\n\n
\u6700\u5f8c\u306bApp.js\u3092\u7de8\u96c6\u3057\u3066\u3001S3\u3078Upload\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
import React, { useState, createRef }  from 'react';\nimport logo from '.\/logo.svg';\nimport Storage from "@aws-amplify\/storage";\nimport { SetS3Config } from ".\/services";\nimport '.\/App.css';\n\nfunction App(props) {\n\n  const [uploadFile, setUploadFile] = useState({});\n  const [response, setResponse] = useState("");\n  const uploadRef = createRef();\n  const onInputClick = () => {\n    if(uploadRef.current) {\n      uploadRef.current.value = null;\n      uploadRef.current.click();\n    }\n    setResponse("");\n  }\n\n  function uploadFileToS3() {\n    SetS3Config(process.env.REACT_APP_bucket_name, "protected");\n    Storage.put(`upload\/${uploadFile.name}`,\n                uploadFile,\n                { contentType: uploadFile.type })\n      .then(result => {\n        console.log(result);\n        setUploadFile({});\n        setResponse("File is uploaded!");\n      })\n      .catch(err => {\n        console.log(err);\n        setResponse(`File is not uploaded: ${err}`);\n      });\n  };\n\n  function InputUploadFile(props) {\n    return(\n      <div  align="center">\n        <input\n          type="file"\n          style={{ display: "none" }}\n          accept="image\/tif, image\/tiff"\n          ref={uploadRef}\n          onChange={(e) => setUploadFile(e.target.files[0])}\n        \/>\n        <input value={uploadFile.name} placeholder="Select file" \/>\n        <button onClick={onInputClick}> Browse <\/button>\n        <button onClick={uploadFileToS3}> Upload File <\/button>\n\n        {!!response && <div>{response}<\/div>}\n      <\/div>\n    )\n  }\n\n  if(props.authState === 'signedIn') {\n    return (\n      <div className="App">\n        <InputUploadFile \/>\n\n        <header className="App-header">\n          <img src={logo} className="App-logo" alt="logo" \/>\n          <p>\n            Edit <code>src\/App.js<\/code> and save to reload.\n          <\/p>\n          <a\n            className="App-link"\n            href="https:\/\/reactjs.org"\n            target="_blank"\n            rel="noopener noreferrer"\n          >\n            Learn React\n          <\/a>\n        <\/header>\n      <\/div>\n    );\n  } else if(props.authState === 'confirmSignUp') {\n    return (\n      <div className="Your account is not granted">\n        <header className="App-header">\n          Your account is not granted.\n        <\/header>\n      <\/div>\n    );\n  } else if(props.authState === 'signIn') {\n    return (\n      <div className="Welcome to the world">\n        <InputUploadFile \/>\n\n        <header className="App-header">\n          Welcome to the world.\n        <\/header>\n      <\/div>\n    );\n  } else {\n    return (\n      <div className="Login failed">\n        <header className="App-header">\n          Login failed.\n        <\/header>\n      <\/div>\n    );\n  }\n}\n\nexport default App;<\/code><\/pre><\/div>\n\n\n\n
npm start\u304b\u3089\u306e\u8aac\u660e\u306f\u6b21\u56de\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Web Application\u3092\u5b9f\u88c5\u3057\u307e\u3059\u3002\u300cReact\u3092\u4f7f\u3063\u3066Static\u306aWeb Hosting\u3092\u3059\u308b\u3002\u300d\u3068\u540c\u3058\u3088\u3046\u306b\u3001\u307e\u305a\u306f\u3001React\u306e\u3072\u306a\u578b\u3092\u4f5c\u308a\u307e\u3059\u3002create-react-app uploadcd upl … “Cognito\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u306b\u3088\u308bS3 \u306eAccess\u5236\u5fa1\u3092Amplify\u3068React\u3068Dropzone\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3059\u308b\u3002(\u305d\u306e3)” \u306e<\/span>\u7d9a\u304d\u3092\u8aad\u3080<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[14,4,10,13,17,7],"class_list":["post-257","post","type-post","status-publish","format-standard","hentry","category-aws","tag-amplify","tag-aws","tag-s3","tag-cognito","tag-dropzone","tag-react"],"_links":{"self":[{"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/posts\/257","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/comments?post=257"}],"version-history":[{"count":5,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/posts\/257\/revisions"}],"predecessor-version":[{"id":307,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/posts\/257\/revisions\/307"}],"wp:attachment":[{"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/media?parent=257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/categories?post=257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/tags?post=257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}