ヘッドレスフロントエンドへのメンバーログインとデジタル配信の統合

オンラインコース、有料ニュースレター、音声プログラム、デジタルダウンロードを独自のフロントエンドで運営する場合、最も維持が困難なのは「購入者のログイン」「利用権限の確認（誰がどのユニットにアクセスできるか）」「プライベート動画/PDFの不正コピー防止署名」「デバイス間での進捗同期」です。

Kanorioはこれらの基盤機能を2つのレイヤーに集約しており、カスタマイズのニーズに合わせて選択できます。

1. Drop-in <kanorio-*> 要素 (@kanorio/elements、最速): 単一のタグやReactコンポーネントを使用し、Kanorioの組み込みパスワードレスログイン、公開カリキュラム、保護されたプレイヤーを外部サイトに直接導入します。
2. 直接的なCustomer API呼び出し (https://{your-site}/api/v1/customer/*): 独自のUIを使用して、パスワードレス認証の呼び出し、購入済みコンテンツのツリー構造の取得、600秒間有効な署名付きURLへの交換、進捗の報告を行います。

完全仕様リファレンス (SSOT):

• すべての顧客エンドポイント、パラメータ、レスポンス構造: Customer APIリファレンス
• コンポーネント属性、カスタムイベント、CSS変数: Kanorio Elementsリファレンス

オプション1: @kanorio/elements の埋め込み (推奨)

@kanorio/elements は標準的なWeb Components（あらゆるフレームワークやプレーンなHTMLと互換性あり）とReactコンポーネントを提供し、58の言語対応とライト/ダークテーマ変数を備えています:

React統合の例

import { KanorioProvider, KanorioLogin, KanorioUnit } from "@kanorio/elements";
import "@kanorio/elements/elements.css";

export function CoursePlayerPage() {
  return (
    <KanorioProvider siteUrl="https://s-k4m9x2p7q8w3.kanorio.com" locale="en" theme="auto">
      <KanorioLogin siteName="My Online Academy" />
      <KanorioUnit
        deliverable="react-masterclass"
        onProgress={(e) => console.log("Progress updated:", e)}
      />
    </KanorioProvider>
  );
}

オプション2: Customer APIによる学習インターフェースのカスタマイズ

独自のカリキュラムや学習インターフェースをゼロから設計したい場合は、ブラウザから直接（「サイト設定 › 開発者」の「許可されたオリジン」にフロントエンドドメインを追加した後）またはサーバーからCustomer APIを呼び出すことができます:

1. Bearerトークンのためのパスワードレスログイン:
   • POST /api/v1/customer/auth/challenge を呼び出し、6桁の確認コードとログインリンクを送信します。
   • 購入者がコードを入力した後、POST /api/v1/customer/auth/verify を呼び出し、購入者の sessionToken (knr_cat_*、サイトと連絡先に二重紐付け) を取得します。
2. コンテンツとチャプターツリーの取得:
   • ヘッダーに Authorization: Bearer knr_cat_... を含め、GET /api/v1/customer/deliverables を呼び出し、購入者が有効なを持つすべてのコンテンツをリストアップします。
   • GET /api/v1/customer/deliverables/{key} を呼び出し、完全なチャプターツリー、各ユニットのロック解除状態、現在の視聴進捗を取得します。
3. 600秒間有効な署名付きURLへの交換と進捗報告:
   • 購入者がユニットをクリックした際、POST /api/v1/customer/units/{id}/open を呼び出し（サーバーが利用権限を確認し、releaseAt/releaseAfterDays 条件が満たされているかチェックします）、600秒間有効なプライベートメディア署名付きURLを受け取ります。
   • 再生中、定期的に POST /api/v1/customer/progress を呼び出し、positionSeconds を報告します。サーバーはコンテンツのルールに基づいて完了を判定し、deliverables.progress.completed Webhookをトリガーします。

3つの明確な権利の境界

ヘッドレスフロントエンドを設計する際は、Kanorioがこれら3種類の権利を厳密に分離していることに注意してください:

• 顧客の利用権限 (Customer Entitlement): 特定のコンテンツやユニットを閲覧する権利。購入後、またはサイト所有者による手動割り当てによって付与されます。Customer APIおよび <kanorio-unit> を通じて確認されます。
• チーム運用 (RBAC): サイト所有者、管理者、編集者がダッシュボードや管理API (knr_pat_) にアクセスするための権限。「コースを閲覧できること」は「カリキュラムを変更できること」と決して同義ではありません。
• 外部アプリケーションのカスタムロール: 特定のロールを持つシステム（例：「支店の講師は自分の生徒のみ閲覧可能」「TAは課題の採点のみ可能」）を構築する場合、これらのアプリケーション層のロールはKanorioのプラットフォームプリミティブの範囲外です（機能マトリックスを参照）。これらは独自のバックエンドで実装し、管理APIを使用して生徒の進捗を読み取ってください。

関連ドキュメント