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. ⽬次 • はじめに • CHAPI • Demo • Code Walkthrough

    • Verifiable Presentation Request • まとめ • CHAPI + OIDC SIOP?
  2. 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
  3. 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 ※
  4. 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
  5. 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
  6. 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
  7. Loading the Polyfill (2/2) <script src="https://unpkg.com/[email protected]/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
  8. 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 サンプル サンプル
  9. 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 サンプル
  10. 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
  11. 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
  12. 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/
  13. 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/
  14. 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/
  15. 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
  16. 参考 • 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
  17. CHAPI SIOP SIOP (Holder) Relying Party (Verifier) IdP (Issuer) Credential

    Repository (Wallet) 参考: https://github.com/OR13/chapi-siop.did.ai Issue Credential Send Presentation
  18. CHAPI SIOP SIOP (Holder) Relying Party (Verifier) IdP (Issuer) Credential

    Repository (Wallet) 参考: https://github.com/OR13/chapi-siop.did.ai Issue Credential Send Presentation
  19. 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=
  20. 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
  21. 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
  22. 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
  23. 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
  24. 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