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
1k
Sign In with Apple JS
NDAの関係でApple Developerのページはすべて削除しています、ご了承ください。
rockname
June 19, 2019
Tweet
Share
More Decks by rockname
See All by rockname
ゼロから理解するDependency Injection / Understanding Dependency Injection from the Ground Up
rockname
1
2.7k
サブスクリプション機能制御の設計における勘所
rockname
0
720
Anatomy of Dynamic color
rockname
1
990
キャッシュによる状態管理のアーキテクチャ / Cache-based state management architecture
rockname
10
18k
Optimistic Updatesで UXを向上させる / Improve UX with Optimistic Updates
rockname
3
1k
モバイルアプリのリストUIにおける 理想的なState表示について / The ideal state display in a mobile app list UI
rockname
7
1.4k
オンデバイスで学習可能になったCreate MLで画像分類器を作ってみた💪 / Developing an app to train an image classifier on iOS Device using Create ML
rockname
4
390
The practice of inclusive design -WWDC21-
rockname
1
1.1k
AndroidアプリでLine Heightを 設定するときに注意したいこと / Things to keep in mind when setting Line Height in your Android app
rockname
1
3.8k
Other Decks in Programming
See All in Programming
slow types ってなんだろう?
karad
0
210
AmperとFleetを使ったAndroidアプリ
yoppie
0
300
TypeScriptで使いやすいOpenAPIの書き方
yukimochi_dwango
1
600
GNU Makeの使い方 / How to use GNU Make
kaityo256
PRO
13
4.3k
RustでAWS Lambda functionをいい感じに書く
taiki45
2
150
[RubyKaigi 2024] Ruby Mixology 101: adding shots of PHP, Elixir, and more
palkan
0
110
ソースコードを美しくたもつために ~コードレビューの認知限界を突破し、年間400リリースを達成する~
kotauchisunsun
1
710
Runtime Objects in Rust
mitsuhiko
0
220
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
orgachem
PRO
17
2.3k
FoodGram
iseruuuuu
0
230
The Cutting Edge Of Versioning (LambdaConf 2024)
chriskrycho
0
250
一文字エイリアスのすすめ
fujimura
0
190
Featured
See All Featured
Web Components: a chance to create the future
zenorocha
306
41k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
34
6.1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
126
32k
Music & Morning Musume
bryan
41
5.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
22
6.5k
Documentation Writing (for coders)
carmenintech
60
4k
The Invisible Side of Design
smashingmag
294
49k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
660
120k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
The Art of Programming - Codeland 2020
erikaheidi
43
12k
Designing Experiences People Love
moore
136
23k
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!!!