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

    View Slide

  2. ⽬次
    • はじめに
    • CHAPI
    • Demo
    • Code Walkthrough
    • Verifiable Presentation Request
    • まとめ
    • CHAPI + OIDC SIOP?

    View Slide

  3. はじめに

    View Slide

  4. ⾃⼰紹介
    • 合路 健⼈ (26)
    • 認証基盤の開発や脆弱性診断などに従事。
    • 技術書典9でSSI/DIDに関する同⼈誌を執筆
    「アイデンティティは誰のもの︖ ~Hyperledger Indy
    & AriesでSSI~」

    View Slide

  5. CHAPI

    View Slide

  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

    View Slide

  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 ※

    View Slide

  8. Credential Handler Registration (Wallet)
    引用元: https://www.youtube.com/watch?v=bm3XBPB4cFY

    View Slide

  9. Verifiable Credential Storage (Issuer)
    引用元:https://www.youtube.com/watch?v=bm3XBPB4cFY

    View Slide

  10. Verifiable Credential Request (Verifier)
    引用元:https://www.youtube.com/watch?v=bm3XBPB4cFY

    View Slide

  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

    View Slide

  12. (参考)NASCAR problem
    Sign-in UI
    Payments
    UIにブランドアイコンが多く存在している状態
    参考: https://indieweb.org/NASCAR_problem

    View Slide

  13. Demo

    View Slide

  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

    View Slide

  15. Code Walkthrough

    View Slide

  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

    View Slide

  17. Loading the Polyfill (1/2)
    引用元:https://www.youtube.com/watch?v=bm3XBPB4cFY

    View Slide

  18. Loading the Polyfill (2/2)

    . . .
    const polyfill = window.credentialHandlerPolyfill;
    $ npm install credential-handler-polyfill
    browser script :
    npm package:
    参考: https://github.com/digitalbazaar/credential-handler-polyfill

    View Slide

  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
    サンプル
    サンプル

    View Slide

  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
    サンプル

    View Slide

  21. Verifiable Presentation Request

    View Slide

  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

    View Slide

  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

    View Slide

  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/

    View Slide

  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/

    View Slide

  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/

    View Slide

  27. おわりに

    View Slide

  28. まとめ
    • Credentialをより簡単かつ安全に使⽤可能にする
    • Browser経由でWalletを選択可能にする
    • 開発者にCredentialの要求・保存に関するAPIを提供
    • 様々なシナリオでの利⽤も検討中

    View Slide

  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

    View Slide

  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

    View Slide

  31. CHAPI + OIDC SIOP ?

    View Slide

  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/

    View Slide

  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

    View Slide

  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

    View Slide

  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=

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide

  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

    View Slide