---
title: "コンテンツ認証"
slug: "vpe-react-content-protection"
updated: 2026-09-17T09:22:05Z
published: 2026-09-17T09:22:05Z
canonical: "guide.ncloud-docs.com/vpe-react-content-protection"
stale: true
---

> ## Documentation Index
> Fetch the complete documentation index at: https://guide.ncloud-docs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# コンテンツ認証

Classic/VPC環境で利用できます。

再生ソースに Secure Tokenを適用し、One Click Multi DRMを設定する方法について説明します。

## Secure Token

`token` オプションで再生ソースに Secure Tokenを適用します。

```
import { useRef } from "react";
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer, type PlayerHandle } from "@sgrsoft/vpe-react-sdk";

// 動画(MP4)
export function App() {
  const playerRef = useRef<PlayerHandle>(null);

  //トークン交換
  const handleTokenChange = () => {
    playerRef.current?.tokenChange("token=st=...~exp=...~acl=...");
  };

  return (
    <>
      <VpePlayer
        ref={playerRef}
        accessKey="YOUR_ACCESS_KEY"
        hls={Hls}
        dashjs={dashjs}
        platform="pub"
        options={{
          autostart: true,
          playlist: [
            { file: "https://CDNドメイン/example_video_01.mp4" },
          ],
          token: "token=st=...~exp=...~acl=...", // Secure Token
        }}
      />
      <button onClick={handleTokenChange}>トークン交換</button>
    </>
  );
}
```

## One Click Multi DRM

`playlist.drm` オブジェクトで Multi DRMを設定します。

              参考

              

DRM再生には、一般 `ncplayer()` ではなく、`ncplayerDRM()` 関数を使用する必要があります。この関数は非同期(async)で動作します。

```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        playlist: [
          {
            drm: {
              "com.apple.fps": {
                certificateUrl: "{Certificate URL}",
                licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
                licenseRequestHeader: {
                  "Content-type": "application/x-www-form-urlencoded",
                  "pallycon-customdata-v2": "{FairPlay Token}",
                },
                src: "{hls url}",
              },
              "com.widevine.alpha": {
                licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
                licenseRequestHeader: {
                  "pallycon-customdata-v2": "{Widevine Token}",
                },
                src: "{dash url}",
              },
              "com.microsoft.playready": {
                licenseUri: "https://license-global.pallycon.com/ri/licenseManager.do",
                licenseRequestHeader: {
                  "pallycon-customdata-v2": "{PlayReady Token}",
                },
                src: "{dash url}",
              },
            },
            poster: "https://example.com/poster.png",
          },
        ],
        autostart: false,
      }}
    />
  );
}
```

### APIエンドポイント

Video Player Enhancementサービスと One Click Multi DRMサービスを連携して DRMを適用できます。FairPlayでは、FPS Certificateとライセンス署名をそれぞれ作成する必要があります。

```
FPS Certificate Endpoint
GET https://multi-drm.apigw.ntruss.com/api/v1/license/fairplay

License Endpoint (FairPlay/Widevine/PlayReady)
POST https://multi-drm.apigw.ntruss.com/api/v1/license
```

### DRMテスト

DRMテストはデフォルトの実行スクリプトではなく、`ncplayerDRM()`で行います。

```
import Hls from "hls.js";
import dashjs from "dashjs";
import { VpePlayer } from "@sgrsoft/vpe-react-sdk";

export function App() {
  return (
    <VpePlayer
      accessKey="YOUR_ACCESS_KEY"
      hls={Hls}
      dashjs={dashjs}
      platform="pub"
      options={{
        playlist: [
          {
            drm: {
              // DRM設定
            },
          },
        ],
      }}
    />
  );
}
```