` HTML 요소를 추가해야 합니다.
예제:
```
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` 콜백 함수는 Amazon DCV 서버에서 `my_dcv_user` 사용자가 연결할 수 있는 각 세션의 세션 ID(`sessionId`) 및 권한 부여 토큰(`authToken`)이 함께 포함된 배열을 수신합니다. 다음 코드 예제는 connect 함수를 직접적으로 호출하고 배열에 반환된 첫 번째 세션에 연결합니다.
**참고**
다음 코드 예제에서는 `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 서버에 연결합니다. Amazon DCV 서버에서 첫 프레임을 수신하면 `firstFrame` 콜백 메서드가 직접적으로 호출됩니다.
```
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 로그인 양식 자동 생성
`promptCredentials` 콜백 함수가 직접적으로 호출되면 `challenge` 객체가 반환됩니다. 여기에는 Amazon DCV 서버에서 요청하는 자격 증명당 하나의 객체, 즉 객체 배열에 해당하는 `requiredCredentials` 속성이 포함됩니다. 각 객체에는 요청된 자격 증명의 이름과 유형이 포함됩니다. `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));
}
```