ReactiveX + Meteor 종단간 암호화 구현 사례 Appsoulute 이재호 1
ReactiveX+Meteor
종단간암호화구현사례Appsoulute이재호
1
여러분에게
3
팔아야할약이이만~~~큼
4
Reactive
Programing
Rx
MeteorE2E
Encryption Declarative
Programming
PublicKey
JavascriptCoreDDPTweetNacl
Functional
5
Reactive
Programing
Rx
MeteorE2E
EncryptionDeclarative
Programming
PublicKey
JavascriptCoreDDPTweetNacl
Functional
6
역시Meteor
7
Meteor란?
8
Meteor란?Full-StackJavascript
Platform
9
Meteor란?ReactiveFull-Stack
JavascriptPlatform
10
바쁘신분들을위해결론먼저
11
1.Meteor로
실시간동시사용자
앱+서버를빠르게개발
12
2.클라이언트가
웹이아닌경우
ReactiveX
13
Reactive
Programming?
14
ReactiveProgramming이란데이터흐름과변화전파에중점을
둔프로그래밍패러다임입니다.즉,프로그래밍언어에서정적또는
동적데이터흐름을쉽게표현할수있어야하며변경사항을데이터
흐름을통해자동으로전파한다는것을의미합니다.
https://en.wikipedia.org/wiki/Reactive_programming
15
Itisconvenienttodistinguishroughlybetweenthreekindsofcomputerprograms.Transformationalprograms
computeresultsfromagivensetofinputs;typicalexamplesarecompilersornumericalcomputationprograms.
Interactiveprogramsinteractattheirownspeedwithusersorwithotherprograms;fromauserpointofview,a
time-sharingsystemisinteractive.Reactiveprogramsalsomaintainacontinuousinteractionwiththeir
environment,butataspeedwhichisdeterminedbytheenvironment,nottheprogramitself.Interactiveprograms
workattheirownpaceandmostlydealwithcommunication,whilereactiveprogramsonlyworkinrespondto
externaldemandsandmostlydealwithaccurateinterrupthandling.Real-timeprogramsareusuallyreactive.
However,therearereactiveprogramsthatarenotusuallyconsideredasbeingreal-time,suchasprotocols,
systemdrivers,orman-machineinterfacehandlers.
GérardBerry-INRIAFr.
16
17
예를들면
18
명령형프로그래밍
Imperative
programming
19
명령형프로그래밍a=1이랜다
b=2랜다
c=a+b라고하면
c가3라고한다
a=4라고했는데
c는그래도3?????
20
왜죠?
왜왜왜?
왜인거죠?21
SpreadSheet(aka.excel)
22
변경사항이자동으로적용
23
function으로맛보기(coffee/ecma6)
a = 1b = 2c = a + bc3a = 3c3
a = -> 1b = -> 2c = -> a() + b()c()3a = -> 3c()5
a = ()=> 1b = ()=> 2c = ()=> a() + b()c()3a = ()=> 3c()5
24
Reactive
Programmingin
Meteor
25
ReactiveSource
+
ReactiveComputation
26
ReactiveSource
개소변훈련.
-오줌마려울때마다짖게한다.
-배변패드로이동
ReactiveJavaScript객체
-변경될때마다알려준다.
-변경이일어나면특정명령을
실행
27
ReactiveComputations물론개가아무리짖는다고해도
당신이집에없으면?
마찬가지로Reactivedata
sources는변경이있을때마다
해당데이터를수신대기함.
이곳이ReactiveContext.
변경이일어나면실행하는코드
블록을Reactive
Computation이라고한다.
28
Meteor
ReactiveCode/* reactive datasource 인 ReactiveVar를 선언 */let someValue = new ReactiveVar();
/* Reactive Computation. 변경이 일어나면 console.log에 출력 */Tracker.autorun(()=>console.log(someValue.get()));
/* reactive datasource의 변경 */someValue.set("Hello");
> Hello
someValue.set("Hello");
/* 변경이 일어나지 않으면 Reactive Computation도 일어나지 않는다 */
29
하지만
30
이것만으로부족하다!(서버없이클라이언트만할것이아니라면)
31
실시간어플리케이션
32
실시간동시사용자
어플리케이션
33
변경동기화
34
DB저장
35
DB변경감지
36
변경전달
37
DDPDistributedDataProtocol
38
DDP구성요소
Publish
Subscribe
Method-RPC
(RemoteProcedureCall)
https://github.com/meteor/meteor/blob/m
aster/packages/ddp/DDP.md
39
Subscribe요청
관심주제만들을래
40
Publish연결
ㅇㅇ필터링해줄께
41
Observe
빨대꽂기
(지속적변경반영)
영웅은죽지않아요.
42
Methodcall(RPC)
43
DB적용
44
변경감지
45
subscribe전송
46
E2EEncryption
종단간암호화
47
Telegram망명사태
48
지금은상식!
(aka.비밀채팅)
49
저장소로부터대상이탈취되
거나감청당해도복호화할
수없어야한다
그..그렇군요;
친구에게선의로해준거라암호도안걸었지만...
50
어떻게?
51
직접해봅시다!
53
Secretbox:secret-keyauthenticatedencryption
Message KeySymNonce
https://tweetnacl.js.org/#/secretbox
54
암호화 복호화
55
Box:public-keyauthenticatedEncryption
Message SecretKey
(Privatekey)
AsymNonce
https://tweetnacl.js.org/#/box
PublicKey
56
Box:public-keyauthenticatedEncryption
https://tweetnacl.js.org/#/box
Message SecretKey
(Privatekey)
AsymNonce PublicKey
57
암호화 복호화
1
3
45
2
1
5
6
순서대로생성하고복사해봅니다.
58
SecretBox
빠른속도
키전달문제59
Box
안전한키전달
복잡+느리다60
그렇다면
61
KeySymNonceMessage
SecretKey
(Privatekey)
AsymNonce PublicKey
EncMessage
EncMessageMessage
62
KeySymNonceMessage
SecretKey
(Privatekey)
AsymNonce PublicKey
EncMessage
EncMessageKey
63
SecretBox로암호화
Key를Box로전달
64
Box로복호화한Key로
SecretBox를복호화
65
키전달은공개키
복호화는대칭키
66
PROFIT!쬲
67
실제로이것보단조금더복잡하긴해요...사용자의개인키보관/복원
패스워드변경
수신자의인원변경
과거메시지정책등등
68
구현userA가userB에게암호화한메시지를보낸다.
69
clientmeteor servermeteor mongoDB
subpKey
1.대화방진입
subpKey
subroom
subroom
userB
userA
70
clientmeteor servermeteor mongoDB
2.사용자공개키요청
pubpKey
pubroomuserB
userA
71
clientmeteor servermeteor mongoDB
3.Documentkey생성
userB
userA
72
clientmeteor servermeteor mongoDB
4.Encryptdocumentkey
DDPMAGIC!
userB
userA
73
clientmeteor servermeteor mongoDB
5.Documentkey구조
userB
userA
74
clientmeteor servermeteor mongoDB
6.DecryptDocumentkey
userB
userA
75
clientmeteor servermeteor mongoDB
7.getDocumentkey
userB
userA
76
clientmeteor servermeteor mongoDB
8.message생성
abcdefghijklmnopqrst...
userB
userA
77
clientmeteor servermeteor mongoDB
9.Encryptmessage
abcdefghijklmnopqrst...
DDPMAGIC!
userB
userA
78
clientmeteor servermeteor mongoDB
10.GetEncryptedmessage
abcdefghijklmnopqrst...
abcdefghijklmnopqrst...
userB
userA
79
clientmeteor servermeteor mongoDB
11.Decryptmessage
abcdefghijklmnopqrst...
abcdefghijklmnopqrst...
userB
userA
80
clientmeteor servermeteor mongoDB
12.Getdecryptedmessage
abcdefghijklmnopqrst...
abcdefghijklmnopqrst...
userB
userA
81
최고다리액티브짱!
82
Mobile
83
쉽게갈까요?
84
아니오
85
얜못믿겠는데요
86
Native로갑시다
87
하지만...
88
Meteor밖은"위험"해ㄷㄷ
89
Async
Serialize
Exception90
RectiveX
91
AnAPIforasynchronous
programming
withobservablestreams
RectiveXhttp://reactivex.io/
92
93
94
누가만들었나?
95
믿을만한
마우스/키보드전문회사
Microsoft
96
97
Polyglot고생은한번이면족할...까?
98
ReactiveXsupport...Java:
JavaScript:
C#:
C#(Unity):
Scala:
Clojure:
C++:
Lua:
Ruby:
Python:
Groovy:
JRuby:
Kotlin:
Swift:
PHP:
RxJava
RxJS
Rx.NET
UniRx
RxScala
RxClojure
RxCpp
RxLua
Rx.rb
RxPY
RxGroovy
RxJRuby
RxKotlin
RxSwift
RxPHP
RxNetty
RxAndroid
RxCocoa
99
ReactiveXsupport...
Java:
Kotlin: (오호?)
Swift:
RxJava
RxKotlin
RxSwiftRxRealm(으응?)
RxFirebase(오옷!)
RxAndroid
RxCocoa
100
Map,Filter,Promise정도는써봤으니
101
대충비슷하지않을까?
아니야...
102
갑시다Native!
103
큰그림
104
WebSocket
DDP
Rx
105
Rx+Meteor(DDP)Login
Logout
UserProfile
Publish
Subscribe
Method
...Validations
106
RxDDPloginpacketexample
method$=WebSocketResponseObservable.filtero->o.msgis'result'
collection$=WebSocketResponseObservable.filtero->o.collection
14:44:42.660 {"msg":"method","method":"login","params": [{"resume":"3MFpDmTtUXXkmKR5JJ0OUJODb_O19BzFXcLRu0JIqmd"}] ,"id":"1"}14:44:42.827 a {"msg":"added","collection":"users","id":"pJdkcRjHTGmKzE9hv"}14:44:42.829 a {"msg":"changed","collection":"users","id":"pJdkcRjHTGmKzE9hv", "fields":{ "emails":[{"address":"[email protected]","verified":false}] }}14:44:42.830 a {"msg":"updated","methods":["1"]}14:44:42.842 a {"msg":"result","id":"1","result":{ "id":"pJdkcRjHTGmKzE9hv", "token":"3MFpDmTtUXXkmKR5JJ0OUJODb_O19BzFXcLRu0JIqmd", "tokenExpires":{"$date":1484372528136}}}
107
UI/Data의분리RPC(RemoteProcedureCall)한뒤callback을기다리지않음
Meteorserver에서내려주는datastream에만반응
108
ApplicationStructure
LoginViewRxMeteor
ProfileView
MessagesView
methodObservable
collectionObservable
ㄴusersObservable
ㄴmessagesObservable
subscribeObservable
logoutMethodCall
changePasswordMethodCall
usersSubscribe
loginMethodCall
signUpMethodCall
usersSubscribe
messagesSubscribe
usersSubscribe
sendMessageMethodCall
109
Login의경우1. local에서UniqueID를생성(methodID)
2. Loginmethod를methodID와함께call함
3. methodObservable중methodID로필터
4. 3을subscribe하고onNext일때메인화면이동/* login Method call */{"msg":"method","method":"login","params":[ {"user":{"username":"admin"},"password": {"digest":"ㄹㄹㄹㄹ","algorithm":"sha-256"}}], "id":"1"}
/* result */{"msg":"result","id":"1","result":{ "id":"kx4SooGR5avtZDWJN", "token":"ZMUvf03-buGVnblochaafOi1-BCrGcIoCMf9Buo9l4p", "tokenExpires":{"$date":1488373375267}}}
110
Logout의경우1. login에서받은자신의userId를알고있음
2. usersObservable중id가userId인것을필터
3. 자신의id가removed일때logout처리(result와무관)
4. 현재화면위치와상관없이logout처리가가능!
같은사용자가다른장비로동시접속시처리
/* Logout method call */{"msg":"method","method":"logout","params":[],"id":"2"}
/* subscribed collection */{"msg":"removed","collection":"users","id":"kx4SooGR5avtZDWJN"}
/* result of method */{"msg":"method","method":"logout","params":[],"id":"2"}
111
유용한RxPattern
112
CombineLatestvalidation
113
Debounce연타방지
114
DistinctUntilChanged중복방지
115
ScanStateStore-reduce
116
ScanStateStore-reduce
오늘의나는태어날때의나부터
어제의나까지리듀스한것
117
FlatMapSerialize
1ststart2ndstart1stend3rdstart2ndend3rdend
118
ConcatMapSerialize(10단콤보!)
1ststart1stend
2ndstart2ndend3rdstart3rdend
119
Example대방출FormValidation
Networktimeout
counter/wscan
draganddrop
doublesubscription/flapmap/switchmap
http://jsbin.com/fewuwan/edit?html,js,output
http://jsbin.com/zuqebo/edit?html,js,output
http://jsbin.com/bowumar/edit?html,js,output
http://jsbin.com/ziraga/edit?html,css,js,output
http://jsbin.com/buyose/edit?html,js,output
120
이정도로시작해도좋아요<3
121
RxReferencehttp://reactivex.io/tutorials.html
ReactiveXLab
https://www.facebook.com/groups/111
1730648912253/
122
결론
123
실시간프로그래밍은
어렵다
124
실시간프론트엔드
프로그래밍은
어렵다
125
실시간프론트엔드
다중사용자
프로그래밍은어렵다
126
실시간풀스택
다중사용자
프로그래밍은어렵다
127
ReactiveProgramming하세요128
Meteorfull-stackreactivejavascriptplatform
129
Meteorfull-stackreactivejavascriptplatform
ReactiveXAnAPIforasynchronousprogramming
withobservablestreams
130
Meteorfull-stackreactivejavascriptplatform
ReactiveXAnAPIforasynchronousprogramming
withobservablestreams
Meteorschool
https://www.facebook.com/groups/meteorschool/
ReactiveXLab
https://www.facebook.com/groups/1111730648912253/
131
고맙습니다
Thankyou
132
참조
https://www.meteor.com/
http://reactivex.io/
https://tweetnacl.js.org/
http://rxmarbles.com/
http://spectrumdig.blogspot.kr/
133