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...
Search
hiroyuki8103
January 26, 2019
Programming
0
710
【第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
410
第6回フロントエンド× ビアバッシュ 初心者勉強会_ご案内
hiroyuki8103
0
340
第二回React勉強会.pdf
hiroyuki8103
0
270
第一回 酒がないとReact勉強会_初心者がReactで学ぶのに役立ったサイト/勉強方法を紹介
hiroyuki8103
1
340
Other Decks in Programming
See All in Programming
print("Hello, World")
eddie
2
530
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
Azure SRE Agentで運用は楽になるのか?
kkamegawa
0
2.4k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
400
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
540
Reading Rails 1.0 Source Code
okuramasafumi
0
250
Laravel Boost 超入門
fire_arlo
3
220
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
200
Rancher と Terraform
fufuhu
2
550
AIでLINEスタンプを作ってみた
eycjur
1
230
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
460
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
Featured
See All Featured
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
The Language of Interfaces
destraynor
161
25k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Building Adaptive Systems
keathley
43
2.7k
Practical Orchestrator
shlominoach
190
11k
Agile that works and the tools we love
rasmusluckow
330
21k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Designing for Performance
lara
610
69k
The Invisible Side of Design
smashingmag
301
51k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
30
9.7k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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/