빠른 시작: Windows 스토어 앱 간에 사용자 인증서 공유(HTML)

아티클
12/11/2015

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

인증서 인증은 사용자를 인증할 때 높은 수준의 신뢰를 제공합니다. 사용자 ID 및 암호 조합 이상의 보안 인증이 필요한 앱은 인증을 위해 인증서를 사용할 수 있습니다. 서비스 그룹에서 여러 개의 Windows 스토어 앱에 대해 사용자를 인증하려는 경우도 있습니다. 이 빠른 시작에서는 동일한 인증서를 사용하여 여러 개의 Windows 스토어 앱을 인증하는 방법 및 보안 웹 서비스 액세스를 위해 제공된 인증서를 사용자가 가져오는 데 편리한 코드를 제공하는 방법을 보여 줍니다.

Windows 스토어 앱은 인증서를 사용하여 웹 서비스에 인증할 수 있으며, 여러 개의 Windows 스토어 앱이 인증서 저장소의 단일 인증서를 사용하여 동일한 사용자를 인증할 수 있습니다. 저장소에 인증서가 없는 경우 앱에 코드를 추가하여 PFX 파일에서 인증서를 가져올 수 있습니다.

목표: 여러 개의 Windows 스토어 앱에서 다양한 보안 웹 서비스에 사용할 수 있는 방식으로 인증서를 사용하여 사용자를 인증합니다.

사전 요구 사항

이 빠른 시작은 샘플 목적으로만 사용되며, 로컬 컴퓨터의 Microsoft IIS(인터넷 정보 서비스)를 사용합니다. 이 빠른 시작을 실행하려면 다음이 필요합니다.

Windows 8.1
Microsoft Visual StudioMicrosoft Visual Studio
IISMicrosoft IIS(Internet Information Server)

지침

1. IIS 및 클라이언트 인증서 매핑 사용

IIS는 기본적으로 사용되지 않습니다. Windows 제어판을 통해 IIS를 사용하도록 설정할 수 있습니다.

Windows 제어판을 열고 프로그램을 선택합니다.
Windows 기능 사용/사용 안 함을 선택합니다.
인터넷 정보 서비스를 확장한 다음 World Wide Web 서비스를 확장합니다. 응용 프로그램 개발 기능을 확장하고 ASP.NET 3.5 및 ASP.NET 4.5를 선택합니다. 이러한 기능을 선택하면 인터넷 정보 서비스를 자동으로 사용할 수 있습니다.
확인을 클릭하여 변경 내용을 적용합니다.

2. 보안 웹 서비스 만들기 및 게시

이 단계에서는 보안 웹 서비스를 만들고 IIS 서버에 게시합니다.

관리자 권한으로 Visual Studio를 실행하고 시작 페이지에서 새 프로젝트를 선택합니다. IIS 서버에 웹 서비스를 게시하려면 관리자 액세스 권한이 필요합니다. 새 프로젝트 대화 상자에서 프레임워크를 .NET Framework 3.5로 변경합니다. Visual C# -> 웹 -> Visual Studio -> ASP.NET 웹 서비스 응용 프로그램을 선택합니다. 응용 프로그램 이름을 "FirstContosoBank"로 지정합니다. 확인을 클릭하여 프로젝트를 만듭니다.

Service1.asmx.cs 파일에서 기본 HelloWorld 웹 메서드를 다음 "Login" 메서드로 바꿉니다.

        [WebMethod]
        public string Login()
        {
            // Verify certificate with CA
            var cert = new System.Security.Cryptography.X509Certificates.X509Certificate2(
                this.Context.Request.ClientCertificate.Certificate);
            bool test = cert.Verify();
            return test.ToString();
        }

Service1.asmx.cs 파일을 저장합니다.
솔루션 탐색기에서 "FirstContosoBank" 앱을 마우스 오른쪽 단추로 클릭하고 게시를 선택합니다.
웹 게시 대화 상자에서 새 프로필을 만들고 이름을 "ContosoProfile"로 지정합니다. 다음을 클릭합니다.
다음 페이지에서 IIS 서버의 서버 이름을 입력하고 사이트 이름을 "Default Web Site/FirstContosoBank"로 지정합니다. 게시를 클릭하여 웹 서비스를 게시합니다.

3. 클라이언트 인증서 인증을 사용하도록 웹 서비스 구성

이 단계에서는 IIS 관리자를 사용하여 방금 게시한 웹 서비스에 클라이언트 인증서가 필요하도록 구성합니다.

