SSIで覗き見るPWAの世界 / SSI on PWA

by hitsuji-haneta

Slide 1

Slide 1 text

18"Ͱ೷͖ݟΔ44*ͷੈք 髙橋翔太 LasTrust株式会社

Slide 2

Slide 2 text

ࣗݾ঺հ h1tsuj1_haneta （ヒツジハネタ） LasTrust株式会社　取締役CTO ♥ 音楽 ♥ キャンプ SIer（金融）高校の教員フリーのエンジニアスタートアップ創業髙橋翔太

Slide 3

Slide 3 text

ฐࣾͷ঺հ LasTrust株式会社・ブロックチェーン証明書の発行・2019年8月創業のスタートアップ Mission ݟ͑͟ΔՁ஋ΛՄࢹԽ͢Δɻ フルリモートの国際チームです

Slide 4

Slide 4 text

ΞδΣϯμ PWA × SSI 先端技術の勘所（私見） SSIとは PWAとの組み合わせデモ！苦しんだこと学んだこと ࠓ೔࿩͢͜ͱ

Slide 5

Slide 5 text

PWA × SSI 聞いたことありますか？

Slide 6

Slide 6 text

44*ͱ͸ʁ Self Sovereign Identity 自己主権型アイデンティティ Self-sovereign identity (SSI) is an approach to digital identity that gives individuals control of their digital identities. (Wikipedia) 自己主権型アイデンティティ（SSI）とは個人にデジタルアイデンティティのコントロールを渡すためのアプローチです。はぁ？

Slide 7

Slide 7 text

44*ͱ͸ʁ 皆さんのデジタルIDといえば？これって皆さんのものじゃありませんよね

Slide 8

Slide 8 text

44*ͱ͸ʁ 従来のデジタルID 自分で管理できるものがない公的なID 国が管理（マイナンバー等）メールアドレスドメイン事業者が管理サービスアカウントサービス事業者が管理

Slide 9

Slide 9 text

44*ͱ͸ʁ というわけでSSIとは自分のアイデンティティは自分で管理しようぜ！という考え方および関連技術の総称 https://identity.foundation/ https://sovrin.org/ Microsoft社

Slide 10

Slide 10 text

44*ͱ͸ʁ Ͳ͏΍࣮ͬͯݱ͢Δʁ Decentralized Identifier DID Verifiable Credential VC

Slide 11

Slide 11 text

44*ͱ͸ʁ 「アイデンティティ」とは異なる Identi fi er(識別子)の役割サービス上のエンティティと結びつける認証情報と結びつける Veri fi able Credentialと結びつける「あなたが誰か」を識別する文字列 Decentralized Identifier ෼ࢄܕ*% DID

Slide 12

Slide 12 text

44*ͱ͸ʁ 従来はメールアドレスとかサービスアカウントとか… とはいえ特定の管理者に預けたくはない… かといって自分のローカルにだけ持ってても意味ない… Decentralized Identifier ෼ࢄܕ*% DID

Slide 13

Slide 13 text

44*ͱ͸ʁ Decentralized Identifier ෼ࢄܕ*% DID みんなで分散管理すればいいじゃん！ブロックチェーンとかね！

Slide 14

Slide 14 text

44*ͱ͸ʁ Decentralized Identifier ෼ࢄܕ*% DID did:example:123456789abcdefghi 具体的にはこんな感じ 63*ͷεΩʔϚ ɾIUUQ ɾGUQ ɾMEBQ ͱ͔ͱಉ͡ %*%ϝιου Ͳͷ෼ࢄγεςϜ΍ϒϩοΫνΣʔϯ ʹΞϯΧϦϯά͍ͯ͠Δ͔ FUISCUDSJQJEJPOͳͲ ϝιου಺*% ϝιου಺Ͱ Ұҙʹܾ·Δจࣈྻ ϒϩοΫνΣʔϯͷ ΞΧ΢ϯτͱ͔

Slide 15

Slide 15 text

