Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Credential Handler API

kg0r0
November 19, 2020

Credential Handler API

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

kg0r0

November 19, 2020
Tweet

More Decks by kg0r0

Other Decks in Technology

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 ※1 • 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