Slide 1
Slide 1 text
Credential Handler API
#idcon vol.28 DID特集その2
@kg0r0
Slide 2
Slide 2 text
⽬次
• はじめに
• CHAPI
• Demo
• Code Walkthrough
• Verifiable Presentation Request
• まとめ
• CHAPI + OIDC SIOP?
Slide 3
Slide 3 text
はじめに
Slide 4
Slide 4 text
⾃⼰紹介
• 合路 健⼈ (26)
• 認証基盤の開発や脆弱性診断などに従事。
• 技術書典9でSSI/DIDに関する同⼈誌を執筆
「アイデンティティは誰のもの︖ ~Hyperledger Indy
& AriesでSSI~」
Slide 5
Slide 5 text
CHAPI
Slide 6
Slide 6 text
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
Slide 7
Slide 7 text
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 ※
Slide 8
Slide 8 text
Credential Handler Registration (Wallet)
引用元: https://www.youtube.com/watch?v=bm3XBPB4cFY
Slide 9
Slide 9 text
Verifiable Credential Storage (Issuer)
引用元:https://www.youtube.com/watch?v=bm3XBPB4cFY
Slide 10
Slide 10 text
Verifiable Credential Request (Verifier)
引用元:https://www.youtube.com/watch?v=bm3XBPB4cFY
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
（参考）NASCAR problem
Sign-in UI
Payments
UIにブランドアイコンが多く存在している状態
参考: https://indieweb.org/NASCAR_problem
Slide 13
Slide 13 text
Demo
Slide 14
Slide 14 text
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
Slide 15
Slide 15 text
Code Walkthrough
Slide 16
Slide 16 text
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
Slide 17
Slide 17 text
Loading the Polyfill (1/2)
引用元:https://www.youtube.com/watch?v=bm3XBPB4cFY
Slide 18
Slide 18 text
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
Slide 19
Slide 19 text
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
サンプル
サンプル
Slide 20
Slide 20 text
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
サンプル
Slide 21
Slide 21 text
Verifiable Presentation Request
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
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
Slide 24
Slide 24 text
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/
Slide 25
Slide 25 text
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/
Slide 26
Slide 26 text
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/
Slide 27
Slide 27 text
おわりに
Slide 28
Slide 28 text
まとめ
• Credentialをより簡単かつ安全に使⽤可能にする
• Browser経由でWalletを選択可能にする
• 開発者にCredentialの要求・保存に関するAPIを提供
• 様々なシナリオでの利⽤も検討中
Slide 29
Slide 29 text
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
Slide 30
Slide 30 text
参考
• 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
Slide 31
Slide 31 text
CHAPI + OIDC SIOP ?
Slide 32
Slide 32 text
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/
Slide 33
Slide 33 text
CHAPI SIOP
SIOP
(Holder)
Relying Party
(Verifier)
IdP
(Issuer)
Credential
Repository
(Wallet)
参考: https://github.com/OR13/chapi-siop.did.ai
Issue
Credential
Send
Presentation
Slide 34
Slide 34 text
CHAPI SIOP
SIOP
(Holder)
Relying Party
(Verifier)
IdP
(Issuer)
Credential
Repository
(Wallet)
参考: https://github.com/OR13/chapi-siop.did.ai
Issue
Credential
Send
Presentation
Slide 35
Slide 35 text
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=
Slide 36
Slide 36 text
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
Slide 37
Slide 37 text
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
Slide 38
Slide 38 text
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
Slide 39
Slide 39 text
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
Slide 40
Slide 40 text
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