Credential Handler API

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

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