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

902224621c1e67059a4b8ede19211ef5?s=47 hiroyuki8103
January 26, 2019
Programming
0
270

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

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

902224621c1e67059a4b8ede19211ef5?s=128

hiroyuki8103

January 26, 2019
Tweet

Want more?

902224621c1e67059a4b8ede19211ef5?s=48 hiroyuki8103
1
120
902224621c1e67059a4b8ede19211ef5?s=48 hiroyuki8103
0
71
902224621c1e67059a4b8ede19211ef5?s=48 hiroyuki8103
0
150
3ab1249be442027903e1180025340b3f?s=48 reverentgeek
13
790
A9a491b0fcbe0fbce3d64063a37add99?s=48 rmw
4
430
766b9746b59e6f09e280cd33cf4ed419?s=48 skipperchong
0
270
61857dafbd287b3027c4dcea9008ad3c?s=48 carmenhchung
8
560
06f8b41980eb4c577fa40c41d5030c19?s=48 keathley
9
310
C0390e8b11079f8761c0cd3274ed61cb?s=48 productmarketing
3
350
C35e01544a0dd94a2cf1619ee8a42ebb?s=48 clairelew
4
820
6bb82b13cda86d3b821fa44100335ddf?s=48 thoeni
1
210
B3ace07412a5178ea778e7eec161fc0a?s=48 jcasabona
4
290

Transcript

  1. 1.

    [React Native, React, Vuejs]  AWS Amplify  SMS 

      @hiromb1804
  2. 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. 3.

        ! "#"$ % & 

  4. 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 VueAngularIonic
  5. 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. 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. 7.

    AWS Amplify CLI "(- '#+)!$ u amplify-cli  amplify congigure

    '# u npm install -g @aws-amplify/cli u amplify configure &ap-northeast-1 *# accessKeyIDsecretAccessKey %, . !$ 
  8. 8.

    AWS     ID   

  9. 9.

    amplify init u  $ #"!   u javascript

    → react %  OK
  10. 10.

    amplify init 3 u  AWS   ←AWS CloudFormation

    
  11. 11.

    amplify init / 3 u ;:9? >@0)%! +3  u

    amplify status" 72amplify add 28-4$"&<1  amplify publish #,*'. 6(%! =5
  12. 12.

    amplify add auth Cognito amplify add hosting S3 u 

      
  13. 13.

    aws-exports.js src$ %!#" u amplify push  amplify publish 

      amplify auth  amplify push  
  14. 14.

    React   index.js App.js   3

  15. 15.

    1 1

  16. 16.

    amplify add publish     URL  http://2reactcognito-20190126130822-hostingbucket.s3-website-ap-northeast-

    1.amazonaws.com/
  17. 17.

    

  18. 18.

     SMS"!$#      u  

    u SMS 
  19. 19.

    JWT    (WEB  )

  20. 20.

    AWS Cognito      

  21. 21.

       !    

  22. 22.

    React Native  Vue % (' u  WEB 

    S3 publish %   "# &!(' $ 
  23. 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. 24.