몇 달 전에 저는 Live SDK를 사용하여 Windows 8에 단일 로그온 및 SkyDrive 가져오기라는 제목의 글을 블로그에 올렸습니다. 그 이후 Microsoft에서는 Windows 8 Release Preview를 공개적으로 출시했고, 그에 따라 사용자의 로그인, 계정 연결 또는 로그아웃 시작점을 노출하는 방식을 구성하는 디자인 패턴에서 몇 가지 불일치하는 점을 발견했습니다.

이러한 디자인 패턴의 불일치성을 해결하기 위해 사용자의 Microsoft 계정이 필요한 앱에 대한 지침을 마련했습니다. 이 글에서는 여러분과 함께 이러한 지침을 살펴보고 어떻게 시작해야 하는 지에 대한 코드를 보여드리겠습니다.

앱에서 Microsoft 계정으로 통합적인 인증 경험을 제공하기 위해서는 다음 세 가지 기본 시나리오를 고려해야 합니다.

  1. 사용자가 앱을 사용하려면 로그인해야 합니다.
  2. 사용자가 로그인하지 않아도 앱이 작동하지만 로그인할 경우 해당 사용자의 개인 설정 경험을 제공합니다.
  3. 앱에서 SkyDrive 또는 Hotmail과 통합하는 등의 특정 작업을 수행하려면 Microsoft 계정으로 로그인해야 합니다.

지금부터 각 시나리오를 자세히 알아보겠습니다.

사용자 로그인이 필요한 앱에 대한 지침

앱에서 Microsoft 계정을 ID 공급자로 사용하며 사용자가 로그인할 때까지 작동하지 않을 경우, 해당 앱은 시작되는 즉시 Microsoft 계정 로그인 대화 상자를 표시합니다. 피플 앱처럼 특정 사용자에 대한 정보를 생성 또는 관리하는 앱은 이 범주로 분류됩니다.

사용자가 Microsoft 계정을 사용하여 PC에 로그인하지 않았으면 앱에서 표준 로그인 대화 상자를 표시합니다.

로그인 대화 상자로그인 대화 상자입니다.

Windows 8은 단일 로그온을 지원하기 때문에 사용자가 이미 Microsoft 계정을 사용하여 PC에 로그인한 상태이면 이 대화 상자가 표시되지 않습니다.

어떤 경우든, 앱이 사용자 ID에 액세스하려면 사용자가 자신의 데이터에 대한 액세스 권한을 앱에 부여해야 합니다. 이 과정은 모든 장치 및 웹 사이트에서 후속 앱을 실행하기 위해 Windows가 기억하는 일회성 프로세스입니다.

권한 대화 상자 권한 대화 상자입니다.

앱 시작 시 이 대화 상자를 표시하려면 JavaScript의 경우 WL.login 메서드를 호출하고, C# 같은 관리 언어의 경우 Microsoft.Live.LiveAuthClient.Login 메서드를 호출하십시오.

JavaScript

WL.Event.subscribe("auth.login", onLoginComplete);

WL.init();

WL.login({

scope: ["wl.signin", "wl.skydrive"],

});

C#

public LiveConnectSession Session
{
get
{
return _session;
}
set
{
_session = value;
}
}

private async void InitAuth()
{
if (!Windows.ApplicationModel.DesignMode.DesignModeEnabled)
{
authClient = new LiveAuthClient();
LiveLoginResult authResult = await authClient.LoginAsync(new List<string>() { "wl.signin", "wl.basic", "wl.skydrive" });

if (authResult.Status == LiveConnectSessionStatus.Connected)
{
this.Session = authResult.Session;
}

}
}

Live SDK를 사용한 사용자 로그인에 대한 자세한 내용은 사용자 로그인을 참조하십시오.

사용자가 로그인하지 않아도 작동하지만 로그인할 경우 해당 사용자의 개인 설정 경험을 제공하는 앱에 대한 지침

