` HTML 要素を、Amazon DCV ウェブクライアント SDK で Amazon DCV サーバーからコンテンツストリームを描画させる場所に追加する必要があります。
例えば、次のようになります。
```
DCV first connection
```
## ステップ 2: 最初のフレームの認証、接続、取得を行う
このセクションでは、ユーザー認証プロセスを完了する方法、Amazon DCV サーバーを接続する方法、および Amazon DCV サーバーからコンテンツの最初のフレームを受信する方法について説明します。
まず、`index.js` ファイルから Amazon DCV ウェブクライアント SDK をインポートします。以下のように ユニバーサルモジュール定義 (UMD) モジュールとしてインポートできます。
```
import "./dcvjs/dcv.js"
```
または、バージョン `1.1.0` 以降の場合、以下のように対応するパッケージから ECMAScript モジュール (ESM) としてインポートすることもできます。
```
import dcv from "./dcvjs/dcv.js"
```
認証オブジェクト、接続オブジェクト、および Amazon DCV サーバー URL の保存に使用する変数を定義します。
```
let auth,
connection,
serverUrl;
```
スクリプトのロード時に、Amazon DCV ウェブクライアント SDK のバージョンをログに記録し、ページのロード時に `main` 関数を呼び出します。
```
console.log("Using Amazon DCV Web Client SDK version " + dcv.version.versionStr);
document.addEventListener('DOMContentLoaded', main);
```
`main` 関数により、ログレベルの設定と認証プロセスの開始が実行されます。
```
function main () {
console.log("Setting log level to INFO");
dcv.setLogLevel(dcv.LogLevel.INFO);
serverUrl = "https://your-dcv-server-url:port/";
console.log("Starting authentication with", serverUrl);
auth = dcv.authenticate(
serverUrl,
{
promptCredentials: onPromptCredentials,
error: onError,
success: onSuccess
}
);
}
```
`promptCredentials` 関数、`error` 関数、`success` 関数は、必須コールバック関数であり、認証プロセスで定義する必要があります。。
Amazon DCV サーバーから認証情報が要求された場合、`promptCredentials` コールバック関数に、Amazon DCV サーバーから要求された認証情報チャレンジが送られます。システム認証が使用されるように Amazon DCV サーバーが設定されている場合、認証情報を提供する必要があります。次のコードサンプルでは、仮に、ユーザー名を `my_dcv_user` 、パスワード `my_password` にしています。
認証に失敗した場合、`error` コールバック関数に Amazon DCV サーバーからエラーオブジェクトが送られます。
認証が成功すると、`success` コールバック関数に、`my_dcv_user` ユーザーが Amazon DCV サーバーに接続できる各セッションのセッション ID (`sessionId`) と認可トークン (`authToken`) が含まれているカップルの配列が送られます。次のコードサンプルでは、接続関数を呼び出して、配列で返された最初のセッションに接続します。
**注記**
以下のコード例では、`MY_DCV_USER` を自分のユーザー名に、`MY_PASSWORD` を自分のパスワードに置き換えてください。
```
function onPromptCredentials(auth, challenge) {
// Let's check if in challege we have a username and password request
if (challengeHasField(challenge, "username") && challengeHasField(challenge, "password")) {
auth.sendCredentials({username: MY_DCV_USER, password: MY_PASSWORD})
} else {
// Challenge is requesting something else...
}
}
function challengeHasField(challenge, field) {
return challenge.requiredCredentials.some(credential => credential.name === field);
}
function onError(auth, error) {
console.log("Error during the authentication: " + error.message);
}
// We connect to the first session returned
function onSuccess(auth, result) {
let {sessionId, authToken} = {...result[0]};
connect(sessionId, authToken);
}
```
Amazon DCV サーバーに接続します。`firstFrame` コールバック関数は、Amazon DCV サーバーから最初のフレームが届いたときに呼び出されます。
```
function connect (sessionId, authToken) {
console.log(sessionId, authToken);
dcv.connect({
url: serverUrl,
sessionId: sessionId,
authToken: authToken,
divId: "dcv-display",
callbacks: {
firstFrame: () => console.log("First frame received")
}
}).then(function (conn) {
console.log("Connection established!");
connection= conn;
}).catch(function (error) {
console.log("Connection failed with error " + error.message);
});
}
```
## ボーナス: HTML ログインフォームを自動的に作成する
`challenge` オブジェクトは `promptCredentials` コールバック関数が呼び出されたときに返されます。これには、オブジェクトの配列である `requiredCredentials` という名前のプロパティが含まれています。Amazon DCV サーバーからリクエストされる認証情報 1 件につきオブジェクトは 1 つです。各オブジェクトには、リクエストされた認証情報の名前とタイプが含まれます。`challenge` オブジェクトと `requiredCredentials` オブジェクトを使用して、HTML ログインフォームを自動的に作成することができます。
次のコードサンプルでは、その実行方法を説明しています。
```
let form,
fieldSet;
function submitCredentials (e) {
var credentials = {};
fieldSet.childNodes.forEach(input => credentials[input.id] = input.value);
auth.sendCredentials(credentials);
e.preventDefault();
}
function createLoginForm () {
var submitButton = document.createElement("button");
submitButton.type = "submit";
submitButton.textContent = "Login";
form = document.createElement("form");
fieldSet = document.createElement("fieldset");
form.onsubmit = submitCredentials;
form.appendChild(fieldSet);
form.appendChild(submitButton);
document.body.appendChild(form);
}
function addInput (name) {
var type = name === "password" ? "password" : "text";
var inputField = document.createElement("input");
inputField.name = name;
inputField.id = name;
inputField.placeholder = name;
inputField.type = type;
fieldSet.appendChild(inputField);
}
function onPromptCredentials (_, credentialsChallenge) {
createLoginForm();
credentialsChallenge.requiredCredentials.forEach(challenge => addInput(challenge.name));
}
```