快速入门：个性化应用 (HTML)

项目
12/11/2015

[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅最新文档 ]

你的使用 JavaScript 的 Windows 运行时应用可以使用 Live SDK 访问用户的 Microsoft 帐户个人资料中的信息。

当你的应用运行时，用户必须使用其 Microsoft 帐户登录并同意你的应用访问其数据。在用户登录并同意后，你的应用便可以访问用户的个人资料数据，从而个性化该体验。

要点本快速入门仅用于演示和说明。若要在你希望上载到 Windows 应用商店并向客户分发的应用中使用此功能，你需要包括注销功能和隐私策略以及登录功能。在完成此快速入门后，请阅读 Microsoft 账户登录体要求以了解如何添加这些功能的信息。

要点本主题中的教程演示了 Windows 应用商店应用。还可以将 Microsoft 服务添加到 Windows Phone 应用商店应用。

先决条件

在开发使用 Windows Live 服务功能的使用 JavaScript 的 Windows 运行时应用之前，你需要在开发计算机上安装必要的软件。

用于开发 Windows 应用商店应用的工具和 SDK（如果尚未安装）。这些工具包括 Microsoft Visual Studio 和其他工具。
Live SDK。
使用 JavaScript 的 Windows 应用商店应用。

注意在 Visual Studio 中，已将本快速入门中显示的代码添加到 JavaScript 项目的“空白应用程序”模板。

实现用户登录并让用户同意访问其数据

添加访问 Windows Live 服务功能的代码。

当你的应用运行时，它可以显示 Windows 登录控件，以便让用户使用其 Microsoft 帐户登录。在登录后，如果用户尚未同意，则系统提示他或她同意让你的应用访问其个人资料信息。

要在应用运行时实现用户登录，请在你的项目中执行以下操作：

设置对 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>

摘要和后续步骤

在本主题中，你学习了如何开始在你的应用中使用 Windows Live 服务，以访问 Outlook.com 和 Microsoft OneDrive 等 Microsoft 云服务中的用户数据。

请在 Microsoft 帐户登录要求和如何将 Microsoft 服务添加到应用中继续了解有关使用 Windows Live 服务的详细信息，其中，你可以获得如何添加登录和注销功能以及隐私策略的信息。

快速入门：个性化应用 (HTML)

先决条件

实现用户登录并让用户同意访问其数据

摘要和后续步骤

其他资源