{"id":147,"date":"2019-07-11T22:00:50","date_gmt":"2019-07-11T13:00:50","guid":{"rendered":"https:\/\/blog.hacya.com\/?p=147"},"modified":"2019-09-01T13:44:58","modified_gmt":"2019-09-01T04:44:58","slug":"cognitoamplifyreact3","status":"publish","type":"post","link":"https:\/\/blog.hacya.com\/index.php\/2019\/07\/11\/cognitoamplifyreact3\/","title":{"rendered":"Cognito\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u3092Amplify\u3068React\u3092\u4f7f\u3063\u3066\u5b9f\u88c5\u3059\u308b\u3002(\u305d\u306e3)"},"content":{"rendered":"\n

Client\u5074\u306eAmplify\u3092Install\u3057\u307e\u3059\u3002\u74b0\u5883\u306f\u524d\u56de\u300cReact\u3092\u4f7f\u3063\u3066Static\u306aWeb Hosting\u3092\u3059\u308b\u3002<\/a>\u300d\u3067\u4f7f\u7528\u3057\u305f\u74b0\u5883\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002
npm install --save aws-amplify aws-amplify-react<\/code><\/p>\n\n\n\n

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

Client\u5074\u306eApplication\u3092\u4f5c\u3063\u3066\u884c\u304d\u307e\u3059\u3002React\u306eWelcome\u753b\u9762\u306bCognito\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n\n\n\n

\u521d\u3081\u306b\u8aad\u307f\u8fbc\u307e\u308c\u308b\u3001index.js\u306bAWS Amplify\u306e\u8a2d\u5b9a\u3092\u5165\u308c\u3066\u7f6e\u304f”services”\u3068\u3044\u3046file\u3092import\u3059\u308b\u884c\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002
import { configureAmplify } from '.\/services'<\/code>
\u305d\u306e\u3042\u3068\u3067\u3001Amlify\u3092configure\u3059\u308b\u305f\u3081\u306b\u3001
configureAmplify();<\/code>
\u3092\u547c\u3073\u51fa\u3057\u307e\u3059\u3002ReactDom.render\u306b\u6e21\u3059element\u3092<App \/>\u304b\u3089<AppWithAuth \/>\u306b\u5909\u66f4\u3057\u3001\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u3092\u8ffd\u52a0\u3057\u305f\u63cf\u753b\u51e6\u7406\u306b\u5909\u66f4\u3057\u307e\u3059\u3002
ReactDOM.render(<AppWithAuth \/>, document.getElementById('root'));<\/code><\/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
index.js\u304b\u3089import\u3055\u308c\u308b”services”\u3092\u6e96\u5099\u3057\u307e\u3059\u3002”services”\u3067\u306f\u3001Amplify\u306e\u8a2d\u5b9a\u3092\u3057\u307e\u3059\u304c\u3001\u5b9f\u969b\u306e\u60c5\u5831\u306f\u74b0\u5883\u5909\u6570\u306b\u8a2d\u5b9a\u3057\u3066\u304a\u304d\u3001\u8d77\u52d5\u6642\u306b”.env”\u304b\u3089\u8aad\u307f\u8fbc\u3080\u3088\u3046\u306b\u3057\u3066\u304a\u304d\u307e\u3059\u3002\u3053\u306e\u3088\u3046\u306b\u3059\u308b\u3053\u3068\u3067\u3001\u74b0\u5883\u304c\u5909\u308f\u3063\u3066\u3082\u518dbuild\u3059\u308b\u3053\u3068\u306a\u304f\u3001\u74b0\u5883\u3092\u5909\u66f4\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n\n\n\n
import Amplify from '@aws-amplify\/core';\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 } );\n}<\/code><\/pre><\/div>\n\n\n\n
“.env”\u30674\u3064\u306e\u60c5\u5831\u3092\u8a2d\u5b9a\u3057\u3001project\u306eroot directory\u306b\u7f6e\u304d\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>
\u3053\u308c\u3089\u306e\u60c5\u5831\u306f\u3001Cognito User Pool\u3092\u4f5c\u6210\u3057\u305f\u6642\u306b\u751f\u6210\u3055\u308c\u305fUser ID\u3001App Client ID\u3068\u3001Cognito Identity Pool\u3092\u4f5c\u6210\u3057\u305f\u6642\u306b\u751f\u6210\u3055\u308c\u305fIdentity Pool ID\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002\u3053\u308c\u3089\u306f\u3001Cognito\u306b\u63a5\u7d9a\u3059\u308b\u305f\u3081\u306e\u60c5\u5831\u3067\u3059\u304c\u3001URL\u306e\u3088\u3046\u306a\u7269\u3067\u96a0\u3059\u5fc5\u8981\u306f\u3042\u308a\u307e\u305b\u3093\u3002\u30dc\u30c3\u30c8\u306b\u3088\u308b\u653b\u6483\u3092\u907f\u3051\u308b\u305f\u3081\u306b\u306f\u3001Cognito User Pool\u306e\u4f5c\u6210\u306e\u969b\u306b\u3001Client Device\u306e\u8a8d\u8a3c\u3092\u8ffd\u52a0\u3059\u308b\u306a\u3069\u691c\u8a0e\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
\u6b21\u306b\u3001 ReactDom.render\u304b\u3089\u6700\u521d\u306b\u63cf\u753b\u3055\u308c\u308belement\u3001”AppWithAuth.js”\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002\u4eca\u56de\u306fE\u30e1\u30fc\u30eb\u306b\u3088\u308b\u8a8d\u8a3c\u3092\u884c\u308f\u306a\u3044\u305f\u3081\u3001Login\u753b\u9762\u3092\u7c21\u7d20\u5316\u3057\u307e\u3057\u305f\u3002\u5358\u7d14\u306busername\u3068password\u3060\u3051\u3092\u5165\u529b\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059\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;\n<\/code><\/pre><\/div>\n\n\n\n
Login\u753b\u9762\u3092\u7c21\u7d20\u5316\u3059\u308b\u305f\u3081\u306b\u3001Amplify\u304c\u63d0\u4f9b\u3057\u3066\u3044\u308b”VerifyContact”\u3001”ConfirmSignUp”\u3092override\u3057\u3066Customize\u3057\u3066\u3044\u307e\u3059\u3002Amplify\u306f\u624b\u3063\u53d6\u308a\u65e9\u304fApplication\u3092\u4f5c\u6210\u3067\u304d\u308b\u306e\u3067\u3059\u304c\u3001\u3053\u3046\u3044\u3063\u305fCustomize\u3092\u3059\u308b\u306e\u304c\u7c21\u5358\u3067\u306f\u3042\u308a\u307e\u305b\u3093\u3002<\/p>\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\u306b\u3001”App.js”\u3092\u7de8\u96c6\u3057\u3066\u3001Login\u306e\u72b6\u614b\u3092\u8868\u793a\u3059\u308b\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n\n\n\n
import React from 'react';\nimport logo from '.\/logo.svg';\nimport '.\/App.css';\n\nfunction App(props) {\n\n  if(props.authState === 'signedIn') {\n    return (\n      <div className="App">\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        <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
\u4eca\u56de\u306fLocal\u74b0\u5883\u304b\u3089npm start\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
\"\"<\/figure>\n\n\n\n
Amplify\u306eLogin\u753b\u9762\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/p>\n\n\n\n
\u6b21\u56de\u306f\u3001\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u306e\u65b9\u6cd5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u3066\u3044\u304d\u307e\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
Client\u5074\u306eAmplify\u3092Install\u3057\u307e\u3059\u3002\u74b0\u5883\u306f\u524d\u56de\u300cReact\u3092\u4f7f\u3063\u3066Static\u306aWeb Hosting\u3092\u3059\u308b\u3002\u300d\u3067\u4f7f\u7528\u3057\u305f\u74b0\u5883\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002npm install –save aws-amplify  … “Cognito\u30e6\u30fc\u30b6\u30fc\u8a8d\u8a3c\u3092Amplify\u3068React\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,13,7],"class_list":["post-147","post","type-post","status-publish","format-standard","hentry","category-aws","tag-amplify","tag-aws","tag-cognito","tag-react"],"_links":{"self":[{"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/posts\/147","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=147"}],"version-history":[{"count":10,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/posts\/147\/revisions"}],"predecessor-version":[{"id":260,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/posts\/147\/revisions\/260"}],"wp:attachment":[{"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/media?parent=147"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/categories?post=147"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hacya.com\/index.php\/wp-json\/wp\/v2\/tags?post=147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}