44*ͱ͸ʁ Decentralized Identifier ෼ࢄܕ*% DID DID subject Distributed Ledger Universal Resolver User Agent Identity Hub

Slide 16

Slide 16 text

44*ͱ͸ʁ Decentralized Identifier ෼ࢄܕ*% DID ϒϩοΫνΣʔϯ Ϣʔβʔ ϝιουΛ൑ఆͯ͠ DIDΛ͍͍ײ͡ʹ ඥ෇͚ΔγεςϜ ؅ཧΞϓϦ DIDʹඥ෇͍ͨύʔιφϧͳ ৘ใΛೖΕΔͱ͜Ζ 具体例

Slide 17

Slide 17 text

44*ͱ͸ʁ Verifiable Credential VC ݕূՄೳͳࢿ֨৘ใ 個人情報や資格情報などをセキュアかつマシンリーダブルな方法で共有するための規格

Slide 18

Slide 18 text

44*ͱ͸ʁ Verifiable Credential VC ݕূՄೳͳࢿ֨৘ใ ɹɹ໊લɿAlice ੜ೥݄೔ɿ1990݄1݄1೔ ɹɹॅॴɿHogeݝFugaࢢ ి࿩൪߸ɿ080-xxxx-xxxx 個人情報渡したくないよ！成人してますか？成人証明書

Slide 19

Slide 19 text

44*ͱ͸ʁ Verifiable Credential VC ݕূՄೳͳࢿ֨৘ใ ɹɹ໊લɿAlice ੜ೥݄೔ɿ1990݄1݄1೔ ɹɹॅॴɿHogeݝFugaࢢ ి࿩൪߸ɿ080-xxxx-xxxx θϩ஌ࣝূ໌ Zero Knowledge Proof 🤝成人証明書

Slide 20

Slide 20 text

44*ͱ͸ʁ Verifiable Credential VC ݕূՄೳͳࢿ֨৘ใ 具体的には？ DIDが埋め込まれたJWTですつまり所有者でも改ざんできない！

Slide 21

Slide 21 text

44*ͱ͸ʁ Verifiable Credential VC ݕূՄೳͳࢿ֨৘ใ VC Wallet Verifier Issuer did:hoge:1111 did:fuga:2222 ①自分のDIDを送付 ④発行者のDIDを確認 ⑤検証結果 ③取得したVCを送付 ②２つのDIDを埋め込んだ VCを発行して送付　　　　　　 Holder

Slide 22

Slide 22 text

44*ͱ͸ʁ Verifiable Credential VC ݕূՄೳͳࢿ֨৘ใ User VC Wallet Verifier Issuer ①自分のDIDを送付 ④発行者のDIDを確認 ⑤検証結果 ③取得したVCを送付 ②２つのDIDを埋め込んだ VCを発行して送付　　　　　　発行者から検証者に送られるのではなく本人が所有＆管理している did:hoge:1111 did:fuga:2222

Slide 23

Slide 23 text

44*ͱ͸ʁ Verifiable Credential VC ݕূՄೳͳࢿ֨৘ใ https://www.w3.org/TR/vc-data-model 発行者のDID 本人のDID

Slide 24

Slide 24 text

44*ͱ͸ʁ Verifiable Credential VC ݕূՄೳͳࢿ֨৘ใ https://www.w3.org/TR/vc-data-model いくつかのVCを組み合わせて新しいJWTを作れる Verifiable Presentation

Slide 25

Slide 25 text

44*ͱ͸ʁ Verifiable Credential VC ݕূՄೳͳࢿ֨৘ใ https://www.w3.org/TR/vc-data-model 本人のDID

Slide 26

Slide 26 text

44*ͱ͸ʁ ͳΔ΄Ͳɺ44*׬શʹཧղͨ͠ Decentralized Identifier DID Verifiable Credential VC

Slide 27

Slide 27 text

PWA と組み合わせて何ができる？

Slide 28

Slide 28 text

