Slide 1

Slide 1 text

Sign In with Apple JS CA.swift #9 WWDC19ใࠂձ 2019/06/19 גࣜձࣾϛΫγΟ ΈͯͶࣄۀ෦ ϩΫωϜ@rockname

Slide 2

Slide 2 text

ϩΫωϜ@rockname • גࣜձࣾϛΫγΟ 2018೥৽ଔೖࣾ • Ո଒ΞϧόϜΈͯͶ • ΞϓϦ։ൃάϧʔϓ
 iOS(Swift, objc) > Android(Kotlin, Java) == Rails(ruby) • झຯ: VTuberؑ৆ • WWDC19 ॳࢀՃ ✈
 ࣗݾ঺հ

Slide 3

Slide 3 text

Sign In with Apple JavaScript

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

·ͣ͸Լ४උ

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

ServiceIDΛ࡞੒ • ӈͷΑ͏ͳμΠΞϩά͕ग़Δ • Web DomainͱReturn URLsΛೖྗ • Web Domain: Sign In with AppleΛ࣮૷͢Δ WebͷυϝΠϯɻ • Return URLs: Sign Inʹ੒ޭͨ͠ޙʹϦμΠϨΫ τ͢ΔURLɻ࠷େ10ݸ·ͰઃఆՄɻ • Save → Continue

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Domainͷݕূ • DownloadΛબ୒͠
 apple-developer-domain- association.txt Λμ΢ϯϩ ʔυ • Web Domainʹࢦఆͨ͠υ ϝΠϯͷ /.well-known ഑Լ ʹσϓϩΠ

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Α͏΍࣮͘૷΁

Slide 16

Slide 16 text

Apple JSΛ૊ΈࠐΉ

Slide 17

Slide 17 text

Sign Inʹඞཁͳ৘ใΛ౉͢ • client-id: ServiceIDͷIdentifier • scope (optional): email or name, ͋Δ͍͸྆ํ • redirect-url: Return URLsͷͲΕ͔ • state (optional): CSRFτʔΫϯ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

Sign InͷϘλϯΛ഑ஔ
• data-color: black or white • data-border: true or false • data-type: sign up | sign in | continue | apple

Slide 20

Slide 20 text

Sign InͷϘλϯΛ഑ஔ Sign In with Apple : : const buttonElement = document
 .getElementById('sign-in-with-apple-button'); buttonElement.addEventListener('click', () => { AppleID.auth.signIn(); }); • ͜Ε΋JSͰ΋ॻ͚Δ

Slide 21

Slide 21 text

ʮ͍͍ͩͨʯͰ͖ͨ

Slide 22

Slide 22 text

Demo https://applesigninsample.web.app/

Slide 23

Slide 23 text

·ͩͪΌΜͱ࣮૷Ͱ͖ͯͳ͍ͱ͜Ζ • ଟ෼ͪΌΜͱ΍ΔͳΒҎԼͷΑ͏ͳ࣮૷Λ͢Δඞཁ͕͋Δ 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ͷϢʔβʔͱ ͻ΋͚ͮΔ

Slide 24

Slide 24 text

ҙ֎ͱ΍Δ͜ͱଟ͍ ʁ

Slide 25

Slide 25 text

ࢀߟʹ͍͍ͤͯͨͩͨ͞ࢿྉ • Θ͔Γ΍͍͢·ͱΊهࣄ: • 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

Slide 26

Slide 26 text

Thank you!!!