Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React + AWSで 会員系SPAを作ってみた話

React + AWSで 会員系SPAを作ってみた話

React kyoto vol.1資料

Hidetaka Okamoto

April 27, 2017
Tweet

More Decks by Hidetaka Okamoto

Other Decks in Technology

Transcript

  1. w 8 P S E # F O D I

    ژ ౎ Ϟ σ Ϩ ʔ λ  w 8 P S E 1 S F T T ೔ ຊ ޠ ϑ Υ ʔ ϥϜ ੈ ࿩ ໾  w 8 P S E $ B N Q  ,Z P U P      ࣮ ߦ ҕ һ ௕  )JEFUBLB0LBNPUP %JHJUBMDVCF%FWFMPQFS
  2. ίϯϙʔωϯτͷ࢖͍ํ <button class="ui small green button"> <i class="download icon"></i> Download

    </button> <Button size='small' color='green'> <Icon name='download' /> Download </Button> ͜͏ͳΔˣ
  3. WFSTJPOͰ݁ߏ͔Θͬͨ import { BrowserRouter as Router, Route, Link } from

    'react-router-dom' $ npm install react-router ͔Β $ npm install react-router-dom ʹมߋ͞Ε͍ͯΔɻ
  4. ηοτΞοϓ import {CognitoUserPool} from ‘amazon-cognito-identity-js’ const UserPool = new CognitoUserPool({

    'ClientId': ClientId, 'UserPoolId': UserPoolId }) w OQNJŠTBWFBNB[PODPHOJUPJEFOUJUZKT w JNQPSU΍SFRVJSFͰΑ΂Δ w $PHOJUPͷ*%৘ใΛΠϯελϯεʹ౉ͤ͹0,
  5. Ϣʔβʔొ࿥αϯϓϧ IUUQTHJUIVCDPNBXTBNB[PODPHOJUPJEFOUJUZKTVTBHF UserPool.signUp( '[email protected]', 'password', [], null, function(err, result) {

    if (err) { alert(err) return } cognitoUser = result.user console.log('user name is ' + cognitoUser.getUsername()) })
  6. DPNQPOFOU8JMM.PVOUͰձһϖʔδ͸ೝূ IUUQTHJUIVCDPNIJEFPLBNPUPSFBDUTFSWFSMFTTEBTICPBSECMPC NBTUFSDMJFOUSPVUFTQSJWBUF3PVUFKT-- Auth.getAuthStatus().then(result => { if (result === 'Unauthorized')

    { this.props.history.replace('/login') } else { const sessionId = result this.setState({sessionId}) } }) .catch((err) => { console.log(err) this.props.history.replace('/login') })
  7. DPNQPOFOU8JMM.PVOUͰձһϖʔδ͸ೝূ IUUQTHJUIVCDPNIJEFPLBNPUPSFBDUTFSWFSMFTTEBTICPBSECMPC NBTUFSDMJFOUSPVUFTQSJWBUF3PVUFKT-- Auth.getAuthStatus().then(result => { if (result === 'Unauthorized')

    { this.props.history.replace('/login') } else { const sessionId = result this.setState({sessionId}) } }) .catch((err) => { console.log(err) this.props.history.replace('/login') }) N G ͳ Β h i s t o r y Ͱ Ϧ μΠ Ϩ Ϋ τ