뉴스 또는 날씨 앱 등의 일부 앱은 사용자가 앱에 로그인하지 않아도 잘 작동하지만 로그인할 경우 개인 설정 경험을 제공할 수 있습니다. 이러한 시나리오에 해당하는 앱의 경우 이 단원에서 설명하는 패턴을 따르는 것이 좋습니다. 앱에서 설정 참을 지원하고 로그인 옵션을 통해 계정 섹션을 제공해야 합니다. 이 스크린샷은 피플 앱에서 이 패턴을 사용한 것입니다.

설정에 계정 섹션이 표시된 피플 앱 설정에 계정 섹션이 표시된 피플 앱입니다.

사용자가 설정 참을 클릭하고 계정을 클릭하면 Microsoft 계정 로그인 옵션이 표시되는 사용자 상호 작용을 권장합니다.

이렇게 하려면 SettingsCommand 클래스의 Label 속성을 사용하여 이 옵션을 표시하고, 사용자가 옵션을 클릭하면 Invoked 속성을 사용하여 Microsoft 계정 로그인 옵션이 포함된 SettingsFlyout 컨트롤을 표시하십시오. SettingsFlyout 컨트롤에 대한 자세한 내용은 앱 설정에 대한 지침의 “설정 플라이아웃 생성” 단원을 참조하십시오.

Microsoft 계정을 사용한 로그인만 지원하는 앱은 다중 계정을 지원하지 않으므로 설정에 바로 로그인 옵션을 표시하면 됩니다. 다음은 설정 창에 바로 로그인 옵션을 표시하는 PhotoBucket 앱의 스크린샷입니다.

Photobucket

설정에 로그인 옵션을 표시하는 PhotoBucket 앱입니다.

Microsoft 계정 로그인이 필요한 특정 작업이 있는 앱에 대한 지침

어떤 앱은 Microsoft 계정이 없어도 작동하지만 Microsoft 계정을 사용하면 Hotmail, SkyDrive 및 Messenger와 같은 Microsoft 서비스와 통합하는 작업을 제공합니다. SkyDrive에 저장 작업을 제공하는 사용자 지정 사진 편집기를 예로 들 수 있습니다.

개발 중인 앱이 여기에 해당할 경우, Canvas 또는 앱 바를 통해 앱에서 노출한 작업을 사용자가 호출할 때 Microsoft 계정 로그인 대화 상자를 표시하는 것이 좋습니다. 이것은 클릭 이벤트 처리기의 일부로, 사용자를 로그인하게 하고 사용자가 로그인되면 작업을 수행하게 도��줍니다.

다음 예에서는 앱 바의 단추를 클릭하여 로그인을 Microsoft 계정과 통합하고 사용자의 SkyDrive 계정에 대한 액세스 권한을 요청하는 방법을 보여 줍니다.

JavaScript

function onAppBarSaveButtonClick()
{
WL.Event.subscribe("auth.login", onLoginComplete);
WL.init();

WL.login({
scope: ["wl.signin", "wl.skydrive_update"],
});
}

C#

private void AppBarSaveButton_Click(object sender, RoutedEventArgs e)
{
InitAuth();
}

private async void InitAuth()
{
if (!Windows.ApplicationModel.DesignMode.DesignModeEnabled)
{
authClient = new LiveAuthClient();
LiveLoginResult authResult = await authClient.LoginAsync(new List<string>() { "wl.signin", "wl.basic", "wl.skydrive_update" });

if (authResult.Status == LiveConnectSessionStatus.Connected)
{
// An APP level property for the session
App.Session = authResult.Session;
}

}
}

Live Connect 브랜딩 지침에서 제공하는 자산을 사용하여 앱 바의 모양을 사용자 지정할 수 있습니다.

사용자 로그아웃에 대한 지침

Windows 8에서 사용자는 Microsoft 계정을 사용하여 PC에 로그인하거나 Microsoft 계정을 로컬/도메인 계정에 연결할 수 있습니다. 이 경우 앱에서 로그아웃 옵션을 제공할 필요가 없습니다. 하지만 Microsoft 계정을 사용하여 PC에 로그인하지 않고 계정을 로컬/도메인 계정에 연결하지도 않은 사용자가 있을 수 있습니다. 이 경우 사용자가 Microsoft 계정을 사용하여 앱에 로그인하면 로그아웃 옵션을 제공해야 합니다. OnlineIdAuthenticator 클래스의 CanSignOut 속성을 검사하면 계정의 로그아웃 가능 여부를 확인하여 로그아웃 옵션을 제공할 수 있습니다.

