Live SDK를 사용하여 Windows 8에 단일 로그온 및 SkyDrive 가져오기

Windows 8 앱 개발자 블로그

Windows 8 엔지니어링 팀에서 제공하는 Windows 8용 Metro 스타일 앱 개발의 이해

Live SDK를 사용하여 Windows 8에 단일 로그온 및 SkyDrive 가져오기

  • Comments 0

클라우드 덕분에 Windows 8 고객은 여러 장치에서 원활하게 작업할 수 있게 되었습니다. Microsoft 계정으로 PC 또는 장치에 로그인하여 SkyDrive의 무료 개인 저장소를 활용하면 앱, 설정 및 개인 파일을 언제든지 이용할 수 있습니다(자세한 내용은 SkyDrive 및 Windows 8으로 클라우드에 앱, 파일, PC 및 장치 연결 참조). 앱 개발자는 Metro 스타일 앱에서 Live SDK와 통합하여 이러한 클라우드 기능을 활용할 수 있습니다.

Live SDK는 앱에서 Microsoft 계정을 이용한 단일 로그온(SSO)을 설정하고 Consumer Preview에서 SkyDrive, Hotmail 및 Messenger의 정보에 액세스할 수 있는 컨트롤 및 API 집합을 제공합니다. 또한 비슷한 기능 집합을 제공하는 Windows Phone용 SDK가 있습니다.

Live SDK 시작하기

첫째, PC에 Windows 8 Consumer Preview, Visual Studio 11 BetaLive SDK Developer Preview를 설치합니다. 둘째, Live Connect 앱 관리 사이트를 방문하여 클라우드 서비스에 액세스하기 위한 Metro 스타일 앱을 구성합니다.

앱을 구성한 후에는 Live SDK에 대한 참조를 추가해야 합니다. Live SDK는 C#, JavaScript 및 Visual Basic에서 개발할 때 사용할 수 있습니다. 현재 Live SDK는 C++를 지원하지 않지만 C++ 앱에서 SkyDrive에 액세스하는 방법을 보여 주는 완전한 코드 샘플 SkypadCpp를 다운로드할 수 있습니다.

프로젝트에 Live SDK를 추가하려면 [프로젝트]를 마우스 오른쪽 단추로 클릭하고 [참조 추가] > [Extension SDKs](확장 SDK) > Live SDK에 대한 항목을 선택합니다.

JavaScript 앱에서는 Default.html에 다음 스크립트 참조만 추가하면 됩니다.

<script type="text/javascript" src="ms-appx:///LiveSDKHTML//js/wl.js"></script>

C#에서는 다음 참조를 추가합니다.

using Microsoft.Live;

Visual Basic에서는 import 문만 있으면 됩니다.

Imports Microsoft.Live

단일 로그온 및 간단한 로그인의 모순

앱을 Live SDK와 통합하여 얻을 수 있는 주요 이점은 Microsoft 계정을 사용하여 단일 로그온(SSO)을 설정할 수 있다는 것입니다. 앱 개발의 주요 난제 중 하나는 사용자가 새 계정으로 로그인하거나 앱 및 웹 사이트에 반복해서 로그인하는 것을 좋아하지 않는다는 것입니다. 그러나 이제는 앱에서 사용자가 누구인지 알 수 있고 사용자의 요구 사항 및 동작에 맞게 앱을 개인 설정할 수 있으므로 사용자는 앱 또는 웹 사이트에 로그인할 때 훨씬 개선된 사용자 경험을 얻을 수 있습니다. 여기서 근본적인 모순은 사용자가 사용자 경험을 대폭 개선할 수 있는 간단한 로그인의 모순이라는 작업을 잘 수행하지 않으려 한다는 점입니다.

Microsoft의 Metro 스타일 앱 및 웹 사이트는 Windows 8 사용자가 Microsoft 계정을 사용하여 PC에 로그인한다는 사실을 이용하여 이 모순을 피했습니다. People, Mail 및 Messaging 같은 Microsoft 앱과 Hotmail 같은 Microsoft 웹 사이트는 Microsoft 계정을 활용하므로 사용자가 PC에 로그인한 후 이러한 앱 또는 웹 사이트에 다시 로그인할 필요가 없습니다. 이것이 '클릭 없는 로그인 환경'으로 연결됩니다.

앱 및 웹 사이트에서도 Live SDK를 사용하여 비슷한 방법으로 Microsoft 계정을 이용한 클릭 없는 로그인 경험을 구현할 수 있습니다. 그러나 앱이 사용자 ID에 액세스할 수 있도록 사용자가 일회성 작업을 통해 앱에 권한을 부여해야 한다는 사실을 기억해 두시기 바랍니다.

