【第6回】フロントエンド× ビアバッシュ[React Native, React] × AWS Amplify

認証認可をAWS Cognitoにまかせる際に、提供されているJavascriptライブラリを使えば超簡単に認証付きページが完成する話

Transcript

1. [React Native, React, Vuejs]  AWS Amplify  SMS    @hiromb1804
2. Jehb u hiro ##! u /(?@4%'C-9$ u RubyGUVQ 3AY PKRa# u OSier=B1)6PKW\c! u DIM[ =B1)6/+;."NF  Z SX^H <BC6'C7:2)'C7_`"idjT React Native LaravelAWS       'C-9$UI/UX5,&8>*0fLg]E
3.     ! "#"$ % & 
4. 6;6@!$" :A JS%*' + .? (&()< CFE u 6;6@# 9-07D 8 =,> (Outh2.0, Open ID Connect…) u AWSFirebaseAuth0 31 Javascript( &()< FE 429 u B AWS5/%*'+ < (&() 31  React
   React Native
   Vue
   Angular
   Ionic
5. 2BReact?AC)! @101H5 ReactIG@ Amplify+'+, ."%- AWS Amplify CLI ."%->9;4 create-react-app amplify configure amplify init amplify add auth amplify push amplify add hosting ?AED *"$.ED073: React &</F= WEB %86 amplify publish "$#( "$#( "$#( "$#( WEB  
6. React   
    u React   
    u create-react-app project-name u cd project-name u npm install aws-amplify aws-amplify-react
     u npm start
7. AWS Amplify CLI "(- '#+)!$ u amplify-cli  amplify congigure '# u npm install -g @aws-amplify/cli u amplify configure &ap-northeast-1 *# accessKeyIDsecretAccessKey %, . !$ 
8. AWS 
     
   ID
    
   
9. amplify init u  $ #"!   u javascript → react %
    OK
10. amplify init
    3 u  AWS   ←AWS CloudFormation 
11. amplify init / 3 u ;:9? >@0)%! +3  u amplify status" 72amplify add 28-4$"&<1  amplify publish #,*'. 6(%! =5
12. amplify add auth Cognito amplify add hosting S3 u    
13. aws-exports.js src$ %!#" u amplify push  amplify publish   
    amplify auth  
    amplify push  
14. React   index.js App.js   3
15. 1
     1
    
16. amplify add publish     URL 
    http://2reactcognito-20190126130822-hostingbucket.s3-website-ap-northeast- 1.amazonaws.com/
17. 
    
18.  SMS"!$#    
    u   u SMS 
19. JWT    
    (WEB  )
20. AWS Cognito  
      
     
21.  
     !    
22. React Native  Vue % (' u  WEB  S3 publish %   "# &!(' $ 
23.  u How to Build Cloud-Powered Mobile Apps with Expo & AWS Amplify https://blog.expo.io/how-to-build-cloud-powered-mobile-apps-with-expo-aws- amplify-2fddc898f9a2 u AWS Amplify + React.js    https://qiita.com/monamu/items/f40836cd4b1b14a13c68 u AWS Amplify React   
     https://dev.classmethod.jp/client-side/javascript/amplify-custom-signup/
24.