빠른 시작: 온라인 ID 공급자에 연결(HTML)

아티클
12/11/2015

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

이 항목에서는 Windows 스토어 앱을 OpenID 또는 OAuth와 같은 인터넷 인증 및 권한 부여 프로토콜을 사용하는 온라인 ID 공급자에 연결하는 방법을 보여 줍니다.

Windows 스토어 앱은 웹 인증 브로커를 사용하여 온라인 ID 공급자에 연결합니다. 앱은 AuthenticateAsync 메서드를 호출하여 온라인 ID 공급자로 요청을 보내고 앱이 액세스할 수 있는 공급자 리소스에 대해 설명하는 액세스 토큰을 다시 가져옵니다. 전체 예제를 보려면 웹 인증 브로커 샘플을 참조하세요. 웹 인증 브로커에 대한 자세한 내용은 웹 인증 브로커를 참조하세요. 참조 설명서는 Windows.Security.Authentication.Web을 참조하세요.

이 항목을 마친 후 다음 항목을 확인하세요.

사전 요구 사항

JavaScript에 대해 잘 알고 있어야 합니다.
온라인 ID 공급자의 인증 요구 사항을 잘 알고 있어야 합니다.

온라인 공급자와 앱 등록

연결하려는 온라인 ID 공급자에 앱을 등록해야 합니다. ID 공급자에서 앱을 등록하는 방법을 확인할 수 있습니다. 등록하면 온라인 공급자는 일반적으로 앱에 대한 ID를 제공합니다.

인증 요청 URI 작성

요청 URI는 앱 ID 또는 암호, 인증 완료 후 사용자에게 전송되는 리디렉션 URI 및 예상 응답 유형과 같은 기타 필수 정보가 추가된 인증 요청을 온라인 공급자에 보내는 주소로 구성됩니다. 필요한 매개 변수는 공급자에서 확인할 수 있습니다.

요청 URI는 authenticateAsync 메서드의 requestUri 매개 변수로 전송됩니다. 보안 주소여야 하며 https://로 시작되어야 합니다.

다음 예에서는 요청 URI를 작성하는 방법을 보여 줍니다.


        var startURL = "https://<providerendpoint>?client_id=<clientid>&scope=<scopes>&response_type=token"; 

        var startURI = new Windows.Foundation.Uri(startURL);

온라인 공급자에 연결

authenticateAsync 메서드를 호출하여 온라인 ID 공급자에 연결하고 액세스 토큰을 가져옵니다. 메서드는 이전 단계에서 구성된 URIrequestUri 매개 변수로 사용하고 사용자를 리디렉션할 URI를 callbackUri 매개 변수로 사용합니다.

다음 예에서는 온라인 ID 공급자에 연결하는 방법을 보여 줍니다.

authzInProgress = true; 
        Windows.Security.Authentication.Web.WebAuthenticationBroker.authenticateAsync( 
            Windows.Security.Authentication.Web.WebAuthenticationOptions.none, startURI,endURI) 
            .done(function (result) { 
                document.getElementById("AnyServiceReturnedToken").value = result.responseData; 
                document.getElementById("AnyServiceDebugArea").value += "Status returned by WebAuth broker: " + result.responseStatus + "\r\n"; 
                if (result.responseStatus === Windows.Security.Authentication.Web.WebAuthenticationStatus.errorHttp) { 
                    document.getElementById("AnyServiceDebugArea").value += "Error returned: " + result.responseErrorDetail + "\r\n"; 
                } 
                authzInProgress = false; 
            }, function (err) { 
                WinJS.log("Error returned by WebAuth broker: " + err, "Web Authentication SDK Sample", "error");         
                document.getElementById("AnyServiceDebugArea").value += " Error Message: " + err.message + "\r\n"; 
                authzInProgress = false; 
            });

SSO(Single Sign-On)로 연결

기본적으로 웹 인증 브로커는 쿠키가 유지되는 것을 허용하지 않습니다. 따라서 앱 사용자가 계속 로그인한 상태로 유지하고 있음을 표시(예: 공급자의 로그인 대화 상자에서 확인란 선택)해도 해당 공급자에 대한 리소스에 액세스할 때마다 로그인해야 합니다. SSO로 로그인하려면 온라인 ID 공급자는 웹 인증 브로커에 SSO를 사용하도록 설정해야 하며 앱은 callbackUri 매개 변수를 사용하지 않는 authenticateAsync의 오버로드를 호출해야 합니다.

SSO를 지원하려면 온라인 공급자에서 ms-app://appSID 형식의 리디렉션 URI 등록을 허용해야 합니다. 여기서 appSID는 앱의 SID입니다. 앱의 SID는 앱의 Windows 스토어 개발자 페이지에서나 getCurrentApplicationCallbackUri 메서드를 호출하여 확인할 수 있습니다.

다음 예에서는 SSO로 온라인 ID 공급자에 연결하는 방법을 보여 줍니다.

var redirectURL = Windows.Security.Authentication.Web.WebAuthenticationBroker.getCurrentApplicationCallbackUri().absoluteUri;
        var startURL = "https://<providerendpoint>?client_id=<clientid>&redirect_uri=" + encodeURIComponent(redirectURL) + "&scope=<scopes>&response_type=token"; 

        var startURI = new Windows.Foundation.Uri(startURL); 

        Windows.Security.Authentication.Web.WebAuthenticationBroker.authenticateAsync( 
            Windows.Security.Authentication.Web.WebAuthenticationOptions.none, startURI) 
            .done(function (result) { 
                if (result.responseStatus === Windows.Security.Authentication.Web.WebAuthenticationStatus.errorHttp) { 
                    document.getElementById("FacebookDebugArea").value += "Error returned: " + result.responseErrorDetail + "\r\n"; 
                } 

                // Parse out the OAuth token from result.responseData 

            }, function (err) { 
                WinJS.log("Error returned by WebAuth broker: " + err, "Web Authentication SDK Sample", "error"); 
            });

Blend에서 인증된 앱 상태 미리 보기

authenitcateUserAsync를 사용하여 런타임에 앱을 인증하는 경우 동일한 자격 증명으로 Blend for Microsoft Visual Studio 2013에서 인증된 앱 상태에 액세스할 수 있습니다. 즉, Blend를 나가지 않고도 인증된 앱 버전을 열고 모양을 변경한 다음 변경 내용을 미리 볼 수 있습니다.

Blend Device(장치) 패널의 Design Time(디자인 타임) 범주에서 **Authentication(인증)**을 선택합니다.
F5 키를 눌러 앱을 빌드 및 실행합니다.
사용자 자격 증명을 사용하여 앱에 로그인합니다.
Blend로 돌아가서 앱을 다시 로드합니다.
배포된 앱으로 돌아가서 Alt+F4를 눌러 닫습니다. 참고 한 번에 하나의 앱 패키지 ID 인스턴스만 실행할 수 있습니다. Blend의 인증된 앱 보기는 배포된 앱 버전과 동일한 패키지 ID를 사용하기 때문에 Blend에서 실행하는 동시에 백그라운드에서 앱을 실행할 수는 없습니다.
Blend로 돌아가서 작업을 계속합니다.

요약

이 항목에서는 SSO를 사용하거나 사용하지 않고 온라인 ID 공급자에 연결하는 방법을 살펴보았습니다.

Share via