IIS(인터넷 정보 서비스) 관리자를 실행합니다.
IIS 서버의 사이트를 확장합니다. 기본 웹 사이트 아래에서 새 "FirstContosoBank" 웹 서비스를 선택합니다. 작업 섹션에서 **고급 설정...**을 선택합니다.
응용 프로그램 풀을 .NET v2.0으로 설정하고 확인을 클릭합니다.
IIS(인터넷 정보 서비스) 관리자에서 IIS 서버를 선택하고 서버 인증서를 두 번 클릭합니다. 작업 섹션에서 **자체 서명된 인증서 만들기...**를 선택합니다. 인증서 이름으로 "ContosoBank"를 입력하고 확인을 클릭합니다. IIS 서버에서 사용할 새 인증서가 "<server-name>.<domain-name>" 형식으로 만들어집니다.
IIS(인터넷 정보 서비스) 관리자에서 기본 웹 사이트를 선택합니다. 작업 섹션에서 바인딩을 선택하고 **추가...**를 클릭합니다. 유형으로 "https"를 선택하고 포트를 "443"으로 설정한 다음 IIS 서버의 전체 호스트 이름("<server-name>.<domain-name>")을 입력합니다. SSL 인증서를 "ContosoBank"로 설정합니다. 확인을 클릭합니다. 사이트 바인딩 창에서 닫기를 클릭합니다.
IIS(인터넷 정보 서비스) 관리자에서 "FirstContosoBank" 웹 서비스를 선택합니다. SSL 설정을 두 번 클릭합니다. SSL 필요를 선택합니다. 클라이언트 인증서에서 필요를 선택합니다. 작업 섹션에서 적용을 클릭합니다.
웹 브라우저를 열고 다음 웹 주소를 입력하여 웹 서비스가 올바르게 구성되었는지 확인할 수 있습니다. "https://<server-name>.<domain-name>/FirstContosoBank/Service1.asmx". 예를 들어 "https://myserver.example.com/FirstContosoBank/Service1.asmx"를 입력합니다. 웹 서비스가 올바르게 구성된 경우 웹 서비스에 액세스하려면 클라이언트 인증서를 선택하라는 메시지가 표시됩니다.

이전 빠른 시작 단계를 반복하여 동일한 클라이언트 인증서로 액세스할 수 있는 웹 서비스를 여러 개 만들 수 있습니다.

4. 인증서 인증을 사용하는 Windows 스토어 앱 만들기

이제 보안 웹 서비스가 하나 이상 있으므로 인증서를 사용하여 해당 웹 서비스에 인증하는 Windows 스토어 앱을 만들 수 있습니다. HttpClient 개체를 사용하여 인증된 웹 서비스를 요청하는 경우 초기 요청에는 클라이언트 인증서가 포함되지 않습니다. 인증된 웹 서비스에서 클라이언트 인증 요청으로 응답합니다. 그러면 Windows 클라이언트가 인증서 저장소에서 사용 가능한 클라이언트 인증서를 자동으로 쿼리합니다. 사용자는 이러한 인증서 중에서 웹 서비스에 인증할 인증서를 선택할 수 있습니다. 일부 인증서는 암호로 보호되어 있으므로 인증서 암호를 입력하는 방법을 사용자에게 제공해야 합니다.

사용 가능한 클라이언트 인증서가 없으면 사용자가 인증서 저장소에 인증서를 추가 해야 합니다. 사용자가 클라이언트 인증서를 포함하는 PFX 파일을 선택하고 해당 인증서를 클라이언트 인증서 저장소로 가져올 수 있도록 하는 코드를 Windows 스토어 앱에 포함할 수 있습니다.

팁 makecert.exe를 통해 이 빠른 시작에서 사용할 PFX 파일을 만들 수 있습니다. makecert.exe 사용에 대한 자세한 내용은 MakeCert를 참조하세요.

Visual Studio를 열고 시작 페이지에서 새 프로젝트를 선택합니다. Visual C# -> Windows 스토어 -> **빈 앱(XAML)**을 선택합니다. 새 프로젝트의 이름을 "FirstContosoBankApp"으로 지정합니다. 확인을 클릭하여 새 프로젝트를 만듭니다.

default.html 파일의 기본 body 요소에 다음 HTML을 추가합니다. 이 HTML에는 가져올 PFX 파일 찾아보기 단추, 암호로 보호된 PFX 파일의 암호를 입력할 텍스트 상자, 선택한 PFX 파일 가져오기 단추, 보안 웹 서비스에 로그인 단추 및 현재 작업의 상태를 표시할 텍스트 블록이 포함되어 있습니다.

<div>
    <button id="Browse" style="width:400px;height:80px;font-size:18px">Browse for PFX file</button><br />
    PFX password <input id="PfxPassword" type="text" style="width:200px" /> (optional)<br />
    <button id="Import" style="width:400px;height:100px;font-size:20px">Import certificate (PFX file)</button><br />
    <button id="Login" style="width:400px;height:100px;font-size:20px">Login</button>
    <div id="Result" style="width:400px;height:400px;color:white" />
</div>

default.html 파일을 저장합니다.

