---
title: "콘텐츠 인증"
slug: "vpe-react-content-protection"
updated: 2026-09-17T09:08:03Z
published: 2026-09-17T09:08:03Z
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 설정
            },
          },
        ],
      }}
    />
  );
}
```