# 리클레임 프로토콜 테크니컬 딥다이브 # 리클레임 프로토콜이 해결하는 문제 ### 1. 디지털 증명서 제출의 문제 현재 디지털 상에서 개인의 유효 정보를 제3의 기관에 제출하는데 있어서는 [크게 2가지 문제가 존재](https://drive.google.com/file/d/1wmfdtIGPaN9uJBI1DHqN903tP9c_aTG2/view)한다. 예를 들어 특정 은행 웹사이트에서 개인의 잔고 증명을 원한다고 했을 때 제출 과정에서는 다음의 문제가 발생한다. - 출처 증명의 문제(Proof of Provenance): 잔고 증명을 요구하는 페이지를 통해 잔고 증명을 제공해줄 페이지에 접속할 방법이 없기 때문에 내가 가져온 데이터가 기관에서 발행한 잔고 증명 내역인지 증빙할 수 없다. - 선택 제출의 문제(Selective Reveal): 잔고 증명 이외에 은행 페이지에 포함된 데이터(예를 들어 이름, 계좌 번호, 거래 내역)을 선택적으로 가리는 방법이 없다 OAuth와 같이 제3의 사이트에 아이디와 신원을 제공하는 기본적인 기능은 이미 사용되고 있으나 아직은 굉장히 단편적인 수준이다. 디지털 상에서 필요한 정보와 인증 영역이 확장되고 있는 만큼 자신이 필요한 정보를 원하는 방식으로 제공할 수 있는 통합적 솔루션이 필요해지는 상황이다. ### 2. 리클레임 프로토콜이 자기 주권 증명서를 만드는 방식 [리클레임 프로토콜](https://www.reclaimprotocol.org/)은 제3의 페이지에서 증명을 요구하는 데이터를 제공하는 페이지에 직접 접속할 수 있는 환경과 선택적 데이터 제공이 가능한 기술을 통해 디지털 증명서 제출의 문제를 해결한다. 1. 암호화 프로토콜(Cryptographic Protocol): 유저가 자신이 원하는 웹사이트에서 원하는 정보만을 추출하기 위해 활용되는 [TLS(Transport Layer Security)](https://docs.tosspayments.com/resources/glossary/tls) / [ZK(Zero Knowledge)](https://xangle.io/research/detail/1612) 기반 암호화 정보 추출 방식 2. 증명서 생성(Generating Credential): 특정 유저가 제출한 정보를 요청 기관에서 검증할 수 있도록 데이터를 블록체인에 증거로 제출하고 검증하여 증명서를 생성 3. 탈중앙화 익스텐션(Decentralized Extension): 증거를 제출하는 입증인(Attestor)의 공공 신뢰성 보장을 위한 지분 증명 기반 탈중앙화 인센티브 및 보안 시스템 적용 암호화 프로토콜은 유저가 정보를 추출, 제출 과정에서의 데이터 프라이버시를 보장하고 블록체인 상의 증명서생성을 통해 누구나 제출 요청 데이터를 공개 검증, 열람할 수 있으며 탈중앙화 익스텐션을 통해 암호화된 증명서 생성에서의 입증자 의존도를 분산화한다. # 리클레임 동작방식 딥다이브 ### 1. 암호화 프로토콜

