Credential Handler API

idcon vol.28の登壇資料です。Credential Handler APIについて説明しています。

Transcript

1. Credential Handler API #idcon vol.28 DID特集その2 @kg0r0
2. ⽬次 • はじめに • CHAPI • Demo • Code Walkthrough • Verifiable Presentation Request • まとめ • CHAPI + OIDC SIOP?
3. はじめに
4. ⾃⼰紹介 • 合路 健⼈ (26) • 認証基盤の開発や脆弱性診断などに従事。 • 技術書典9でSSI/DIDに関する同⼈誌を執筆 「アイデンティティは誰のもの︖ ~Hyperledger Indy & AriesでSSI~」
5. CHAPI
6. CHAPI • W3C CCG (Credential Community Group)で仕様が公開 • オリジンベースでCredentialの要求と保管のイベントを処理 • Payment Handler APIとCredential Management API をモデル化 • CredentialRequestEventとCredentialStoreEventが定義 引用元: https://iiw.idcommons.net/101_Session:_Verifiable_Credential_Handler_(CHAPI)_and_DIDComm
7. Roles • Credential Repository (Wallet) – ユーザーのCredentialの要求と保管を処理する • Credential Issuer (Issuer) – ユーザーにCredentialを発⾏する • Credential Verifier (Verifier) – ユーザーにCredentialを要求する • Mediator （User Agent） – Credentialの保管と要求を仲介する – Polyfill利⽤時は別コンポーネントが存在 ※ 参考: https://github.com/w3c-ccg/credential-handler-api/#roles https://github.com/digitalbazaar/authorization.io#credential-mediator ※
8. Credential Handler Registration (Wallet) 引用元: https://www.youtube.com/watch?v=bm3XBPB4cFY
9. Verifiable Credential Storage (Issuer) 引用元:https://www.youtube.com/watch?v=bm3XBPB4cFY
10. Verifiable Credential Request (Verifier) 引用元:https://www.youtube.com/watch?v=bm3XBPB4cFY
11. Motivation and Background • ユーザーがCredentialをより簡単かつ安全に使⽤可能にする 例) NASCAR problem • ユーザーがWalletプロバイダーを選択可能にする • Webアプリケーション開発者に標準のAPIを提供する • いつくかのブラウザセキュリティモデルの解決 – 2つのWebサイトがWebブラウザを介して相互にプライベートな通信を 可能にする – ブラウザのタブ間通信を可能にする 参考: https://github.com/digitalbazaar/credential-handler-polyfill/blob/master/docs/motivation-and-background.md https://iiw.idcommons.net/101_Session:_Verifiable_Credential_Handler_(CHAPI)_and_DIDComm
12. （参考）NASCAR problem Sign-in UI Payments UIにブランドアイコンが多く存在している状態 参考: https://indieweb.org/NASCAR_problem
13. Demo
14. Demo • Demo Wallet https://chapi-demo-wallet.digitalbazaar.com/ • Demo Issuer https://chapi-demo-issuer.digitalbazaar.com/ • Demo Verifier https://chapi-demo-verifier.digitalbazaar.com/ 参考: https://github.com/w3c-ccg/credential-handler-api/#demo
15. Code Walkthrough
16. Credential Handler Polyfill • CHAPIの動作を再現するために読み込むコード • CHAPI⽤に拡張された以下のオブエジェクトにアクセス可能 – navigator.credentials – credentialHandlerPolyfill • W3C Credential Handler API 1.0記載のExampleのコード と差異がある 参考: https://github.com/digitalbazaar/credential-handler-polyfill https://github.com/digitalbazaar/authorization.io
17. Loading the Polyfill (1/2) 引用元:https://www.youtube.com/watch?v=bm3XBPB4cFY
18. Loading the Polyfill (2/2) <script src="https://unpkg.com/credential-handler-polyfill@2.1.0/dist/credential- handler-polyfill.min.js"></script> . . . const polyfill = window.credentialHandlerPolyfill; $ npm install credential-handler-polyfill browser script : npm package: 参考: https://github.com/digitalbazaar/credential-handler-polyfill
19. Requesting and Storing Credentials const credentialQuery = {web: {}}; const webCredential = await navigator.credentials.get(credentialQuery); if(!webCredential) { console.log('no credentials received’); } const result = await navigator.credentials.store(webCredential); if(!result) { console.log('store credential operation did not succeed’); } get() : store() : 引用元: https://github.com/digitalbazaar/credential-handler-polyfill サンプル サンプル
20. Credential Handler Registration import * as polyfill from 'credential-handler-polyfill’; . . . const {CredentialManager, CredentialHandlers} = polyfill; const result = await CredentialManager.requestPermission(); if(result !== 'granted') { throw new Error('Permission denied.'); } // get credential handler registration const registration = await CredentialHandlers.register('/credential-handler'); 参考: https://github.com/digitalbazaar/credential-handler-polyfill#requesting-permission-and-registering-the-handler サンプル
21. Verifiable Presentation Request
22. Presentation Protocol • WebアプリケーションとWallet間のやりとりはCHAPIと別の 仕様で定義されている • CHAPIとDIDCommでPresentation Protocolの仕様は異なる • CHAPI : Verifiable Presentation Request Specification ※１ • DIDComm : Presentation Exchange ※2 参考: ※1 https://w3c-ccg.github.io/vp-request-spec/ ※2 https://github.com/decentralized-identity/presentation-exchange
23. Verifiable Presentation Request • W3C CCG (Credential Community Group)で仕様が公開 • いくつかのシナリオを想定 – Browser - CHAPI – Mobile Applications - TBD – Peer to Peer – TBD • Verifiable Credentialの提⽰または保存において使⽤ – navigator.credentials.get(request) – navigator.credentials.store(request) 参考: https://w3c-ccg.github.io/vp-request-spec/ Holder (Wallet) Web App (Issuer or Verifier) option
24. credentials.get() const credentialQuery = { web: { VerifiablePresentation: { query: { type: 'QueryByExample', credentialQuery: { // an optional reason for requesting this credential reason: 'We need you to prove your eligibility to work.’, example: { '@context': [ 'https://www.w3.org/2018/credentials/v1', 'https://w3id.org/citizenship/v1' ], type: 'PermanentResidentCard' } } }, // a 128-bit randomly generated value encoded as a string (use a UUID); challenge: '3182bdea-63d9-11ea-b6de-3b7c1404d57f’, // the domain that must be digitally signed in the authentication domain: 'jobs.example.com' } } }; サンプル 参考: https://w3c-ccg.github.io/vp-request-spec/
25. credentials.get() const webCredential = await navigator.credentials.get(credentialQuery); if(!webCredential) { console.log('no presentation received'); } // Response: null // if the user cancels // or a WebCredential with these attributes/values: { "type": "web", "dataType": "VerifiablePresentation", "data": { // Verifiable Presentation goes here, containing the credentials // that the user agreed to share, or `null` if the user canceled } } const {data: presentation} = webCredential; // send `presentation` to server for forwarding to verifier API サンプル 参考: https://w3c-ccg.github.io/vp-request-spec/
26. credentials.store() const result = await navigator.credentials.store(webCredential); if(!result) { console.log('store credential operation canceled'); } // Response: null // if the user cancels // or a WebCredential with these attributes/values: { "type": "web", "dataType": "VerifiablePresentation", "data": { // Verifiable Presentation goes here, containing the credentials // that the user agreed to store } } サンプル 参考: https://w3c-ccg.github.io/vp-request-spec/
27. おわりに
28. まとめ • Credentialをより簡単かつ安全に使⽤可能にする • Browser経由でWalletを選択可能にする • 開発者にCredentialの要求・保存に関するAPIを提供 • 様々なシナリオでの利⽤も検討中
29. CHAPIのサンプル実装 • credential-handler-api : https://github.com/w3c-ccg/credential-handler- api#demo • CHAPI SIOP : https://github.com/OR13/chapi-siop.did.ai • Covid 19 Verifiable Credential Issuer : https://github.com/decentralized-identity/c19- vc.com
30. 参考 • Verifiable Credentials Data Model 1.0 https://www.w3.org/TR/vc-data-model/ • Credential Handler API 1.0 https://w3c-ccg.github.io/credential-handler-api/ • Verifiable Presentation Request Specification v0.1 https://w3c-ccg.github.io/vp-request-spec/ • 101 Session: Verifiable Credential Handler (CAHPI) and DIDComm https://iiw.idcommons.net/101_Session:_Verifiable_Crede ntial_Handler_(CHAPI)_and_DIDComm
31. CHAPI + OIDC SIOP ?
32. CHAPI SIOP 参考: https://github.com/OR13/chapi-siop.did.ai • OIDC SIOP でCHAPIを利⽤する実験的な実装が存在 • Code : https://github.com/OR13/chapi-siop.did.ai • Demo : https://chapi-siop.did.ai/
33. CHAPI SIOP SIOP (Holder) Relying Party (Verifier) IdP (Issuer) Credential Repository (Wallet) 参考: https://github.com/OR13/chapi-siop.did.ai Issue Credential Send Presentation
34. CHAPI SIOP SIOP (Holder) Relying Party (Verifier) IdP (Issuer) Credential Repository (Wallet) 参考: https://github.com/OR13/chapi-siop.did.ai Issue Credential Send Presentation
35. Verify Credentials User Agent Credential Repository [2] Response [1] / [3] /get ?query=eyJ0eX … &redirect_uri= https://chapi-siop.did.ai/verifier/implict/callback [4] Response Verifier [5] /callback?id_token=
36. Verify Credentials User Agent Credential Repository [2] Response [1] / [3] /get ?query=eyJ0eX … &redirect_uri= https://chapi-siop.did.ai/verifier/implict/callback [4] response [5] /callback?id_token= Verifier
37. Verify Credentials User Agent Credential Repository [2] Response [1] / [3] /get ?query=eyJ0eX … &redirect_uri= https://chapi-siop.did.ai/verifier/implict/callback [4] Response [5] /callback?id_token= Verifier
38. Verify Credentials User Agent Credential Repository [2] response [1] / [3] /get ?query=eyJ0eX … &redirect_uri= https://chapi-siop.did.ai/verifier/implict/callback [4] Response [5] /callback?id_token= Verifier
39. Verify Credentials User Agent Credential Repository [2] response [1] / [3] /get ?query=eyJ0eX … &redirect_uri= https://chapi-siop.did.ai/verifier/implict/callback [4] Response [5] /callback?id_token=eyJhbGc… Verifier
40. Verify Credentials User Agent Credential Repository [2] response [1] / [3] /get ?query=eyJ0eX … &redirect_uri= https://chapi-siop.did.ai/verifier/implict/callback [4] response [5] /callback?id_token=eyJhbGc… Verifier