이미 사용자 계정 시스템을 갖고 있는 분들은 ID 시스템을 Microsoft 계정과 연결하여 사용자를 위한 원활한 로그인 경험을 구현할 수 있습니다. Metro 스타일 앱 및 웹 사이트를 갖고 있다면 금상첨화입니다. 사용자가 Microsoft 계정으로 PC에 로그인한 상태라면 여러분의 앱 또는 웹 사이트에 연결할 때 다시 로그인할 필요가 없기 때문입니다.

개발자가 웹 앱 또는 Windows 8 앱을 개발할 때 같은 코드를 작성하도록 하는 것이 Live SDK의 원칙입니다. 즉, 사용자 로그인 및 프로필 정보 액세스에 사용되는 JavaScript 코드가 Metro 스타일 앱에서 JavaScript로 작성된 코드 및 Live SDK를 사용하는 웹 사이트의 코드와 같다는 의미입니다. 다음 코드 조각은 최소의 수정 작업만으로 웹 또는 Metro 스타일 앱에서 실행됩니다. 웹 코드와 Metro 스타일 앱 코드의 차이점은 WL.init를 호출하려면 웹 및 Windows 8에서 클라이언트 ID를 지정해야 한다는 것입니다. 이 값은 운영 체제에서 제공하는 앱의 현재 식별자에서 가져옵니다.

WL.init();
WL.getLoginStatus().then(function (response) {
onSessionChange(response);
});

function onSessionChange(response) {
var session = WL.getSession();
if (!session) {
WL.Event.subscribe("auth.login", onLoginComplete);
WL.ui({
name: "signin",
element: "signinbutton",
scope: ["wl.signin", "wl.skydrive"],
});
}
else {
greetUser();
}
}

function onLoginComplete() {
var session = WL.getSession();
if (!session.error) {
greetUser();
}
};

function greetUser() {
WL.api({
path: "/me",
method: "get"
}
).then(
function (result) {
document.getElementById("meName").innerText = "Welcome, " + result.name;
getUserPicture ();
});;
};

function getUserPicture() {
var session = WL.getSession();
var LiveConnectAPIUrl = "https://apis.live.net/v5.0";
document.getElementById("meImg").src = LiveConnectAPIUrl +
"/me/picture?return_ssl_resources=true&access_token=" + session.access_token;
document.getElementById("meImg").style.visibility = "visible";
};
;

이 코드 샘플은 사용자가 현재 Microsoft 계정으로 로그인했는지 여부를 확인하여 사용자에게 메시지를 보냅니다. 이 코드는 Windows 8에서는 사용자가 PC에 로그인했는지 여부를 확인하고, 웹에서는 사용자가 Hotmail이나 SkyDrive처럼 Microsoft 계정을 지원하는 웹 사이트에 로그인했는지 여부를 확인합니다. 사용자가 로그인하지 않은 경우 앱이 PC 또는 웹 사이트에 로그인하고(WL.signin) SkyDrive를 읽을 수 있는 액세스(WL.skydrive) 권한을 요청하는 단추가 표시됩니다. 사용자가 이 단추를 클릭하면 Microsoft 계정으로 PC에 로그인하지 않은 사용자의 경우 로그인을 요청하는 메시지가 표시됩니다. 사용자는 로그인 후 앱이 개인 정보에 액세스하는 것에 동의해야 합니다. 정보 확인이 완료되면 greetUser()getUserPicture() 메서드는 앱이 사용자 이름에 액세스하여 그림을 표시하도록 허용합니다.

여러분도 보셨다시피 Live SDK와 통합하면 사용자 계정 시스템이 없는 앱을 Microsoft 계정과 간단하고 원활하게 통합할 수 있습니다. 또한 고유한 ID 시스템이 있는 앱은 사용자의 Microsoft 계정 정보를 사용하여 간단하게 로그인 프로세스를 부트스트랩할 수 있습니다.

SkyDrive 및 Hotmail을 사용하여 앱에 개인 클라우드 가져오기

Windows 8에서 사용자는 SkyDrive 및 People Metro 스타일 앱을 사용하여 SkyDrive의 파일 또는 Hotmail 연락처를 이용할 수 있습니다. 두 앱 모두 데이터 공급자가 느슨하게 결합된 방법으로 다른 Metro 스타일 앱과 통합할 수 있습니다.

SkyDrive Metro 스타일 앱은 파일 선택기의 공급자 역할을 합니다. 다시 말해 파일 선택기를 사용하는 모든 앱은 SkyDrive Metro 스타일 앱이 설치된 경우 파일을 저장하거나 여는 위치로 SkyDrive를 사용한다는 의미입니다. 이와 비슷하게 People 앱은 계약 선택기 공급자로서 하나 이상의 사용자 계약을 선택해야 하는 앱의 소스 역할을 합니다.