18"ͱͷ૊Έ߹Θͤ Θͨ͠ うちはブロックチェーン証明書の発行事業をやってるクレデンシャルの会社だし次に来るっぽいSSI（主にVC）についてもキャッチアップしとかないとな〜研究がてらwalletアプリの実験してみよ！

Slide 29

Slide 29 text

Distributed Ledger Universal Resolver Wallet App Identity Hub 18"ͱͷ૊Έ߹Θͤ Entity Issuer Verifier 自分で実装したものほぼ丸ごとツールに頼ったもの PWAで実装

Slide 30

Slide 30 text

18"ͱͷ૊Έ߹Θͤ Why PWA, not Native App? MetaMaskとの連携が可能 IPFSでの配信が可能 Native Appの事例は既にあった PWAなら十分色々できる（QRコード読取、ファイル保存、NFC読取）

Slide 31

Slide 31 text

18"ͱͷ૊Έ߹Θͤ *1'4ͱ͸ʁ 分散ストレージのプロトコル。静的ファイルをP2P上に置いて HTTPみたいにアクセスできる。 DIDもVCも非中央集権で分散管理なんだし、アプリ自体もストアや特定のサーバーに置かずに分散化させたいよね！

Slide 32

Slide 32 text

18"ͱͷ૊Έ߹Θͤ .FUB.BTLͱ͸ʁ Blockchainのアカウントを管理するための、 Blockchain界隈で超有名なツール。 DIDがBlockchainアカウントにアンカリングされるなら、 MetaMaskと連携できた方がいいよね！ Blockchain （モバイルアプリ or ブラウザプラグイン）

Slide 33

Slide 33 text

18"ͱͷ૊Έ߹Θͤ ϢʔεέʔεͷετʔϦʔΛߟ͑Δ 居酒屋で成人かどうかを確認するデモ認定機関が誕生日情報をもとに成人VCを発行居酒屋はVCを確認できたらお酒を提供 ੒ਓೝఆ͢Δػؔ ډञ԰ Ϣʔβʔ QRをフックにプロセス開始

Slide 34

Slide 34 text

18"ͱͷ૊Έ߹Θͤ IC身分証を読み取り誕生日情報を取得 ࢓༷ͱϓϩηεΛߟ͑Δ 認定機関と居酒屋のAPIはQRからコール DIDはMetaMaskから取得したアカウントから PWAは静的サイトとしてIPFS上にホスティング VCはファイルシステムにimport/exportできる

Slide 35

Slide 35 text

18"ͱͷ૊Έ߹Θͤ Blockchain (Ethereum) Wallet App Entity Verifier Resolver Account DID ICΧʔυ NFC ੒ਓೝఆ͢Δػؔ Issuer ډञ԰ birthday adult adult

Slide 36

Slide 36 text

18"ͱͷ૊Έ߹Θͤ 機能詳細使用するAPIやライブラリ静的サイト化 IPFSから配信するために静的サイト化する Next.js MetaMask連携 MetaMaskアプリと連携し EthereumProviderと接続 Ethereum API (Metamaskがwindowにインジェクト) QR読み取りカメラからQRを読み取り URL(API)にリクエスト BarcodeDetector API Navigator.mediaDevices API NFC読み取り ICカードのNFCタグからデータを読み取る NDEFReader API データ永続化アプリを終了してもVCが消えないように永続化 IndexedDB API ファイルアクセス JWTのインポートやエクスポート File System Access API (mobileはHTML5) PWAっぽい機能などの整理現在Android Chromeのみ MetaMaskアプリ内の WebViewで表示 ཱ྆ෆՄ

Slide 37

Slide 37 text

18"ͱͷ૊Έ߹Θͤ Blockchain (Ethereum) Wallet App Entity Verifier Resolver Account DID ICΧʔυ NFC ੒ਓೝఆ͢Δػؔ Issuer ډञ԰ birthday adult adult このユースケースを２分割・MetaMaskを使用するセクション・NFCを使用するセクション

Slide 38

