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

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

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

7afd74181738991f61d6061562ff419d?s=128

hitsuji-haneta

June 26, 2021
Tweet

Transcript

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

  2. ࣗݾ঺հ h1tsuj1_haneta (ヒツジハネタ) LasTrust株式会社 取締役CTO ♥ 音楽 ♥ キャンプ SIer(金融) 高校の教員

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

  4. ΞδΣϯμ PWA × SSI 先端技術の勘所(私見) SSIとは PWAとの組み合わせ デモ! 苦しんだこと 学んだこと

    ࠓ೔࿩͢͜ͱ
  5. PWA × SSI 聞いたことありますか?

  6. 44*ͱ͸ʁ Self Sovereign Identity 自己主権型アイデンティティ Self-sovereign identity (SSI) is an

    approach to digital identity that gives individuals control of their digital identities. (Wikipedia) 自己主権型アイデンティティ(SSI)とは個人にデジタル アイデンティティのコントロールを渡すためのアプローチです。 はぁ?
  7. 44*ͱ͸ʁ 皆さんのデジタルIDといえば? これって皆さんのものじゃありませんよね

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

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

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

  11. 44*ͱ͸ʁ 「アイデンティティ」 とは異なる Identi fi er(識別子)の役割 サービス上のエンティティと結びつける 認証情報と結びつける Veri fi

    able Credentialと結びつける 「あなたが誰か」を識別する文字列 Decentralized Identifier ෼ࢄܕ*% DID
  12. 44*ͱ͸ʁ 従来はメールアドレスとか サービスアカウントとか… とはいえ特定の管理者に 預けたくはない… かといって自分のローカルに だけ持ってても意味ない… Decentralized Identifier ෼ࢄܕ*%

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

  14. 44*ͱ͸ʁ Decentralized Identifier ෼ࢄܕ*% DID did:example:123456789abcdefghi 具体的にはこんな感じ 63*ͷεΩʔϚ ɾIUUQ ɾGUQ

    ɾMEBQ ͱ͔ͱಉ͡ %*%ϝιου Ͳͷ෼ࢄγεςϜ΍ϒϩοΫνΣʔϯ ʹΞϯΧϦϯά͍ͯ͠Δ͔ FUISCUDSJQJEJPOͳͲ ϝιου಺*% ϝιου಺Ͱ Ұҙʹܾ·Δจࣈྻ ϒϩοΫνΣʔϯͷ ΞΧ΢ϯτͱ͔
  15. 44*ͱ͸ʁ Decentralized Identifier ෼ࢄܕ*% DID DID subject Distributed Ledger Universal

    Resolver User Agent Identity Hub
  16. 44*ͱ͸ʁ Decentralized Identifier ෼ࢄܕ*% DID ϒϩοΫνΣʔϯ Ϣʔβʔ ϝιουΛ൑ఆͯ͠ DIDΛ͍͍ײ͡ʹ ඥ෇͚ΔγεςϜ

    ؅ཧΞϓϦ DIDʹඥ෇͍ͨύʔιφϧͳ ৘ใΛೖΕΔͱ͜Ζ 具体例
  17. 44*ͱ͸ʁ Verifiable Credential VC ݕূՄೳͳࢿ֨৘ใ 個人情報や資格情報などを セキュアかつマシンリーダブルな 方法で共有するための規格

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

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

    Zero Knowledge Proof 🤝成人証明書
  20. 44*ͱ͸ʁ Verifiable Credential VC ݕূՄೳͳࢿ֨৘ใ 具体的には? DIDが埋め込まれたJWTです つまり所有者でも改ざんできない!

  21. 44*ͱ͸ʁ Verifiable Credential VC ݕূՄೳͳࢿ֨৘ใ VC Wallet Verifier Issuer did:hoge:1111

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

    ①自分のDIDを送付 ④発行者のDIDを確認 ⑤検証結果 ③取得したVCを送付 ②2つのDIDを埋め込んだ VCを発行して送付       発行者から検証者に送られるのではなく 本人が所有&管理している did:hoge:1111 did:fuga:2222
  23. 44*ͱ͸ʁ Verifiable Credential VC ݕূՄೳͳࢿ֨৘ใ https://www.w3.org/TR/vc-data-model 発行者のDID 本人のDID

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

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

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

  27. PWA と組み合わせて何ができる?

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

  29. Distributed Ledger Universal Resolver Wallet App Identity Hub 18"ͱͷ૊Έ߹Θͤ Entity

    Issuer Verifier 自分で実装したもの ほぼ丸ごとツールに頼ったもの PWAで実装
  30. 18"ͱͷ૊Έ߹Θͤ Why PWA, not Native App? MetaMaskとの連携が可能 IPFSでの配信が可能 Native Appの事例は既にあった

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

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

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

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

  35. 18"ͱͷ૊Έ߹Θͤ Blockchain (Ethereum) Wallet App Entity Verifier Resolver Account DID

    ICΧʔυ NFC ੒ਓೝఆ͢Δػؔ Issuer ډञ԰ birthday adult adult
  36. 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で表示 ཱ྆ෆՄ
  37. 18"ͱͷ૊Έ߹Θͤ Blockchain (Ethereum) Wallet App Entity Verifier Resolver Account DID

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

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

    ੒ਓೝఆ͢Δػؔ Issuer ډञ԰ birthday adult adult セクション② NFCやQRをフックにVCのやり取り
  40. デモ ! それではいよいよ

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

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

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

  44. 先端技術の勘所 (私見)

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

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

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

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

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

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

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

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

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

  54. ·ͱΊ オレオレ仕様でもまず作ろう! PWA ×SSI 面白いですよ!

  55. ※地味に頑張った  ICカード作成の図 おまけ

  56. None