빠른 시작: 앱 개인 설정(HTML)

아티클
12/11/2015

[ 이 문서는 Windows 런타임 앱을 작성하는 Windows에서 8.x 및 Windows Phone 8.x 개발자를 대상으로 합니다. Windows 10용으로 개발하는 경우에는 최신 설명서를 참조하세요.]

JavaScript로 작성한 Windows 런타임 앱은 Live SDK를 사용하여 사용자 Microsoft 계정의 정보에 액세스할 수 있습니다.

앱이 실행되면 사용자는 Microsoft 계정을 사용하여 로그인한 다음 앱이 사용자 데이터에 액세스하는 데 동의해야 합니다. 사용자가 로그인하고 동의하면 앱이 사용자의 프로필 데이터에 액세스하여 환경을 개인 설정할 수 있습니다.

중요 이 빠른 시작은 과정을 보여 주기 위한 것입니다. Windows 스토어에 업로드하고 고객에게 배포할 앱에서 이 기능을 사용하려면 로그인 기능뿐 아니라 로그아웃 기능과 개인 정보 취급 방침도 포함해야 합니다. 이 빠른 시작을 완료한 후 Microsoft 계정 로그인에 대한 요구 사항을 읽고 이러한 기능을 추가하는 방법을 확인하세요.

중요 이 항목의 자습서에서는 Windows 스토어 앱에 대해 설명합니다. Windows Phone 스토어 앱에 Microsoft 서비스를 추가할 수도 있습니다.

사전 요구 사항

Windows Live 서비스 기능을 사용하는 JavaScript로 작성한 Windows 런타임 앱을 개발하기 전에 개발 컴퓨터에 필수 소프트웨어를 설치해야 합니다.

Windows 스토어 앱 개발을 위한 도구 및 SDK(아직 설치되지 않은 경우). 이러한 도구에는 Microsoft Visual Studio 및 기타 도구가 포함되어 있습니다.
Live SDK
JavaScript로 작성한 Windows 스토어 앱.

참고 이 빠른 시작에 표시된 코드는 Visual Studio의 JavaScript 프로젝트용 새 앱 템플릿에 추가됩니다.

사용자 로그인 및 데이터 액세스에 대한 동의 받기

Windows Live 서비스 기능에 액세스하는 코드를 추가합니다.

앱이 실행될 때 사용자가 Microsoft 계정으로 로그인할 수 있도록 Windows 로그인 컨트롤을 표시할 수 있습니다. 로그인한 후 사용자가 이 앱에 대해 아직 동의를 제공하지 않은 경우 앱이 사용자 프로필 정보에 액세스할 수 있도록 동의하라는 메시지가 사용자에게 표시됩니다.

앱이 실행될 때 사용자를 로그인하려면 프로젝트에서 다음을 수행합니다.

다음과 같이 Live SDK에 대한 참조를 설정합니다.
1. 솔루션 탐색기에서 참조를 마우스 오른쪽 단추로 클릭하고 **참조 추가...**를 선택합니다.
2. Windows > 확장으로 이동한 후 Live SDK 옆에 있는 확인란을 선택합니다. Live SDK가 목록에 표시되지 않는 경우 Live SDK를 다시 설치하고 이 절차를 다시 시도합니다.
3. 확인을 클릭하여 대화 상자를 끝냅니다.
Live SDK 파일에 있는 wl.js 파일에 대한 참조를 앱에 추가합니다. JavaScript 프로젝트용 새 앱 템플릿의 Default.html에 추가됩니다.

앱 기본 코드 파일의 <head> 태그와 default.js 파일의 링크 위에 다음과 같이 <script> 태그를 추가합니다.
```
<script src="///LiveSDKHTML/js/wl.js"></script>
```

default.html의 <body> 태그에 사용자를 해당 Microsoft 계정으로 로그인하고 사용자 정보로 표시를 업데이트하는 코드를 추가합니다.

참고 사용자의 컴퓨터 계정이 해당 Microsoft 계정과 연결된 경우에는 Microsoft 계정 로그인 컨트롤이 표시되지 않습니다. 이 경우 앱이 자동으로 로그인됩니다.

<body> 태그에 다음 코드를 추가합니다.

<!--This is where the user's info will be written
 after the user has signed in.-->
<label id="info"></label>

<!--This is the script code that will sign the user in
 and display their name.-->
<script>
    // Initialize the Live Connect features.
    //  This should be called from each file that 
    //  uses Live Connect features.
    WL.init();

    // Sign the user into their Microsoft account or connect 
    //  the app to the Microsoft account the user has associated 
    //  with their computer account.
    WL.login({
            scope: ["wl.signin"]
        }).then(
            function (response) {
                onLoginComplete();
            },
            function (loginError) {
                document.getElementById("info").innerText =
                   "Login Error: " + loginError.error + " - " + loginError.error_description;
            }
        );

    // If the user is signed in, then get their profile info
    function onLoginComplete() {
        WL.api({
            path: "me",
            method: "get"
        }).then(
            function (response) {
                // update the display to show the user's name
                document.getElementById("info").innerText =
                    "Hello " + response.name + "!";
            },
            function (infoError) {
                document.getElementById("info").innerText =
                    "Data Request Error: " + infoError.error.message;
            }
        );
    }
</script>

요약 및 다음 단계

이 항목에서는 Outlook.com 및 Microsoft OneDrive 등의 Microsoft 클라우드 서비스에 있는 사용자 데이터에 액세스하기 위해 앱에서 Windows Live 서비스를 사용하는 방법을 배웠습니다.

Microsoft 계정 로그인에 대한 요구 사항 및 앱에 Microsoft 서비스를 추가하는 방법을 통해 Windows Live 서비스를 사용하는 방법을 계속해서 알아보겠습니다. 여기서는 로그인/로그아웃 기능과 개인 정보 취급 방침을 추가하는 방법을 확인할 수 있습니다.

다음을 통해 공유

빠른 시작: 앱 개인 설정(HTML)

사전 요구 사항

사용자 로그인 및 데이터 액세스에 대한 동의 받기

요약 및 다음 단계

추가 리소스