Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Sign In with Apple JS
Search
rockname
June 19, 2019
Programming
2
1.1k
Sign In with Apple JS
NDAの関係でApple Developerのページはすべて削除しています、ご了承ください。
rockname
June 19, 2019
Tweet
Share
More Decks by rockname
See All by rockname
Unlock the Potential of Swift Code Generation
rockname
0
360
生成AIを活用したレシート読み取り機能のアプリ開発の裏側 / AI Receipt Scan App Development
rockname
0
80
ゼロから理解するDependency Injection / Understanding Dependency Injection from the Ground Up
rockname
2
3.9k
サブスクリプション機能制御の設計における勘所
rockname
0
1.1k
Anatomy of Dynamic color
rockname
1
1.2k
キャッシュによる状態管理のアーキテクチャ / Cache-based state management architecture
rockname
10
20k
Optimistic Updatesで UXを向上させる / Improve UX with Optimistic Updates
rockname
3
1.4k
モバイルアプリのリストUIにおける 理想的なState表示について / The ideal state display in a mobile app list UI
rockname
7
2k
オンデバイスで学習可能になったCreate MLで画像分類器を作ってみた💪 / Developing an app to train an image classifier on iOS Device using Create ML
rockname
4
510
Other Decks in Programming
See All in Programming
AI駆動のマルチエージェントによる業務フロー自動化の設計と実践
h_okkah
0
230
GPUを計算資源として使おう!
primenumber
1
250
生成AI時代のコンポーネントライブラリの作り方
touyou
1
290
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
200
AI時代の『改訂新版 良いコード/悪いコードで学ぶ設計入門』 / ai-good-code-bad-code
minodriven
24
9.7k
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
880
フロントエンドのパフォーマンスチューニング
koukimiura
5
2.1k
NEWT Backend Evolution
xpromx
1
140
AIともっと楽するE2Eテスト
myohei
8
3k
Hack Claude Code with Claude Code
choplin
7
2.6k
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
180
PHPカンファレンス関西2025 基調講演
sugimotokei
4
240
Featured
See All Featured
Building an army of robots
kneath
306
45k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Speed Design
sergeychernyshev
32
1k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Become a Pro
speakerdeck
PRO
29
5.4k
Raft: Consensus for Rubyists
vanstee
140
7k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Language of Interfaces
destraynor
158
25k
Embracing the Ebb and Flow
colly
86
4.8k
Transcript
Sign In with Apple JS CA.swift #9 WWDC19ใࠂձ 2019/06/19 גࣜձࣾϛΫγΟ
ΈͯͶࣄۀ෦ ϩΫωϜ@rockname
ϩΫωϜ@rockname • גࣜձࣾϛΫγΟ 2018৽ଔೖࣾ • ՈΞϧόϜΈͯͶ • ΞϓϦ։ൃάϧʔϓ iOS(Swift, objc)
> Android(Kotlin, Java) == Rails(ruby) • झຯ: VTuberؑ • WWDC19 ॳࢀՃ ✈ ࣗݾհ
Sign In with Apple JavaScript
Sign In with Apple JS • JSͷϥΠϒϥϦ͕ఏڙ͞Ε͍ͯΔ • iOSͱಉ༷ʹWeb্ͰAppleIDͰSign InͰ͖Δ
·ͣԼ४උ
Sign In with AppleͷCapabilityΛՃ • Sign In with AppleΛ࣮͍ͨ͠AppIDΛબ
Sign In with AppleͷCapabilityΛՃ • Sign In with AppleΛνΣοΫͯ͠Save
ServiceIDΛ࡞ • + Ϙλϯ͔ΒServiceIDΛ࡞
ServiceIDΛ࡞ • Service IDsΛબͯ͠Continue
ServiceIDΛ࡞ • DescriptionͱIdentifierͦΕͧΕೖྗ • Sign In with AppleΛνΣοΫͯ͠ConfigureΛબ
ServiceIDΛ࡞ • ӈͷΑ͏ͳμΠΞϩά͕ग़Δ • Web DomainͱReturn URLsΛೖྗ • Web Domain:
Sign In with AppleΛ࣮͢Δ WebͷυϝΠϯɻ • Return URLs: Sign Inʹޭͨ͠ޙʹϦμΠϨΫ τ͢ΔURLɻ࠷େ10ݸ·ͰઃఆՄɻ • Save → Continue
Domainͷݕূ • ઌ΄Ͳ࡞ͨ͠ServiceID Λબ • Sign In with Appleͷ ConfigureΛબ
Domainͷݕূ • DownloadΛબ͠ apple-developer-domain- association.txt Λμϯϩ ʔυ • Web Domainʹࢦఆͨ͠υ
ϝΠϯͷ /.well-known Լ ʹσϓϩΠ
Domainͷݕূ • VerifyΛબ • ޭͨ͠Β੨͍νΣοΫ ϚʔΫ͕ͭ͘ • Save → Continue
Α͏࣮͘
Apple JSΛΈࠐΉ <script type="text/javascript" src="https://appleid.cdn-apple.com/ appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
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τʔΫϯ
Sign InʹඞཁͳใΛ͢ • metaλάͰͳ͘JSͰॻ͚Δ AppleID.auth.init({ clientId : '[CLIENT_ID]', scope :
'[SCOPES]', redirectURI: '[REDIRECT_URI]', state : '[STATE]' });
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
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Ͱॻ͚Δ
ʮ͍͍ͩͨʯͰ͖ͨ
Demo https://applesigninsample.web.app/
·ͩͪΌΜͱ࣮Ͱ͖ͯͳ͍ͱ͜Ζ • ଟͪΌΜͱΔͳΒҎԼͷΑ͏ͳ࣮Λ͢Δඞཁ͕͋Δ 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ͷϢʔβʔͱ ͻ͚ͮΔ
ҙ֎ͱΔ͜ͱଟ͍ ʁ
ࢀߟʹ͍͍ͤͯͨͩͨ͞ࢿྉ • Θ͔Γ͍͢·ͱΊهࣄ: • 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
Thank you!!!