js 폴더에 있는 default.js 파일에서 기본 app.onactivated 함수를 다음 변수와 함수로 바꿉니다. 이러한 변수는 "FirstContosoBank" 웹 서비스의 보안 "Login" 메서드에 대한 주소와 인증서 저장소로 가져올 PFX 인증서를 포함하는 전역 변수를 지정합니다. <server-name>을 IIS 서버의 정규화된 서버 이름으로 업데이트합니다.

var pfxPassword;
var pfxCert;
var requestUri = new Windows.Foundation.Uri("https://<server-name>/FirstContosoBank/Service1.asmx?op=Login");
var result;

app.onactivated = function (args) {
    if (args.detail.kind === activation.ActivationKind.launch) {

        pfxPassword = document.getElementById("PfxPassword");
        result = document.getElementById("Result");
        document.getElementById("Import").addEventListener("click", import_click, false);
        document.getElementById("Login").addEventListener("click", login_click, false);
        document.getElementById("Browse").addEventListener("click", browse_click, false);

        args.setPromise(WinJS.UI.processAll());
    }
};

default.js 파일에서 보안 웹 서비스 액세스에 필요한 메서드 및 로그인 단추에 대해 다음과 같은 클릭 처리기를 추가합니다.

function login_click() {
    makeHttpsCall();
}

function makeHttpsCall() {
    var returnMessage = "Login ";

    var response;

    try {
        var httpClient = new Windows.Web.Http.HttpClient();
        httpClient.getAsync(requestUri).then(
            function (response) {
                if (response) {
                    if (response.statusCode == Windows.Web.Http.HttpStatusCode.ok) {
                        returnMessage += "successful";
                    }
                    else {
                        returnMessage += "failed with ";
                        returnMessage += response.StatusCode;
                    }

                    result.innerHTML = returnMessage;
                }
            });

    }
    catch (ex) {
        returnMessage += "failed with ";
        returnMessage += ex.Message;
    }

    result.innerHTML = returnMessage;
}

default.js 파일에서 PFX 파일 찾아보기 단추 및 인증서 저장소로 선택한 PFX 파일 가져오기 단추에 대해 다음과 같은 클릭 처리기를 추가합니다.

    function import_click() {
        try {
            result.innerHTML += "Importing selected certificate into user certificate store....<br />";
            var certmgr = Windows.Security.Cryptography.Certificates.CertificateEnrollmentManager.userCertificateEnrollmentManager;
            certmgr.importPfxDataAsync(
                pfxCert,
                pfxPassword.text,
                Windows.Security.Cryptography.Certificates.ExportOption.exportable,
                Windows.Security.Cryptography.Certificates.KeyProtectionLevel.noConsent,
                Windows.Security.Cryptography.Certificates.InstallOptions.deleteExpired,
                "Import Pfx").then(
                    function () {
                        result.innerHTML += "Certificate import succeded<br />";
                    });
        }
        catch (ex) {
            result.innerHTML += "Certificate import failed with " + ex.Message + "<br />";
        }
    }

    function browse_click() {
        var resultMessage = "Pfx file selection ";

        var pfxFilePicker = new Windows.Storage.Pickers.FileOpenPicker();
        pfxFilePicker.fileTypeFilter.append(".pfx");
        pfxFilePicker.commitButtonText = "Open";

        try
        {
            pfxFilePicker.pickSingleFileAsync().then(
                function (pfxFile) {
                    if (pfxFile != null) {
                        Windows.Storage.FileIO.readBufferAsync(pfxFile).then(
                            function (buffer) {
                                var dataReader = Windows.Storage.Streams.DataReader.fromBuffer(buffer);
                                var bytes = new Uint8Array(buffer.length);
                                dataReader.readBytes(bytes);
                                dataReader.close();
                                pfxCert = btoa(bytes) 
                                pfxPassword.text = "";
                                resultMessage += "succeeded";
                            });
                    }
                    else {
                        resultMessage += "failed";
                    }
                });
        }
        catch (ex) {
            resultMessage += "failed with ";
            resultMessage += ex.Message;
        }

        result.innerHTML = resultMessage;
    }

default.js 파일을 저장합니다.
이제 F5 키를 눌러 Windows 스토어 앱을 실행하고 보안 웹 서비스에 로그인하거나 PFX 파일을 로컬 인증서 저장소로 가져올 수 있습니다.

이러한 단계를 따르면 동일한 사용자 인증서를 사용하여 같거나 서로 다른 보안 웹 서비스에 액세스하는 Windows 스토어 앱을 여러 개 만들 수 있습니다.

요약

이 빠른 시작에서는 클라이언트 인증서로 보호되는 웹 서비스를 만드는 방법 및 보안 웹 서비스에 액세스할 수 있는 Windows 스토어 앱을 만드는 방법을 배웠습니다.

다음을 통해 공유