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

Sign In with Apple JS

Sign In with Apple JS

NDAの関係でApple Developerのページはすべて削除しています、ご了承ください。

rockname

June 19, 2019
Tweet

More Decks by rockname

Other Decks in Programming

Transcript

  1. Sign In with Apple JS CA.swift #9 WWDC19ใࠂձ 2019/06/19 גࣜձࣾϛΫγΟ

    ΈͯͶࣄۀ෦ ϩΫωϜ@rockname
  2. ϩΫωϜ@rockname • גࣜձࣾϛΫγΟ 2018೥৽ଔೖࣾ • Ո଒ΞϧόϜΈͯͶ • ΞϓϦ։ൃάϧʔϓ
 iOS(Swift, objc)

    > Android(Kotlin, Java) == Rails(ruby) • झຯ: VTuberؑ৆ • WWDC19 ॳࢀՃ ✈
 ࣗݾ঺հ
  3. Sign In with Apple JavaScript

  4. Sign In with Apple JS • JSͷϥΠϒϥϦ͕ఏڙ͞Ε͍ͯΔ • iOSͱಉ༷ʹWeb্Ͱ΋AppleIDͰSign InͰ͖Δ

  5. ·ͣ͸Լ४උ

  6. Sign In with AppleͷCapabilityΛ௥Ճ • Sign In with AppleΛ࣮૷͍ͨ͠AppIDΛબ୒

  7. Sign In with AppleͷCapabilityΛ௥Ճ • Sign In with AppleΛνΣοΫͯ͠Save

  8. ServiceIDΛ࡞੒ • + Ϙλϯ͔ΒServiceIDΛ࡞੒

  9. ServiceIDΛ࡞੒ • Service IDsΛબ୒ͯ͠Continue

  10. ServiceIDΛ࡞੒ • DescriptionͱIdentifierͦΕͧΕೖྗ • Sign In with AppleΛνΣοΫͯ͠ConfigureΛબ୒

  11. ServiceIDΛ࡞੒ • ӈͷΑ͏ͳμΠΞϩά͕ग़Δ • Web DomainͱReturn URLsΛೖྗ • Web Domain:

    Sign In with AppleΛ࣮૷͢Δ WebͷυϝΠϯɻ • Return URLs: Sign Inʹ੒ޭͨ͠ޙʹϦμΠϨΫ τ͢ΔURLɻ࠷େ10ݸ·ͰઃఆՄɻ • Save → Continue
  12. Domainͷݕূ • ઌ΄Ͳ࡞੒ͨ͠ServiceID Λબ୒ • Sign In with Appleͷ ConfigureΛબ୒

  13. Domainͷݕূ • DownloadΛબ୒͠
 apple-developer-domain- association.txt Λμ΢ϯϩ ʔυ • Web Domainʹࢦఆͨ͠υ

    ϝΠϯͷ /.well-known ഑Լ ʹσϓϩΠ
  14. Domainͷݕূ • VerifyΛબ୒ • ੒ޭͨ͠Β੨͍νΣοΫ ϚʔΫ͕ͭ͘ • Save → Continue

  15. Α͏΍࣮͘૷΁

  16. Apple JSΛ૊ΈࠐΉ <script type="text/javascript" src="https://appleid.cdn-apple.com/ appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>

  17. Sign Inʹඞཁͳ৘ใΛ౉͢ <meta name="appleid-signin-client-id" content="[CLIENT_ID]"> <meta name="appleid-signin-scope" content="[SCOPES]"> <meta name="appleid-signin-redirect-uri"

    content="[REDIRECT_URI]"> <meta name="appleid-signin-state" content="[STATE]"> • client-id: ServiceIDͷIdentifier • scope (optional): email or name, ͋Δ͍͸྆ํ • redirect-url: Return URLsͷͲΕ͔ • state (optional): CSRFτʔΫϯ
  18. Sign Inʹඞཁͳ৘ใΛ౉͢ • metaλάͰ͸ͳ͘JSͰ΋ॻ͚Δ AppleID.auth.init({ clientId : '[CLIENT_ID]', scope :

    '[SCOPES]', redirectURI: '[REDIRECT_URI]', state : '[STATE]' });
  19. Sign InͷϘλϯΛ഑ஔ <div id="appleid-signin" data-color="black" data-border="true" 
 data-type="sign up"></div> •

    data-color: black or white • data-border: true or false • data-type: sign up | sign in | continue | apple
  20. Sign InͷϘλϯΛ഑ஔ <button id="sign-in-with-apple-button"> Sign In with Apple </button> :

    : const buttonElement = document
 .getElementById('sign-in-with-apple-button'); buttonElement.addEventListener('click', () => { AppleID.auth.signIn(); }); • ͜Ε΋JSͰ΋ॻ͚Δ
  21. ʮ͍͍ͩͨʯͰ͖ͨ

  22. Demo https://applesigninsample.web.app/

  23. ·ͩͪΌΜͱ࣮૷Ͱ͖ͯͳ͍ͱ͜Ζ • ଟ෼ͪΌΜͱ΍ΔͳΒҎԼͷΑ͏ͳ࣮૷Λ͢Δඞཁ͕͋Δ 1. redirectઌͷURLʹΫΤϦύϥϝʔλͰcodeͱstate͕౉ͬͯ͘Δ(͸ͣ) 2. stateͷಉҰੑΛ֬ೝ 3. code, client_id,

    client_secret, grant_type, redirect_uriΛ
 https://appleid.apple.com/auth/token ʹPOST 4. ResponseͷJWTܗࣜͷid_tokenΛverifyͯ͠uniqueͳIDΛऔಘͯ͠WebͷϢʔβʔͱ ͻ΋͚ͮΔ
  24. ҙ֎ͱ΍Δ͜ͱଟ͍ ʁ

  25. ࢀߟʹ͍͍ͤͯͨͩͨ͞ࢿྉ • Θ͔Γ΍͍͢·ͱΊهࣄ: • https://notes.tret.jp/sign-in-with-apple-register/ • expressͰ࣮૷͞Εͨαϯϓϧ: • https://github.com/Techofficer/express-apple-signin •

    ެࣜυΩϡϝϯτ: • https://developer.apple.com/documentation/signinwithapplejs • https://developer.apple.com/documentation/signinwithapplerestapi
  26. Thank you!!!