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

SPAとWebアプリケーションでCognitoの使い方はどう変わるのか? / How do we use cognito with SPA and web applications?

SPAとWebアプリケーションでCognitoの使い方はどう変わるのか? / How do we use cognito with SPA and web applications?

Kitano Yuichi

July 29, 2022
Tweet

More Decks by Kitano Yuichi

Other Decks in Technology

Transcript

  1. 41"ͱ͸  w ୯ҰͷϖʔδͰ8FCΞϓϦέʔγϣϯΛ 
 ߏ੒͢ΔγεςϜ w ௨ৗKBWBTDSJQUʢ3FBDU 7VFʣΛར༻ͯ͠ಈతʹ 


    දࣔɺϖʔδભҠΛ੍ޚ͢ΔɻϩάΠϯϢʔβʔͷ 
 ݸผσʔλ͸όοΫΤϯυ"1*͔Βಈతʹऔಘ͢Δɻ
  2. 41"ͷ"84ߏ੒ྫ  $MPVE'SPOU 4 $PHOJUP Ϣʔβʔϓʔϧ "1*(BUFXBZ BNQMJGZKT 64&3 -BNCEB

    41"༻ͷ ੩తϖʔδऔಘ ೝূτʔΫϯ όοΫΤϯυ"1*΁ ಈతΞΫηε ʢ*".ೝՄʣ $PHOJUP *%ϓʔϧ "84Ұ࣌ ΫϨσϯγϟϧΩʔऔಘ
  3. 41"ͷೝূͷྲྀΕᶃ  $MPVE'SPOU 4 $PHOJUP Ϣʔβʔϓʔϧ "1*(BUFXBZ BNQMJGZKT 64&3 -BNCEB

    $PHOJUP *%ϓʔϧ 41"༻ͷ ੩తϖʔδऔಘ ϩάΠϯը໘ͷදࣔ
  4. 41"ͷೝূͷྲྀΕᶄ  $MPVE'SPOU 4 $PHOJUP Ϣʔβʔϓʔϧ "1*(BUFXBZ BNQMJGZKT 64&3 -BNCEB

    $PHOJUP *%ϓʔϧ KBWBTDSJQUͰಈతʹ Ϣʔβʔ*%ύεϫʔυʹ ج͍ͮͨೝূϑϩʔͷ࣮ߦ ֤छτʔΫϯΛऔಘͯ͠อଘ
  5. 41"ͷೝূͷྲྀΕᶅ  $MPVE'SPOU 4 $PHOJUP Ϣʔβʔϓʔϧ "1*(BUFXBZ BNQMJGZKT 64&3 -BNCEB

    $PHOJUP *%ϓʔϧ KBWBTDSJQUͰಈతʹ *%τʔΫϯ͔Β"84Ұ࣌ ΫϨσϯγϟϧΩʔͷऔಘ
  6. 41"ͷೝূͷྲྀΕᶆ  $MPVE'SPOU 4 $PHOJUP Ϣʔβʔϓʔϧ "1*(BUFXBZ BNQMJGZKT 64&3 -BNCEB

    $PHOJUP *%ϓʔϧ KBWBTDSJQUͰಈతʹ "84Ұ࣌ΫϨσϯγϟϧΩʔ͔Β 4JH7ॺ໊Λ࡞੒ όοΫΤϯυ"1*΁ϦΫΤετ
  7. 41"ͷ)PTUFE6*ͷೝূͷྲྀΕᶃ  $MPVE'SPOU 4 $PHOJUP Ϣʔβʔϓʔϧ "1*(BUFXBZ BNQMJGZKT 64&3 -BNCEB

    $PHOJUP *%ϓʔϧ 41"༻ͷ ੩తϖʔδऔಘ ϩάΠϯը໘ϦμΠϨΫτ Ϙλϯͷදࣔ
  8. 41"ͷ)PTUFE6*ͷೝূͷྲྀΕᶄ  $MPVE'SPOU 4 $PHOJUP Ϣʔβʔϓʔϧ ʢ)PTUFE6*ʣ "1*(BUFXBZ BNQMJGZKT 64&3

    -BNCEB $PHOJUP *%ϓʔϧ 0"VUIೝূϑϩʔͷ։࢝ )PTUFE6*΁ϦμΠϨΫτ Ϣʔβʔ*%ύεϫʔυΑΔϩάΠϯޙ ೝՄίʔυͱ͋Θͤͯݩͷը໘΁ϦμΠϨΫτ
  9. 41"ͷ)PTUFE6*ͷೝূͷྲྀΕᶅ  $MPVE'SPOU 4 "1*(BUFXBZ BNQMJGZKT 64&3 -BNCEB $PHOJUP *%ϓʔϧ

    KBWBTDSJQUͰಈతʹ ϦμΠϨΫτʹΑΓड͚औͬͨೝՄίʔυΛݩʹ ֤छτʔΫϯΛ$PHOJUP͔Βऔಘͯ͠อଘ $PHOJUP Ϣʔβʔϓʔϧ
  10. 41"ͷ)PTUFE6*ͷೝূͷྲྀΕᶆ  $MPVE'SPOU 4 $PHOJUP Ϣʔβʔϓʔϧ "1*(BUFXBZ BNQMJGZKT 64&3 -BNCEB

    $PHOJUP *%ϓʔϧ KBWBTDSJQUͰಈతʹ *%τʔΫϯ͔Β"84Ұ࣌ ΫϨσϯγϟϧΩʔͷऔಘ
  11. 41"ͷ)PTUFE6*ͷೝূͷྲྀΕᶇ  $MPVE'SPOU 4 $PHOJUP Ϣʔβʔϓʔϧ "1*(BUFXBZ BNQMJGZKT 64&3 -BNCEB

    $PHOJUP *%ϓʔϧ KBWBTDSJQUͰಈతʹ "84Ұ࣌ΫϨσϯγϟϧΩʔ͔Β 4JH7ॺ໊Λ࡞੒ όοΫΤϯυ"1*΁ϦΫΤετ
  12. Public subnet ैདྷܕ8FCαΠτͷ"84ߏ੒ྫ  64&3 VPC Private subnet Private subnet

    "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ ηογϣϯͰ ϢʔβʔΛࣝผ ೝূτʔΫϯ ηογϣϯ%#
  13. Public subnet ैདྷܕ8FCαΠτͷೝূͷྲྀΕᶃ  64&3 VPC Private subnet Private subnet

    "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ αʔόʔଆͰϩάΠϯը໘ͷੜ੒ ϩάΠϯը໘ͷදࣔ
  14. Public subnet ैདྷܕ8FCαΠτͷೝূͷྲྀΕᶄ  64&3 VPC Private subnet Private subnet

    "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ Ϣʔβʔ*%ύεϫʔυͷೖྗ 'PSNͰαʔόʔ΁1PTU
  15. Public subnet ैདྷܕ8FCαΠτͷೝূͷྲྀΕᶅ  64&3 VPC Private subnet Private subnet

    "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ Ϣʔβʔ*%ύεϫʔυʹ ج͍ͮͨೝূϑϩʔͷ࣮ߦ ֤छτʔΫϯΛऔಘ
  16. Public subnet ैདྷܕ8FCαΠτͷೝূͷྲྀΕᶆ  64&3 VPC Private subnet Private subnet

    "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ औಘ֤ͨ͠छτʔΫϯΛ ηογϣϯ৘ใͱඥ෇͚ͯ ηογϣϯ%#΁อଘ
  17. Public subnet ैདྷܕ8FCαΠτͷೝূͷྲྀΕᶇ  64&3 VPC Private subnet Private subnet

    "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ ϩάΠϯޙը໘ͷදࣔ ηογϣϯͰϢʔβʔࣝผ
  18. Public subnet ʲ࠶ܝʳैདྷܕ8FCαΠτͷೝূͷྲྀΕᶅ  64&3 VPC Private subnet Private subnet

    "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ Ϣʔβʔ*%ύεϫʔυʹ ج͍ͮͨೝূϑϩʔͷ࣮ߦ ֤छτʔΫϯΛऔಘ 41"Ͱ͸BNQMJGZKT͕ೝূϑϩʔΛ ͏·͍͜ͱ࣮ߦͯ͘͠Ε·ͨ͠ɻ ैདྷܕ8FCαΠτͰ͸ೝূϑϩʔΛཧղ͠ɺ ೝূϑϩʔʹԊͬͯࣗ෼Ͱ࣮૷͢Δ ඞཁ͕͋Γ·͢ɻ
  19. $PHOJUPͷೝূϑϩʔൈਮ  ೝূϑϩʔ໊ આ໌ "%.*/@64&3@1"44803%@"65) ʢچশɿ"%.*/@/0@431@"65)ʣ αʔόʔ͔Β࣮ߦ͢Δ͜ͱΛ૝ఆͨ͠ύεϫʔυΛૹͬͯೝূ͢Δೝূϑϩʔɻ ௨ৗΫϥΠΞϯτγʔΫϨοτΛ࢖༻͢Δɻ 64&3@431@"65) ΫϥΠΞϯτʢ41"౳ʣ͔Β࣮ߦ͢Δ͜ͱΛ૝ఆͨ͠431ϓϩτίϧͰύεϫ

    ʔυΛجʹͨ͠νϟϨϯδϨεϙϯεΛૹΓ͍͋ೝূ͢Δೝূϑϩʔɻ BNQMJGZKT͕σϑΥϧτͰ࢖༻͢Δɻ 64&3@1"44803%@"65) ΫϥΠΞϯτʢ41"౳ʣ͔Β࣮ߦ͢Δ͜ͱΛ૝ఆͨ͠ύεϫʔυΛૹͬͯೝূ͢ Δೝূϑϩʔɻ ΫϥΠΞϯτʢ41"౳ʣ͔Βͷ࣮ߦ͸643@431@"65)ͷར༻͕ਪ঑͞ΕΔɻ $6450.@"65) ೝূ࣌ʹ-BNCEBϑΝϯΫγϣϯ͕τϦΨʔ͞Εɺࣗ෼ͰೝূϑϩʔΛࣗ༝ʹ ઃఆͰ͖Δೝূϑϩʔɻ
  20. "%.*/@64&3@1"44803%@"65)ϑϩʔ  &$ $PHOJUP Ϣʔβʔϓʔϧ "ENJO*OJUJBUF"VUI TFDSFU@IBTI#BTF )."$@4)" $PHOJUP ϢʔβʔϓʔϧͷγʔΫϨοτΩʔ

    ϩάΠϯϢʔβʔ໊  $PHOJUPϢʔβʔϓʔϧͷΫϥΠΞϯτ*%   DPHOJUPBENJO*OJUJBUF"VUI \ "VUI'MPXb"%.*/@64&3@1"44803%@"65)`  6TFS1PPM*E$PHOJUPϢʔβʔϓʔϧͷϢʔβʔϓʔϧ*%  $MJFOU*E$PHOJUPϢʔβʔϓʔϧͷΫϥΠΞϯτ*%  "VUI1BSBNFUFST\ 64&3/".&ϩάΠϯϢʔβʔ໊  1"44803%ύεϫʔυ  4&$3&5@)"4)TFDSFU@IBTI  ^  ^ \ "VUIFOUJDBUJPO3FTVMU\ "DDFTT5PLFOʜ  &YQJSFT*Oʜ  5PLFO5ZQFb#FBSFS`  3FGSFTI5PLFOʜ  *E5PLFOʜ  ^  ʜ  ^ ֤छτʔΫϯ
  21. ۩ମతͳ4&$3&5@)"4)ͷܭࢉํ๏ʢQZUIPOʣ  ʲҾ༻ʳ"NB[PO$PHOJUPͷʮΫϥΠΞϯτͷγʔΫϨοτͷϋογϡΛݕূͰ͖·ͤΜʯͱ͍͏ΤϥʔΛղܾ͢Δ IUUQTBXTBNB[PODPNKQQSFNJVNTVQQPSULOPXMFEHFDFOUFSDPHOJUPVOBCMFUPWFSJGZTFDSFUIBTI import sys import hmac, hashlib, base64

    username = sys.argv[1] app_client_id = sys.argv[2] key = sys.argv[3] message = bytes(sys.argv[1]+sys.argv[2],'utf-8') key = bytes(sys.argv[3],'utf-8') secret_hash = base64.b64encode(hmac.new(key, message, digestmod=hashlib.sha256).digest()).decode() print("SECRET HASH:",secret_hash) python3 secret_hash.py <<ϩάΠϯϢʔβʔ໊>> <<CognitoϢʔβʔϓʔϧͷΫϥΠΞϯτ ID>> <<CognitoϢʔβʔϓʔϧͷΫϥΠΞϯτγʔΫϨοτ>> secret_hash.py
  22. ʲ༨ஊᶄʳ"ENJO"1*ͱඇ"ENJO"1*  w $PHOJUPͷ"1*͸ಛघ w "ENJO"1*͸ଞͷαʔϏεͱಉ༷*".3PMFͷΫϨσϯγϟϧͰ࣮ߦ w ྫɿ"ENJO*OJUJBUF"VUI "ENJO(FU6FTS w

    ඇ"ENJO"1*͸$PHOJUPϢʔβʔͷΞΫηετʔΫϯͰ࣮ߦͯ͠ɺ ͦͷϢʔβʔͷΈૢ࡞Ͱ͖Δ w ৽نϢʔβʔΛ࡞੒͢Δ4JHO6Q΍ɺ 
 ೝূͯ͠τʔΫϯΛऔಘ͢Δ*OJUJBUF"VUI͸ྫ֎ͰΞΫηετʔΫϯෆཁ w ྫɿ(FU6TFS
  23. Public subnet ैདྷܕ8FCαΠτͷ)PTUFE6*ͷೝূͷྲྀΕᶃ  64&3 VPC Private subnet Private subnet

    "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ αʔόʔଆͰϩάΠϯը໘ͷੜ੒ ϩάΠϯը໘ϦμΠϨΫτϘλϯͷදࣔ 
  24. Public subnet ैདྷܕ8FCαΠτͷ)PTUFE6*ͷೝূͷྲྀΕᶄ  64&3 VPC Private subnet Private subnet

    "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUPϢʔβʔϓʔϧ ʢ)PTUFE6*ʣ 0"VUIೝূϑϩʔͷ։࢝ )PTUFE6*΁ϦμΠϨΫτ Ϣʔβʔ*%ύεϫʔυΑΔϩάΠϯޙ ೝՄίʔυͱ͋Θͤͯ$BMMCBDL63-΁ϦμΠϨΫτ
  25. Public subnet ैདྷܕ8FCαΠτͷ)PTUFE6*ͷೝূͷྲྀΕᶅ  64&3 VPC Private subnet Private subnet

    "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ $BMMCBDL63-΁ͷϦμΠϨΫτʹΑΓ ೝՄίʔυΛαʔόʔ΁౉͢ DBMMCBDL
  26. Public subnet ैདྷܕ8FCαΠτͷ)PTUFE6*ͷೝূͷྲྀΕᶆ  64&3 VPC Private subnet Private subnet

    "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ ೝՄίʔυΛݩʹ ֤छτʔΫϯΛऔಘ
  27. Public subnet ैདྷܕ8FCαΠτͷ)PTUFE6*ͷೝূͷྲྀΕᶇ  64&3 VPC Private subnet Private subnet

    "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ औಘ֤ͨ͠छτʔΫϯΛ ηογϣϯ৘ใͱඥ෇͚ͯ ηογϣϯ%#΁อଘ
  28. Public subnet ैདྷܕ8FCαΠτͷ)PTUFE6*ͷೝূͷྲྀΕᶈ  64&3 VPC Private subnet Private subnet

    "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ ϩάΠϯޙը໘΁ϦμΠϨΫτͯ͠දࣔ ηογϣϯͰϢʔβʔࣝผ IFMMP
  29. Public subnet ʲ࠶ܝʳैདྷܕ8FCαΠτͷ)PTUFE6*ͷೝূͷྲྀΕᶄ  64&3 VPC Private subnet Private subnet

    "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUPϢʔβʔϓʔϧ ʢ)PTUFE6*ʣ 0"VUIೝূϑϩʔͷ։࢝ )PTUFE6*΁ϦμΠϨΫτ Ϣʔβʔ*%ύεϫʔυΑΔϩάΠϯޙ ೝՄίʔυͱ͋Θͤͯ$BMMCBDL63-΁ϦμΠϨΫτ 41"Ͱ͸BNQMJGZKT͕0"VUIೝূϑϩʔΛ ͍͍ײ͡ʹ࣮ߦͯ͘͠Ε·ͨ͠ɻ ैདྷܕ8FCαΠτͰ͸0"VUIೝূϑϩʔΛཧղ͠ɺ 0"VUIೝূϑϩʔʹԊͬͯࣗ෼Ͱ࣮૷͢Δ ඞཁ͕͋Γ·͢ɻ
  30. $PHOJUPͷ0"VUIೝূϑϩʔ  0"VUIೝূϑϩʔ໊ આ໌ "VUIPSJ[BUJPODPEFHSBOU ʢೝՄίʔυͷڐՄʣ جຊతʹ࢖༻͕ਪ঑͞ΕΔϑϩʔɻ ैདྷܕ8FCαΠτͷΑ͏ʹαʔόʔΛ஥հͯ͠τʔΫϯΛऔಘ͢Δ৔߹͸ɺ ௨ৗΫϥΠΞϯτγʔΫϨοτΛઃఆͯ͠ར༻͢Δɻ 41"ͷΑ͏ʹϢʔβʔ͕τʔΫϯΛ௚઀औಘ͢Δ৔߹͸1,$&Λซ༻͢Δ͜

    ͱ͕ਪ঑͞ΕΔɻ *NQMJDJUHSBOU ʢ҉໧తͳڐՄʣ "VUIPSJ[BUJPODPEFHSBOUͷ࢖༻͕ෆՄೳͳ৔߹બ୒͢Δɻ 
 1,$&Λซ༻ͨ͠"VUIPSJ[BUJPODPEFHSBOUͷ࢖༻͕ਪ঑͞ΕΔɻ $MJFOUDSFEFOUJBMHSBOU ʢΫϥΠΞϯτೝূ৘ใͷڐՄʣ ϚγϯؒͷτʔΫϯަ׵͢Δࡍʹ࢖༻͢Δೝূϑϩʔɻ 
 ࠓճͷΑ͏ͳΤϯυϢʔβʔ͕ೝূʹ࢖͏ϑϩʔͰ͸ͳ͍ɻ
  31. Public subnet ʲ൪֎ʳ"-# $PHOJUPೝূͷ"84ߏ੒ྫ  64&3 VPC Private subnet Private

    subnet "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ ೝূ࿈ܞ ηογϣϯ%#
  32. Public subnet "-# $PHOJUPೝূͷೝূͷྲྀΕᶃ  64&3 VPC Private subnet Private

    subnet "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ "-#΁ΞΫηε 0"VUIೝূϑϩʔͷ։࢝ )PTUFE6*΁ϦμΠϨΫτ
  33. Public subnet "-# $PHOJUPೝূͷೝূͷྲྀΕᶄ  64&3 VPC Private subnet Private

    subnet "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ Ϣʔβʔ*%ύεϫʔυΑΔϩάΠϯޙ ೝՄίʔυͱ͋Θͤͯ "-#ͷ$BMMCBDL63-΁ϦμΠϨΫτ
  34. Public subnet "-# $PHOJUPೝূͷೝূͷྲྀΕᶅ  64&3 VPC Private subnet Private

    subnet "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ $BMMCBDL63-΁ͷϦμΠϨΫτʹΑΓ ೝՄίʔυΛ"-#΁౉͢
  35. Public subnet "-# $PHOJUPೝূͷೝূͷྲྀΕᶆ  64&3 VPC Private subnet Private

    subnet "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ ೝՄίʔυΛݩʹ֤छτʔΫϯΛऔಘ
  36. Public subnet "-# $PHOJUPೝূͷೝূͷྲྀΕᶇ  64&3 VPC Private subnet Private

    subnet "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ औಘ֤ͨ͠छτʔΫϯΛ ηογϣϯ৘ใͱඥ෇͚ͯอଘ "-#ͷηογϣϯ%# ͷ༷ͳ΋ͷ
  37. Public subnet "-# $PHOJUPೝূͷೝূͷྲྀΕᶈ  64&3 VPC Private subnet Private

    subnet "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ ΞΫηετʔΫϯɺϢʔβʔ৘ใʢTVCΫϨʔϜ౳ʣΛ )551ϔομʔʹ௥Ճͯ͠&$΁ΞΫηε "-#ͷηογϣϯ%# ͷ༷ͳ΋ͷ
  38. Public subnet "-# $PHOJUPೝূͷೝূͷྲྀΕᶉ  64&3 VPC Private subnet Private

    subnet "VSPSB &MBTUJ$BDIF &$ "-# $PHOJUP Ϣʔβʔϓʔϧ αʔόʔ͕ը໘Λੜ੒ ϩάΠϯޙը໘Λදࣔ "-#ͷηογϣϯ%# ͷ༷ͳ΋ͷ