Sign In with Apple JS

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

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