メインコンテンツまでスキップ

Playground 環境で OP 対応を体験するチュートリアル

概要​

このチュートリアルでは、Content Attestation Server Playground を使用して、OP 対応に必要となる一連の手順を試験環境で確認します。
Site Profile と Content Attestation の発行・設置・検証までの流れを段階的に把握することを目的としています。

本チュートリアルでは、以下の内容を試験環境で確認できます。

  • Site Profile（SP）の発行と設置
  • Content Attestation（CA）の発行と設置
注記

本チュートリアルは本番登録不要の「試験的な OP 対応」です。

Step 1: Site Profile を Playground で発行する​

  • Content Attestation Server Playground の SP 発行 API を開きます。
  • 画面右側の Test Request を使用します。
  • Request Body の allowedOrigin に OP 対応しようとしているサイトのオリジンを含めてください。
    • 例: http://localhost:8080
    • 各プロパティについては Site Profile や Website Profile を参照してください。
    • 日英両方の Website Profile を使用する場合は、両方の allowedOrigin に OP 対応しようとしているサイトのオリジンを含めてください。
  • Send を押してください。
  • 200 OK とともに、Site Profile が返ってくることを確認してください。

Step 2: Site Profile をサイトに設置する​

  • 返ってきた JSON を sp.json として、 Web サイトの Well-known URL /.well-known/sp.json にアクセスできるように配置します。

具体例:

$ curl -i http://localhost:8080/.well-known/sp.json
HTTP/2 200
content-type: application/json

{
  "originators": [
    { "core": "eyJ...", "annotations": ["eyJ..."], "media": ["eyJ..."] }
  ],
  "sites": ["eyJ..."]
}
注記

この時点で テストビルド版 OP Inspector で Site Profile の確認が可能になります。
テストビルド版 OP Inspector の入手方法やインストール方法については Step 5 にある案内を参照してください。

また Step 1、Step 2 に関しては Site Profile の設置ドキュメント も参考にしてください。

Step 3: Content Attestation を Playground で発行する​

  • Content Attestation Server Playground の CA 発行 API を開きます。
  • 画面右側の Test Request を使用します。
  • Request Body の allowedUrl に CA を設置する URL を含めてください。
    • 例: http://localhost:8080/*
  • Request Body の target に コンテンツに合わせた Content Integrity Descriptor を設定してください。
    • 例: 
      {
        "type": "TextTargetIntegrity",
        "cssSelector": "#text-target-integrity",
        "integrity": "sha256-TL6t/lWLByyNME0lFhb6JrT3RaTF+f2md84n5YTQtx4="
      }
  • その他、credentialSubject の値をコンテンツに合わせて変更しても構いません。
  • Send を押してください。
  • 200 OK とともに、Content Attestation が返ってくることを確認してください。

Step 4: Content Attestation を設置する​

  • 返ってきた JSON をページ HTML に Content Attestation Set として追加します。
  • 以下の script タグを使用します。

具体例:

<script type="application/ca-set+json">
  ["eyJ..."]
</script>

また Step 3、Step 4 に関しては Content Attestation の設置ドキュメント も参考にしてください。

Step 5: テストビルド版 OP Inspector で確認する​

  • テストビルド版 OP Inspector をインストールする。
  • OP Inspector ガイドに従い、検証に成功していることを確認してください。