Sign In with Apple JS

Transcript

1. 1.

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

   ΈͯͶࣄۀ෦ ϩΫωϜ@rockname
2. 2.

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

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

   Sign In with Apple JavaScript

4. 4.

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

5. 5.

   ·ͣ͸Լ४උ

6. 6.

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

7. 7.

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

8. 8.

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

9. 9.

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

10. 10.

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

11. 11.

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

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

    Domainͷݕূ • ઌ΄Ͳ࡞੒ͨ͠ServiceID Λબ୒ • Sign In with Appleͷ ConfigureΛબ୒

13. 13.

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

    ϝΠϯͷ /.well-known ഑Լ ʹσϓϩΠ
14. 14.

    Domainͷݕূ • VerifyΛબ୒ • ੒ޭͨ͠Β੨͍νΣοΫ ϚʔΫ͕ͭ͘ • Save → Continue

15. 15.

    Α͏΍࣮͘૷΁

16. 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. 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. 18.

    Sign Inʹඞཁͳ৘ใΛ౉͢ • metaλάͰ͸ͳ͘JSͰ΋ॻ͚Δ AppleID.auth.init({ clientId : '[CLIENT_ID]', scope :

    '[SCOPES]', redirectURI: '[REDIRECT_URI]', state : '[STATE]' });
19. 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. 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. 21.

    ʮ͍͍ͩͨʯͰ͖ͨ

22. 22.

    Demo https://applesigninsample.web.app/

23. 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. 24.

    ҙ֎ͱ΍Δ͜ͱଟ͍ ʁ

25. 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. 26.

    Thank you!!!