다중 계정을 지원하는 앱의 경우 사용자가 설정 참을 호출한 후 계정 섹션 플라이아웃에 로그아웃 옵션을 배치해야 합니다. Microsoft 계정 로그인만 지원하는 앱의 경우 설정에 바로 로그아웃 옵션을 배치하십시오.

Photobucket2

로그아웃이 허용되지 않을 경우 로그인한 사용자의 이름을 표시하십시오. SettingsFlyout 컨트롤에 대한 자세한 내용은 앱 설정에 대한 지침의 “설정 플라이아웃 생성” 단원을 참조하십시오.

다음 코드 샘플에서는 Microsoft 지침에 따라 사용자를 로그아웃하는 방법을 보여 줍니다.

JavaScript

function init()
{
var onlineId = Windows.Security.Authentication.OnlineId.OnlineIdAuthenticator();

If(onlineId.canSignOut)
{
// the sign out button is disabled by default
document.getElementById("btnSignOut").style.visibility = "visible";

}
}

function onLogoutButtonClick()
{
WL.logout();
}
 
C#
LiveAuthClient liveAuthClient;
public SimpleSettingsNarrow()
{
this.InitializeComponent();
liveAuthClient = new LiveAuthClient();

Windows.Security.Authentication.OnlineId.OnlineIdAuthenticator auth = new Windows.Security.Authentication.OnlineId.OnlineIdAuthenticator();

if(auth.CanSignOut)
{
this.btnSignOut.Visibility = Windows.UI.Xaml.Visibility.Visible;
}
}

private void LogoutButton_Click(object sender, RoutedEventArgs e)
{
liveAuthClient.Logout();
}

사용자를 로그아웃하려면 WL.logout 메서드 또는 Microsoft.Live.LiveAuthClient.Logout 메서드를 호출하십시오.

경험의 법칙

이 글에서는 Windows 8 사용자들이 Microsoft의 Metro 스타일 앱에서 기대하는 방식으로 Microsoft 계정 단일 로그온을 활용하는 방법을 보여드렸습니다.

또한 앱에서 로그아웃하는 옵션을 제공하는 권장 방법도 설명했습니다. 이러한 지침 외에 두 가지 간단한 경험 법칙을 통해 이 글을 마무리하겠습니다. 다음 경험 법칙을 잘 활용하면 사용자들이 Microsoft 자체 앱에서 얻는 경험과 일치하지 않는 앱 경험을 만드는 실수를 예방할 수 있습니다.

  • 이 글에서 설명하지 않은 컨트롤 또는 대화 상자를 사용하여 로그인 또는 로그아웃 옵션을 표시하지 마십시오. Live SDK에서 제공하는 로그인 대화 상자를 사용하면 여러분의 앱이 사용자의 Microsoft 계정 자격 증명에 바로 액세스할 수 없다는 것을 사용자에게 재확인시킬 수 있습니다.
  • SettingsFlyout 컨트롤 또는 작업을 제외한 다른 위치에 Microsoft 계정 로그인 또는 로그아웃 옵션을 표시하지 마십시오. Metro 스타일 앱 사용자는 계정 관리 옵션이 설정 참에 있을 것이라 생각하기 때문에 다른 위치에 옵션을 표시할 경우 Metro 스타일과 일치하지 않고 사용자가 예상치 못한 경험으로 이어집니다.

Live SDK에 대한 자세한 내용은 설명서를 읽고 Live SDK를 다운로드할 수 있습니다. 혹시 궁금한 내용이 있으면 포럼에 의견을 올려 주시기 바랍니다.

- LCP(Live Connect Platform) 수석 프로그램 관리자, Dare Obasanjo