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
生成AIを活用したレシート読み取り機能のアプリ開発の裏側 / AI Receipt Scan App Development
rockname
0
28
ゼロから理解するDependency Injection / Understanding Dependency Injection from the Ground Up
rockname
2
3.6k
サブスクリプション機能制御の設計における勘所
rockname
0
970
Anatomy of Dynamic color
rockname
1
1.1k
キャッシュによる状態管理のアーキテクチャ / Cache-based state management architecture
rockname
10
19k
Optimistic Updatesで UXを向上させる / Improve UX with Optimistic Updates
rockname
3
1.3k
モバイルアプリのリストUIにおける 理想的なState表示について / The ideal state display in a mobile app list UI
rockname
7
1.8k
オンデバイスで学習可能になったCreate MLで画像分類器を作ってみた💪 / Developing an app to train an image classifier on iOS Device using Create ML
rockname
4
480
The practice of inclusive design -WWDC21-
rockname
1
1.2k
Other Decks in Programming
See All in Programming
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
Conform を推す - Advocating for Conform
mizoguchicoji
3
680
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
660
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
770
SpringBoot3.4の構造化ログ #kanjava
irof
2
970
自分ひとりから始められる生産性向上の取り組み #でぃーぷらすオオサカ
irof
8
2.6k
Grafana Loki によるサーバログのコスト削減
mot_techtalk
1
110
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
210
Rails アプリ地図考 Flush Cut
makicamel
1
110
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
Amazon ECS とマイクロサービスから考えるシステム構成
hiyanger
2
490
Unity Android XR入門
sakutama_11
0
140
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
67
4.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
8
270
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Designing for humans not robots
tammielis
250
25k
Building an army of robots
kneath
302
45k
The World Runs on Bad Software
bkeepers
PRO
67
11k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
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!!!