- 리클레임 프로토콜은 유저가 직접 웹사이트에 접속하여 자신의 정보를 인증하는 환경을 만들기 위해 입증인(Attestor)이 운영하는 HTTPS 프록시 서버를 만든다. 유저는 프록시 서버를 통해 제출할 데이터가 저장된 페이지에 접속하고 자신의 데이터를 제공하는데 제3의 기관에서 유저가 데이터를 선택적으로 제공하려면 다음의 조건이 성립되어야 한다. - 입증인이 유저가 제출하는 페이지의 접속 경로(ex. 인증 토큰, 쿠키)를 알지 못한다 - 입증인이 유저가 선택적으로 제출하는 정보 이외의 데이터를 알지 못한다. - 선택적 데이터 제공 보장을 위해 리클레임 프로토콜은 선택적 TLS 요청 공개(TLS Request Selective Reveal)과 선택적 TLS 답변 공개(TLS Response Selective Reveal)의 방식을 도입한다. 선택적 TLS 요청 공개는 [TLS Keyupdate 방식](https://www.rfc-editor.org/rfc/rfc8446.txt)에 따라 암호화된 메시지 교환만이 이뤄진다. 유저는 입증인에게 지정된 웹사이트와 소통했음을 증명하는 암호화된 요청 메시지를 보내면 입증인은 정보 요청 기관에 유저가 필요한 사이트에 접속했음을 증빙할 수 있다. 이 때 입증인은 암호화된 메시지만을 받으므로 유저의 데이터 요청 페이지의 접속 경로를 알지 못한다. - 반면 선택적 TLS 답변 공개는 유저가 선택적으로 원하는 정보만을 제공하는 기술 기반을 제공한다. 유저가 HTTPS 프록시 서버를 통해 접속 했을 때 TLS만으로는 선택적 정보 제공이 불가능하다. 그래서 리클레임 프로토콜은 영지식 증명 기반의 [zkFetch 기술](https://twitter.com/reclaimprotocol/status/1804124093031288974)을 활용한다. 원본 정보 제공 없이도 유효성 검증이 가능하다는 영지식 증명의 특성을 활용하여 유저가 입증자에게 선택적으로 정보를 제출하는 환경을 제공하는 것이다. ### 2. 증명서 생성

- 암호화 프로토콜에 의해 입증자에게 제출된 정보는 블록체인에 저장되어 누구나 검증 가능한 데이터로 활용된다. 유저가 입증자의 검증이 완료된 정보를 블록체인에 올리게되면 입증자는 TLS 서명을 통해 자신이 입증한 데이터임을 확인시킬 수 있다. - 데이터를 요청하는 제3의 기관은 블록체인 상에 유저가 제출한 증명서의 데이터를 요청하고 전송 받은 데이터의 유효성 검증을 수행하여 자신들이 요청한 데이터가 제공될 수 있는지 확인할 수 있다. 이 때 유저는 입증인, 그리고 입증인이 정보를 제출하는 기관에 자신의 접속 경로 노출을 피하고 원하는 정보만 제공한다. ### 3. 탈중앙화 익스텐션 - 앞서 설명한 일련의 암호화 프로토콜과 증명서 생성 과정은 신뢰 가능한 입증인(Trusted Attestor)가 존재한다는 가정에서 설립한다. 예를 들어 유저가 입증인과 유저가 담합하여 입증인이 증명서에 서명하는 과정에서 부정을 저지른다면 정보를 요청한 제3의 기관은 거짓 정보를 받게 된다. 이러한 문제를 방지하기 위해서는 궁극적으로 입증인의 탈중앙화를 통해 신뢰 분산 가능성이 보장되어야 한다. - 리클레임 프로토콜은 토큰을 스테이킹한 노드에게 입증인 권한을 제공하고 지분 증명(Proof of Stake)에 기반하여 부정한 처리에 과금을 부과 함으로서 부정한 행동을 피할 인센티브를 부여한다. 또한 정직한 서명 처리에 따라 보상을 추가 지급함으로서 참여의 경제적 유인을 보장한다. # 서비스 개발자 활용 방식 리클레임 프로토콜은 서비스 개발자를 위해 [웹/앱에 적용 가능한 SDK](https://docs.reclaimprotocol.org/)를 제공한다. 서비스 기획자는 1) 자신의 웹사이트의 목적에 따라 인증이 필요한 데이터를 정립하고 2) [현존하는 데이터 제공자 리스트](https://dev.reclaimprotocol.org/explore)에서 필요 데이터 제공 여부를 확인 한 후 3) 기존 제공자를 선택하거나 데이터 프로바이더를 직접 만들고 4) 웹/어플리케이션에 리클레임 SDK를 도입한다. ### 1. 데이터 프로바이더 설정하기 [가이드 비디오 바로 가기](https://www.loom.com/share/f9f352af5ab94b8f9759d4d3c451762c?sid=94e88521-2e52-44e3-8dba-a2a573d3da7a) - 데이터 프로바이더란 리클레임 프로토콜 어플리케이션을 통해 데이터를 제공하는 웹사이트의 HTTPS 프록시 서버를 생성하여 필요한 데이터를 가져오는 창구를 여는 작업이다. - [데이터 프로바이더 등록](https://dev.reclaimprotocol.org/devtoolv2)을 위해서는 다음의 과정을 거친다 - Step 0. 모바일에 리클레임 프로토콜 어플리케이션을 설치한다. ([애플](https://apps.apple.com/in/app/reclaim-protocol/id6475267895) / [안드로이드](https://play.google.com/store/apps/details?id=com.reclaim.protocol&pcampaignid=web_share)) - Step 1. QR 코드를 스캔하여 어플리케이션에 접속한다 - Step 2. 데이터를 제공하고자 하는 웹사이트의 URL을 입력한다 - Step 3. 모바일에서 인증하고자 하는 웹사이트의 페이지를 선택한다 - Step 4. 페이지에서 필요한 데이터를 선택한다 - Step 5. 데이터의 이름, 영역을 입력하고 프로바이더로 등록한다 ### 2. [어플리케이션에 적용](https://docs.reclaimprotocol.org/js/frontend)하기 - Step 0. 사전 설치: Node.js 18.0.0 혹은 이후 버전 - Step 1. [개발자도구](https://dev.reclaimprotocol.org)에 들어가서 새로운 어플리케이션을 생성한다. 그리고 `application ID`와 `application secret`를 받아 저장한다. - Step 2. 리클레임 SDK를 설치한다 ```bash copy npm i @reclaimprotocol/js-sdk ``` - Step 3. 리클레임 클라이언트를 임포트 한다 ```js copy showLineNumbers import { ReclaimClient } from '@reclaimprotocol/js-sdk' ``` - Step 4. 리클레임 클라이언트를 실행한다. ```js copy showLineNumbers {6} import './App.css'; import { ReclaimClient } from '@reclaimprotocol/js-sdk' function App() { const reclaimClient = new ReclaimClient("YOUR_APPLICATION_ID_HERE"); //TODO: replace with your applicationId return (

); } export default App; ``` - Step 5. 증거 요청을 위한 함수를 추가한다 ```js copy showLineNumbers {8-11} import './App.css'; import { ReclaimClient } from '@reclaimprotocol/js-sdk' function App() { const reclaimClient = new ReclaimClient("YOUR_APPLICATION_ID_HERE"); //TODO: replace with your applicationId async function generateVerificationRequest() { const providerIds = ['provider_id']; //TODO: replace with your provider ids you had selected while creating the application const providers = await reclaimClient.buildHttpProviderV2ByID(providerIds); } return (

); } export default App; ``` - Step 6. 증거의 맥락을 포함한다(필수는 아니지만 권장) 1. 주소 - 블록체인에서 사용되는 어플리케이션 제작에 활용되는 이더/솔라나/코스모스 계정 주소이다. 트랜젝션 서명자의 직접 주소가 아닌 컨택스트 주소 사용을 권장한다. 아닐 경우 프런트러닝 보안 문제가 발생할 수 있다. 2. 메시지 - 유저에게 어떤 증거가 요청되는지 알리는 영역이다. 어플리케이션을 위해 기존 어플리케이션에서의 증거가 아닌 새로운 증거 생산이 요구된다면 `context.message`를 고유로 지정하고 증거를 받을 때 `context.message`가 설정한 값인지 확인한다. ```js copy showLineNumbers {12} import './App.css'; import { ReclaimClient } from '@reclaimprotocol/js-sdk' function App() { const reclaimClient = new ReclaimClient("YOUR_APPLICATION_ID_HERE"); //TODO: replace with your applicationId async function generateVerificationRequest() { const providerIds = ['provider_id']; //TODO: replace with your provider ids you had selected while creating the application const providers = await reclaimClient.buildHttpProviderV2ByID(providerIds); await reclaimClient.addContext(address=`user's address`, message="for acmecorp.com on 1st january") } return (

); } export default App; ``` - Step 7. 증거 요청 오브젝트 만들기 ```js copy showLineNumbers {14-17} import './App.css'; import { ReclaimClient } from '@reclaimprotocol/js-sdk' function App() { const reclaimClient = new ReclaimClient("YOUR_APPLICATION_ID_HERE"); //TODO: replace with your applicationId async function generateVerificationRequest() { const providerIds = ['provider_id']; //TODO: replace with your provider ids you had selected while creating the application const providers = await reclaimClient.buildHttpProviderV2ByID(providerIds); await reclaimClient.addContext(address=`user's address`, message="for acmecorp.com on 1st january") const requestProofs = reclaimClient.buildRequestedProofs( providers, reclaimClient.getAppCallbackUrl() ); } return (

); } export default App; ``` - Step 8. 요청에 서명 설정하기 요청에 서명을 하도록 함으로서 유저가 피싱 사이트에 걸리지 않도록 한다. ```js copy showLineNumbers {20-25} import './App.css'; import { ReclaimClient } from '@reclaimprotocol/js-sdk' function App() { const reclaimClient = new ReclaimClient("YOUR_APPLICATION_ID_HERE"); //TODO: replace with your applicationId async function generateVerificationRequest() { const providerIds = ['provider_id']; //TODO: replace with your provider ids you had selected while creating the application const providers = await reclaimClient.buildHttpProviderV2ByID(providerIds); await reclaimClient.addContext(address=`user's address`, message="for acmecorp.com on 1st january") const requestProofs = reclaimClient.buildRequestedProofs( providers, reclaimClient.getAppCallbackUrl() ); reclaimClient.setSignature( await reclaimClient.getSignature( requestProofs, APP_SECRET //TODO : replace with your APP_SECRET ) ); } return (

); } export default App; ``` 위 MVP는 프론트엔드에서 서명을 생성하지만 `APP_SECRET` 위해서는 프론트엔드에서의 서명을 권장하지 않는다. ```js copy showLineNumbers reclaimClient.setSignature( //TODO: signature response from your backend ) ``` - Step 9. 요청 URL 받기 ```js copy showLineNumbers {26-27} import './App.css'; import { ReclaimClient } from '@reclaimprotocol/js-sdk' function App() { const reclaimClient = new ReclaimClient("YOUR_APPLICATION_ID_HERE"); //TODO: replace with your applicationId async function generateVerificationRequest() { const providerIds = ['provider_id']; //TODO: replace with your provider ids you had selected while creating the application const providers = await reclaimClient.buildHttpProviderV2ByID(providerIds); await reclaimClient.addContext(address=`user's address`, message="for acmecorp.com on 1st january") const requestProofs = reclaimClient.buildRequestedProofs( providers, reclaimClient.getAppCallbackUrl() ); reclaimClient.setSignature( await reclaimClient.getSignature( requestProofs, APP_SECRET //TODO : replace with your APP_SECRET ) ); const reclaimReq = await reclaimClient.createVerificationRequest(providerIds); const requestUrl = await reclaimReq.start(); } return (

); } export default App; ``` - Step 10. QR 코드 혹은 버튼 노출하가 ```js copy showLineNumbers {3, 7, 35, 36} import './App.css'; import { ReclaimClient } from '@reclaimprotocol/js-sdk' import { useState } from 'react'; function App() { const [url, setUrl] = useState('') const reclaimClient = new ReclaimClient("YOUR_APPLICATION_ID_HERE"); //TODO: replace with your applicationId async function generateVerificationRequest() { const providerIds = ['provider_id']; //TODO: replace with your provider ids you had selected while creating the application const providers = await reclaimClient.buildHttpProviderV2ByID(providerIds); await reclaimClient.addContext(address=`user's address`, message="for acmecorp.com on 1st january") const requestProofs = reclaimClient.buildRequestedProofs( providers, reclaimClient.getAppCallbackUrl() ); reclaimClient.setSignature( await reclaimClient.getSignature( requestProofs, APP_SECRET //TODO : replace with your APP_SECRET ) ); const reclaimReq = await reclaimClient.createVerificationRequest(providerIds); const requestUrl = await reclaimReq.start(); } return (

); } export default App; ``` - Step 11. 콜백 설정하기 ```js copy showLineNumbers {32-38} import './App.css'; import { ReclaimClient } from '@reclaimprotocol/js-sdk' import { useState } from 'react'; function App() { const [url, setUrl] = useState('') const reclaimClient = new ReclaimClient("YOUR_APPLICATION_ID_HERE"); //TODO: replace with your applicationId async function generateVerificationRequest() { const providerIds = ['provider_id']; //TODO: replace with your provider ids you had selected while creating the application const providers = await reclaimClient.buildHttpProviderV2ByID(providerIds); await reclaimClient.addContext(address=`user's address`, message="for acmecorp.com on 1st january") const requestProofs = reclaimClient.buildRequestedProofs( providers, reclaimClient.getAppCallbackUrl() ); reclaimClient.setSignature( await reclaimClient.getSignature( requestProofs, APP_SECRET //TODO : replace with your APP_SECRET ) ); const reclaimReq = await reclaimClient.createVerificationRequest(providerIds); const requestUrl = await reclaimReq.start(); reclaimReq.on('success', function(proofs) { //TODO: your business logic }); reclaimReq.on('error', function(errors) { //TODO: your business logic }) } return (

); } export default App; ``` - 결과물 필수가 아닌 스텝을 제외하고 구현할 경우 아래와 같은 코드가 완성된다. 어플리케이션에서 버튼을 클릭하여 인증 요청을 할 수 있다. ```js copy showLineNumbers import './App.css'; import { ReclaimClient } from '@reclaimprotocol/js-sdk' import { useState } from 'react'; function App() { const [url, setUrl] = useState('') const reclaimClient = new ReclaimClient("YOUR_APPLICATION_ID_HERE"); //TODO: replace with your applicationId async function generateVerificationRequest() { const providerIds = ['provider_id']; //TODO: replace with your provider ids you had selected while creating the application const providers = await reclaimClient.buildHttpProviderV2ByID(providerIds); await reclaimClient.addContext(address=`user's address`, message="for acmecorp.com on 1st january") const requestProofs = reclaimClient.buildRequestedProofs( providers, reclaimClient.getAppCallbackUrl() ); reclaimClient.setSignature( await reclaimClient.getSignature( requestProofs, APP_SECRET //TODO : replace with your APP_SECRET ) ); const reclaimReq = await reclaimClient.createVerificationRequest(providerIds); const requestUrl = await reclaimReq.start(); reclaimReq.on('success', function(proofs) { //TODO: your business logic }); reclaimReq.on('error', function(errors) { //TODO: your business logic }) } return (

); } export default App; ```

리클레임 프로토콜 시작하기