Sign In with Apple JS

Sign In with Apple JS

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

070d33664df274636dad3da21c9b21fc?s=128

rockname

June 19, 2019
Tweet

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!!!