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

Credential Handler API

Ed0317cb78915cc841fd1b9461a48120?s=47 kg0r0
November 19, 2020

Credential Handler API

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

Ed0317cb78915cc841fd1b9461a48120?s=128

kg0r0

November 19, 2020
Tweet

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