` HTML 要素が必要です。
例えば、次のようになります。
```
DCV first connection
```
## ステップ 2: `DCVViewer` React コンポーネントの認証、接続、レンダリングを行う
このセクションでは、ユーザー認証プロセスを完了する方法、Amazon DCV サーバーを接続する方法、`DCVViewer` React コンポーネントをレンダリングする方法を説明します。
まず、`index.js` ファイルから `React`、`ReactDOM`、および最上位の `App` コンポーネントをインポートします。
```
import React from "react";
import ReactDOM from 'react-dom';
import App from './App';
```
アプリケーションの最上位のコンテナノードをレンダリングします。
```
ReactDOM.render(
,
document.getElementById("root")
);
```
`App.js` ファイルで、ESM モジュールとしての Amazon DCV ウェブクライアント SDK、Amazon DCV ウェブ UI SDK の `DCVViewer` React コンポーネント、`React` および `Cloudscape Design Global Styles` パッケージをインポートします。
```
import React from "react";
import dcv from "dcv";
import "@cloudscape-design/global-styles/index.css";
import {DCVViewer} from "./dcv-ui/dcv-ui.js";
```
以下は、認証が成功した場合に Amazon DCV サーバーに対して認証を行い、Amazon DCV ウェブ UI SDK から `DCVViewer` React コンポーネントをレンダリングする方法の例です。
```
const LOG_LEVEL = dcv.LogLevel.INFO;
const SERVER_URL = "https://your-dcv-server-url:port/";
const BASE_URL = "/static/js/dcvjs";
let auth;
function App() {
const [authenticated, setAuthenticated] = React.useState(false);
const [sessionId, setSessionId] = React.useState('');
const [authToken, setAuthToken] = React.useState('');
const [credentials, setCredentials] = React.useState({});
const onSuccess = (_, result) => {
var { sessionId, authToken } = { ...result[0] };
console.log("Authentication successful.");
setSessionId(sessionId);
setAuthToken(authToken);
setAuthenticated(true);
setCredentials({});
}
const onPromptCredentials = (_, credentialsChallenge) => {
let requestedCredentials = {};
credentialsChallenge.requiredCredentials.forEach(challenge => requestedCredentials[challenge.name] = "");
setCredentials(requestedCredentials);
}
const authenticate = () => {
dcv.setLogLevel(LOG_LEVEL);
auth = dcv.authenticate(
SERVER_URL,
{
promptCredentials: onPromptCredentials,
error: onError,
success: onSuccess
}
);
}
const updateCredentials = (e) => {
const { name, value } = e.target;
setCredentials({
...credentials,
[name]: value
});
}
const submitCredentials = (e) => {
auth.sendCredentials(credentials);
e.preventDefault();
}
React.useEffect(() => {
if (!authenticated) {
authenticate();
}
}, [authenticated]);
const handleDisconnect = (reason) => {
console.log("Disconnected: " + reason.message + " (code: " + reason.code + ")");
auth.retry();
setAuthenticated(false);
}
return (
authenticated ?
:
);
}
const onError = (_, error) => {
console.log("Error during the authentication: " + error.message);
}
export default App;
```
`promptCredentials` 関数、`error` 関数、`success` 関数は、必須コールバック関数であり、認証プロセスで定義する必要があります。。
Amazon DCV サーバーから認証情報が要求された場合、`promptCredentials` コールバック関数に、Amazon DCV サーバーから要求された認証情報チャレンジが送られます。システム認証が使用されるように Amazon DCV サーバーが設定されている場合、ユーザー名とパスワードの形式で認証情報を提供する必要があります。
認証に失敗した場合、`error` コールバック関数に Amazon DCV サーバーからエラーオブジェクトが送られます。
認証が成功すると、`success` コールバック関数に、ユーザーが Amazon DCV サーバーに接続できる各セッションのセッション ID (`sessionId`) と認可トークン (`authToken`) が含まれるカップルの配列が送られます。上記のコードサンプルは、認証に成功すると React ステータスを更新し、`DCVViewer` コンポーネントをレンダリングします。
このコンポーネントで承認されるプロパティの詳細については、「[Amazon DCV ウェブ UI SDK のリファレンス](https://docs.aws.amazon.com/dcv/latest/websdkguide/dcv-viewer.html#DCVViewer)」を参照してください。
自己署名証明書の詳細については、「[自己署名証明書によるリダイレクトの説明](https://docs.aws.amazon.com/dcv/latest/adminguide/redirection-clarifications-with-self-signed-certs.html)」をご覧ください。
## AWS-UI から Cloudscape Design System へのアップデート
SDK バージョン 1.3.0 以降、`DCVViewer` コンポーネントを AWS-UI から進化した [Cloudscape Design](https://cloudscape.design/) にアップデートしました。
Cloudscape は AWS-UI とは異なるビジュアルテーマを使用していますが、基盤となるコードベースに変わりはありません。したがって、`DCVViewer` ベースのアプリケーションの移行は容易です。移行するには、インストールした AWS-UI 関連の NPM パッケージを関連する Cloudscape パッケージに置き換えます。
| AWS-UI パッケージ名 | Cloudscape パッケージ名 |
| --- | --- |
| @awsui/components-react | @cloudscape-design/components |
| @awsui/global-styles | @cloudscape-design/global-styles |
| @awsui/collection-hooks | @cloudscape-design/collection-hooks |
| @awsui/design-tokens | @cloudscape-design/design-tokens |
移行の詳細については、[AWS-UI GitHub ドキュメントページ](https://github.com/aws/awsui-documentation)を参照してください。