Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
【第6回】フロントエンド× ビアバッシュ[React Native, React] × AWS Amplify
Search
hiroyuki8103
January 26, 2019
Programming
0
580
【第6回】フロントエンド× ビアバッシュ[React Native, React] × AWS Amplify
認証認可をAWS Cognitoにまかせる際に、提供されているJavascriptライブラリを使えば超簡単に認証付きページが完成する話
hiroyuki8103
January 26, 2019
Tweet
Share
More Decks by hiroyuki8103
See All by hiroyuki8103
【第7回】フロントエンド× ビアバッシュ初心者勉強会 酒がナイト in 神保町
hiroyuki8103
1
320
第6回フロントエンド× ビアバッシュ 初心者勉強会_ご案内
hiroyuki8103
0
250
第二回React勉強会.pdf
hiroyuki8103
0
230
第一回 酒がないとReact勉強会_初心者がReactで学ぶのに役立ったサイト/勉強方法を紹介
hiroyuki8103
1
290
Other Decks in Programming
See All in Programming
Code Reviews
bkuhlmann
4
900
AWS CDKコントリビュートTIPS / aws-cdk-contribution-tips
gotok365
4
380
Three ways to use AI on Android: The Good, the Bad and the Ugly
marxallski
0
110
Site Reliability Engineering for GMO
pyama86
8
1.1k
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
170
OpenAPIを中心に考えるAPI開発入門 / Introduction to API Development with a Focus on OpenAPI
seike460
PRO
2
180
見た目から始める生産性向上
ikumatadokoro
10
1.4k
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
2
130
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
1k
Ruby GitHub Packages
bkuhlmann
0
640
"config" ってなんだ? / What is "config"?
okashoi
0
320
新宿ダンジョンを可視化してみた
satoshi7190
3
390
Featured
See All Featured
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
The Cost Of JavaScript in 2023
addyosmani
20
3.9k
Statistics for Hackers
jakevdp
790
220k
Agile that works and the tools we love
rasmusluckow
325
20k
Writing Fast Ruby
sferik
622
60k
A Tale of Four Properties
chriscoyier
152
22k
4 Signs Your Business is Dying
shpigford
176
21k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Done Done
chrislema
178
15k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
Code Review Best Practice
trishagee
56
15k
Transcript
[React Native, React, Vuejs] AWS Amplify SMS
@hiromb1804
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
! "#"$ % &
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
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
React u React
u create-react-app project-name u cd project-name u npm install aws-amplify aws-amplify-react u npm start
AWS Amplify CLI "(- '#+)!$ u amplify-cli amplify congigure
'# u npm install -g @aws-amplify/cli u amplify configure &ap-northeast-1 *# accessKeyIDsecretAccessKey %, . !$
AWS ID
amplify init u $ #"! u javascript
→ react % OK
amplify init 3 u AWS ←AWS CloudFormation
amplify init / 3 u ;:9? >@0)%! +3 u
amplify status" 72amplify add 28-4$"&<1 amplify publish #,*'. 6(%! =5
amplify add auth Cognito amplify add hosting S3 u
aws-exports.js src$ %!#" u amplify push amplify publish
amplify auth amplify push
React index.js App.js 3
1 1
amplify add publish URL http://2reactcognito-20190126130822-hostingbucket.s3-website-ap-northeast-
1.amazonaws.com/
SMS"!$# u
u SMS
JWT (WEB )
AWS Cognito
!
React Native Vue % (' u WEB
S3 publish % "# &!(' $
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/