注重用戶隱私的 Apple 在開發者大會 WWDC 2019 發表了 Sign in with Apple 的功能,iOS 13 後皆支援。今年(2020 年) 4 月之後強制要求所有新上架的 App(包含更新)皆要支援這個服務。
Sign in with Apple 怎麼接?跟其他第三方服務有什麼不同?
App 端、網站前端、後端要如何因應?會有什麼樣的雷?
讓我來跟你娓娓到來...
#iPlayground2020
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
Introduction to React in combination with Redux. Redux helps you to develop applications in a simple way while having features like time-travel available during development.
Slides from the NestJS MasterClass.
We learned how to build JavaScript server-side applications with NestJS - A progressive NodeJS framework built with TypeScript.
You can find the code on GitHub:
https://github.com/nirkaufman/task-manager
A walkthrough the main principles to reach solid NodeJS Applications with TypeScript language, Jest as Test Runner and NestJS as framework for structure.
This talk introduces Spring's REST stack - Spring MVC, Spring HATEOAS, Spring Data REST, Spring Security OAuth and Spring Social - while refining an API to move higher up the Richardson maturity model
This talk is about Nestjs and how it can help you build clean Nodejs backend apps, we will be covering also essential web development and JavaScript must know technologies and tools such as TypeScript and others.
Explanation of the fundamentals of Redux with additional tips and good practices. Presented in the Munich React Native Meetup, so the sample code is using React Native. Additional code: https://github.com/nacmartin/ReduxIntro
20180518 QNAP Seminar - Introduction to React NativeEric Deng
What is React Native?
How does React Native work?
Writing React Native
Expo
Components, props, and states
Component lifecycle
Declarative and imperative
Event handling
User input
Style
Layout
Data access
Publishing your Project
Android Jetpack compose completely written in Kotlin, Declarative UI, new way of UI designing in Android.
This presentation tells you what it is Jetpack Compose? Why it was introduced? How to implement it? How it works? What happens behind the scenes?
Introduction to React in combination with Redux. Redux helps you to develop applications in a simple way while having features like time-travel available during development.
Slides from the NestJS MasterClass.
We learned how to build JavaScript server-side applications with NestJS - A progressive NodeJS framework built with TypeScript.
You can find the code on GitHub:
https://github.com/nirkaufman/task-manager
A walkthrough the main principles to reach solid NodeJS Applications with TypeScript language, Jest as Test Runner and NestJS as framework for structure.
This talk introduces Spring's REST stack - Spring MVC, Spring HATEOAS, Spring Data REST, Spring Security OAuth and Spring Social - while refining an API to move higher up the Richardson maturity model
This talk is about Nestjs and how it can help you build clean Nodejs backend apps, we will be covering also essential web development and JavaScript must know technologies and tools such as TypeScript and others.
Explanation of the fundamentals of Redux with additional tips and good practices. Presented in the Munich React Native Meetup, so the sample code is using React Native. Additional code: https://github.com/nacmartin/ReduxIntro
20180518 QNAP Seminar - Introduction to React NativeEric Deng
What is React Native?
How does React Native work?
Writing React Native
Expo
Components, props, and states
Component lifecycle
Declarative and imperative
Event handling
User input
Style
Layout
Data access
Publishing your Project
Android Jetpack compose completely written in Kotlin, Declarative UI, new way of UI designing in Android.
This presentation tells you what it is Jetpack Compose? Why it was introduced? How to implement it? How it works? What happens behind the scenes?
Speaker: Young Fang, Johnny Sung
---
How visually impaired people use their phone?
How mobile developer fix their problems they encountered?
Here is the small tips for that.
Everything About Bluetooth (淺談藍牙 4.0) - Peripheral 篇Johnny Sung
2016.01.22 @ Android Taipei
講解 Bluetooth 的 GATT 的概念,並以 Android 實作
Example code:
Peripheral - BLE CPU Temp
https://github.com/j796160836/Ble-CPUTemp-Android
Central - BLE Temperature Receiver
https://github.com/j796160836/BleTemperatureReceiver-Android
Everything About Bluetooth (淺談藍牙 4.0) - Central 篇Johnny Sung
講解 Bluetooth 的 GATT 的概念,並以 Android 實作
Example code:
Peripheral - BLE CPU Temp
https://github.com/j796160836/Ble-CPUTemp-Android
Central - BLE Temperature Receiver
https://github.com/j796160836/BleTemperatureReceiver-Android
uPresenter, new way to control keynote.
Wear on your Glass or Smart Watch, and have a nice presentation.
---
Available on Google Play
https://play.google.com/store/apps/details?id=com.johnnyworks.presenter
Android workshop - 02. Glass development 101Johnny Sung
Glass development 101
All example sources are in Github:
Example 00: Hello, World
https://github.com/j796160836/GlassWorkshop-Exercise00_HelloWorld
Example 01: New Hello, World
https://github.com/j796160836/GlassWorkshop-Exercise01_NewHelloWorld
Example 02: MyVoiceCommand
https://github.com/j796160836/GlassWorkshop-Exercise02_MyVoiceCommand
Example 03: UseCardBuilder
https://github.com/j796160836/GlassWorkshop-Exercise03_CardBuilder
Android workshop - 01. Getting started on android phoneJohnny Sung
All example sources are in Github:
Example 00: Hello, World
https://github.com/j796160836/PetStar-Exercise00_HelloWorld
Example 01: Show pet’s name
https://github.com/j796160836/PetStar-Exercise01_PetsName
Example 02: Pet’s name card
https://github.com/j796160836/PetStar-Exercise02_PetsNameCard
41. 材料整理
• Client ID
• iOS App - App ID (Bundle ID)
• 網站 - Service ID
• Redirect URI
• iOS ⽤的 API endpoint
• 網站 API endpoint
• Team ID
• Sign Key & Key ID
51. • 樣式:⿊⾊ vs. ⽩⾊有邊框 vs. ⽩⾊無邊框
• 字樣:Sign in with Apple vs. Continue with Apple vs. 無
• 圓⾓:有圓⾓ vs. 無圓⾓
登入按鈕樣式
https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/
52. iOS App 部分
1. 使⽤者按下 Sign in with Apple 按鈕,
呼叫相關 AuthenticationServices framework 的相關函式
2. iOS 系統跳出 AppleId 登入確認,利⽤ TouchId 指紋辨識
或 FaceId 臉部辨識
(可選擇是否隱藏其 E-mail)
3. 當登入授權成功時,系統呼叫
didCompleteWithAuthorization
處理該 Callback 將相關參數,⽤ API 傳回⾃⼰的網站
57. • 樣式:⿊⾊ vs. ⽩⾊有邊框 vs. ⽩⾊無邊框
• 字樣:Sign in with Apple vs. Continue with Apple vs. 無
• 圓⾓:有圓⾓ vs. 無圓⾓
登入按鈕樣式
https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/buttons/
92. - Introducing Sign In with Apple - WWDC2019
https://developer.apple.com/videos/play/wwdc2019/706/
- Get the most out of Sign in with Apple - WWDC2020
https://developer.apple.com/videos/play/wwdc2020/10173
- JWT 簽名算法 HS256、RS256 及 ES256 及密鑰⽣成
https://www.cnblogs.com/kirito-c/p/12402066.html
- 驗證 JSON Web Token
https://docs.aws.amazon.com/zh_tw/cognito/latest/developerguide/amazon-cognito-user-pools-using-tokens-verifying-a-jwt.html
- Sign in with Apple
http://uirate.net/?p=10363
- Ensure mail delivery & prevent spoofing (SPF)
https://support.google.com/a/answer/33786
- DNS 設定 spf 記錄 - Sender Policy Framework
https://blog.xuite.net/tolarku/blog/233356505
- Generate and Validate Tokens
https://developer.apple.com/documentation/sign_in_with_apple/generate_and_validate_tokens
- 簡介 JWK 與 JWA
https://ithelp.ithome.com.tw/articles/10225590
- Sign in with Apple Tutorial, Part 4: Web and Other Platforms
https://sarunw.com/posts/sign-in-with-apple-4/
- JWT 概觀
https://ithelp.ithome.com.tw/articles/10224787
- [Note] OAuth2.0 學習筆記 | PJCHENder 未整理筆記
https://pjchender.github.io/2017/11/16/note-oauth2-0-%E5%AD%B8%E7%BF%92%E7%AD%86%E8%A8%98/
參考資料 (1/3)
93. - 簡單易懂的 OAuth 2.0
https://speakerdeck.com/chitsaou/jian-dan-yi-dong-de-oauth-2-dot-0
- 關於OAuth 2.0-以Facebook為例
https://medium.com/@justinlee_78563/%E9%97%9C%E6%96%BCoauth-2-0-%E4%BB%A5facebook%E7%82%BA%E4%BE%8B-6f78a4a55f52
- [PHP] OAuth / Sign in with Apple JS - 使⽤ Apple JS SDK 讓網站⽀援 Apple ID 登入
http://blog.changyy.org/2019/11/php-jwt-oauth-sign-in-with-apple-js.html
- What the Heck is Sign In with Apple?
https://developer.okta.com/blog/2019/06/04/what-the-heck-is-sign-in-with-apple
- 如何整合 Sign in with Apple 到⾃⼰的 iOS App 上 (iOS & Backend)
https://medium.com/@tuzaiz/%E5%A6%82%E4%BD%95%E6%95%B4%E5%90%88-sign-in-with-apple-
%E5%88%B0%E8%87%AA%E5%B7%B1%E7%9A%84-ios-app-%E4%B8%8A-ios-backend-e64d9de15410
- Sign in with Apple(蘋果授權登陸)
https://blog.csdn.net/wpf199402076118/article/details/99677412
- Sign in with Apple 登錄詳解
https://ihtcboy.com/2019/09/16/2019-09-16_Sign-in-with-Apple/
- iOS13 Sign In With Apple 適配
http://jerryliu.org/ios%20programming/iOS13-Sign-With-Apple%E6%96%B0%E7%89%B9%E6%80%A7%E9%80%82%E9%85%8D
- 蘋果Sign In with Apple爆可被劫持帳號的漏洞
https://www.ithome.com.tw/news/137972
- 蘋果重磅推出「Sign in with Apple」登入,背後忽略的隱私盲點
https://www.bnext.com.tw/article/53765/what-is-the-meaning-of-sign-in-with-apple
參考資料 (2/3)