Slide 38 text

18"ͱͷ૊Έ߹Θͤ Blockchain (Ethereum) Wallet App Entity Verifier Resolver Account DID ICΧʔυ NFC ੒ਓೝఆ͢Δػؔ Issuer ډञ԰ birthday adult adult セクション① MetaMask連携でDID発行

Slide 39

Slide 39 text

18"ͱͷ૊Έ߹Θͤ Blockchain (Ethereum) Entity Verifier Resolver Account DID ICΧʔυ NFC ੒ਓೝఆ͢Δػؔ Issuer ډञ԰ birthday adult adult セクション② NFCやQRをフックにVCのやり取り

Slide 40

Slide 40 text

デモ ! それではいよいよ

Slide 41

Slide 41 text

MetaMaskアプリ上のWebViewから表示 IPFS上にホスティング (IPFSゲートウェイを通してHTTPアクセス) MetaMaskからEthereumアカウントと連携 DIDを発行セクション①

Slide 42

Slide 42 text

IC身分証から誕生日データを取得 → VC化誕生日VCを認定機関に送り成人VCを発行してもらう成人VCを居酒屋に送り認証成功　→ websocketで認証結果を居酒屋UIに表示セクション②

Slide 43

Slide 43 text

σϞ DIDの認証まわり（ここでNFC使える？） ࠓޙ΋΍͍ͬͯͧ͘ 最初のVCは外部機関から発行されるべき MetaMask使わないでChromeで完結させたい脱しょぼしょぼレンダリング

Slide 44

Slide 44 text

先端技術の勘所 (私見)

Slide 45

Slide 45 text

「仕様が決まってない」のか　　「情報が出てこない」のか問題 ۤ͠Μͩ͜ͱ ライブラリで右往左往じゃ問題ググっても出てこないぜ問題 ۤ͠Μͩ͜ͱ

Slide 46

Slide 46 text

άάͬͯ΋ग़ͯ͜ͳ͍ͥ໰୊ ググっても全然出てこないぜ公式DocはおろかReadmeすらないぜソースを読むしかないぜ ۤ͠Μͩ͜ͱ

Slide 47

Slide 47 text

ϥΠϒϥϦͰӈԟࠨԟ͡Ό໰୊ 最初はまるっと全部やってくれるライブラリを使おうとしたんじゃちょっと凝ったことをしようとするとすぐドツボにハマったんじゃ結局責務の小さいライブラリを自分で組み合わせた方が早かったんじゃ ۤ͠Μͩ͜ͱ

Slide 48

Slide 48 text

ʮ࢓༷͕ܾ·͍ͬͯͳ͍ʯͷ͔ ɹʮ৘ใ͕ग़ͯ͜ͳ͍ʯͷ͔໰୊ 仕様をググっても出てこないのはググり力が低いのかまだ検討中なのかライブラリAとライブラリBで仕様が違うのはなぜなのかあっちの記事とこっちの記事で言っていることが違うのは何なのか ۤ͠Μͩ͜ͱ

Slide 49

Slide 49 text

ֶΜͩ͜ͱ 下調べは大事だけど作り始めないと結局わからない ֶΜͩ͜ͱ オレオレ仕様でもいいからまず作ってから考える

Slide 50

Slide 50 text

ふふ、最短コースでいくぜアイアムクレバー ֶΜͩ͜ͱ 当初のイメージ

Slide 51

Slide 51 text

悲しい現実そもそも想像で書かれた地図でした ֶΜͩ͜ͱ

Slide 52

Slide 52 text

結局のところ ֶΜͩ͜ͱ 泥臭くても真っ直ぐ行ったほうが早かった

Slide 53

Slide 53 text

ֶΜͩ͜ͱ Done is better than Perfect. 完璧を目指すよりまず終わらせろ多分動くと思うからリリースしようぜ

Slide 54

Slide 54 text

·ͱΊ オレオレ仕様でもまず作ろう！ PWA ×SSI 面白いですよ！