선택기를 통해 데이터를 얻는 것은 클라우드의 사용자 데이터에 액세스하는 방법이며, 앱에서 클라우드 데이터를 완전하게 통합할 필요가 없습니다. 앱이 사용자의 SkyDrive에 있는 특정 유형의 모든 파일에 대해 사용자 지정 경험을 제공할 경우 Live SDK와 통합해야 합니다.

Live SDK JavaScript 코드가 JavaScript로 작성된 웹 사이트 또는 Windows Metro 스타일 앱에서 실행되는 것과 마찬가지로, Windows Phone과 Windows 8 모두를 대상으로 하는 XAML로 작성된 앱에도 같은 규칙이 적용됩니다. 다음 코드 조각은 별다른 수정 작업을 거치지 않아도 두 플랫폼에서 거의 대부분 작동하며 다음과 같은 두 가지 주요 차이점이 있습니다. 첫째, JavaScript 코드 샘플에서는 개발자가 Windows Phone 버전의 코드로 클라이언트 ID를 지정해야 하지만 Windows 8에서는 자동으로 결정됩니다. 둘째, Windows Phone에 비동기 메서드를 만들려면 Windows Phone에서 Visual Studio Async CTP를 사용해야 합니다.

XAML의 로그인 단추

<Controls:SignInButton x:Name="btnSignIn" Content="SignInButton" HorizontalAlignment="Right"
Height="46" Margin="-1,0,6,0" Width="157" Scopes="wl.signin wl.skydrive"
SessionChanged="btnSignIn_SessionChanged" Visibility="Collapsed" />

C# 코드 숨김

private void btnSignIn_SessionChanged(object sender, 
Microsoft.Live.Controls.LiveConnectSessionChangedEventArgs e)
{
if (e.Status == LiveConnectSessionStatus.Connected)
{
App.Session = e.Session;
LoadPhotos();
}else
{
btnSignIn.Visibility = Windows.UI.Xaml.Visibility.Visible;
}

}

internal async void LoadPhotos ()
{
LiveConnectClient client = new LiveConnectClient(App.Session);
LiveOperationResult albumOperationResult = await client.Get("me/albums");
dynamic albumResult = albumOperationResult.Result;
foreach (dynamic album in albumResult.data)
{
var group = new SkyDriveAlbum(album.id, album.name, album.name, @"ms-
appx:///Assets/DarkGray.png"
, album.description);
LiveOperationResult pictureOperationResult = await client.Get(album.id + "/files");
dynamic pictureResult = pictureOperationResult.Result;
foreach (dynamic picture in pictureResult.data)
{
var pictureItem = new SkyDriveFileItem(picture.id, picture.name,
picture.name, picture.source, picture.description, picture.description, group);
group.Items.Add(pictureItem);
}
this.ItemGroups.Add(group);
}

}

이 코드 조각은 로그인 단추를 생성하며, 사용자가 앱이 데이터에 액세스할 수 있는 권한을 부여할 경우 앱은 SkyDrive에서 사용자의 사진 앨범에 대한 메타데이터를 검색합니다. 비슷한 코드를 작성하여 사용자의 Hotmail 연락처 및 캘린더에 액세스할 수 있습니다.

코드 샘플

GitHub의 Live SDK 샘플 리포지토리에서 이 블로그에 대한 완전한 코드를 다운로드할 수 있습니다. 이 코드 샘플 리포지토리에는 기타 다양한 플랫폼에서 Live SDK와 통합하는 코드 샘플도 포함되어 있습니다.

다음 단계

Metro 스타일 앱이라는 Microsoft 고유의 기술을 통해 앱이 Live SDK를 사용하여 클라우드와 원활하게 통합하는 방법을 보여 드렸습니다. 여러분의 앱을 Live SDK와 통합할 수 있는 무궁무진한 가능성이 열려 있습니다. 개발자는 앱의 로그인 및 로그인 경험을 개선할 수 있을 뿐만 아니라 다음 작업도 가능합니다.

  • SkyDrive의 무료 저장소를 활용하여 앱에 생성된 사용자의 콘텐츠를 저장하거나 액세스할 수 있습니다.
  • 사용자를 여러분의 앱 또는 웹 사이트로 유인할 만한 이벤트를 사용자의 캘린더에 추가하여 고객 관계를 계속 유지할 수 있습니다.
  • 여러분의 앱을 사용하는 사용자의 Hotmail 연락처를 찾을 수 있습니다.
  • Windows Live Messenger 네트워크를 이용하는 실시간 공유 경험을 구축할 수 있습니다.

Live SDK에 대한 자세한 내용은 설명서를 읽고 Live SDK를 다운로드하여 얻을 수 있으며, 궁금한 내용이 있으면 포럼에 올려 주십시오.

- Live Connect 플랫폼 수석 프로그램 관리자, Dare Obasanjo

  • Loading...
Leave a Comment
  • Please add 4 and 2 and type the answer here:
  • Post