八、用户登录

Windows 应用商店应用可以为登录该应用的用户进行个性化设置；因此，使认证过程非常简单是相当重要的。Windows 8 允许用户使用 Microsoft 帐户登录其设备，从而使开发人员更容易在其应用上为用户提供单一登录体验。此外，Windows 8 还提供了一个软件开发工具包（SDK）和一组 API，允许 Windows 应用商店应用与 Microsoft 帐户进行单点登录，并与 Microsoft SkyDrive、Outlook.com 和 Windows Live Messenger 中的信息集成。在本章中，我们将了解 Live Connect API，以及如何将应用与此 API 集成，以登录用户并检索用户配置文件信息。我们将学习如何开始将应用与 Live Connect 集成，并展示一些代码，介绍 Live Connect API 可以完成的一些基本功能。

引入带电连接

应用需要验证用户身份并访问其个人资料信息的情况很多，从显示带有用户名的欢迎信息的简单目的到访问其个人资料信息并给用户个性化体验的程度。此外，您还可以通过与 Microsoft SkyDrive 等产品和服务集成，构建一个功能强大的应用，该应用允许使用文档和媒体，访问云端或 Outlook 上的文件，以使用联系人和日历。您的应用需要将身份验证与 Microsoft 帐户集成的场景可以总结如下：

  • 该应用要求用户登录才能工作，例如，联系人应用
  • 该应用可以在不需要用户登录的情况下工作，但为用户提供了更个性化的体验；例如，天气或新闻应用
  • 该应用包含某些与 SkyDrive 或 Hotmail 集成的功能，因此需要 Microsoft 帐户登录

身份验证过程以及与 Microsoft 云服务（如 Microsoft SkyDrive 和 Outlook）的集成是使用 Live Connect 实现的。Live Connect 是一组 API，允许将应用与这些兼容服务集成。这些 API 由 Live SDK 提供，Live SDK 是用于开发应用的 Microsoft 软件开发工具包之一。Live Connect API 采用开放标准，允许您专注于编码来实现功能，而不是花时间学习新概念，因为您只想实现这个新概念引入的功能。例如，您可以使用开放认证（OAuth标准）与 Facebook 的认证服务和其他社交网络 API 集成，而无需了解这些社交网络 API 级别的认证过程的内部工作原理；更重要的是，您可以使用您知道的编程语言进行调用。Live Connect 使用的开放标准包括以下内容：

  • OAuth 2.0：它是 OAuth 协议的最新版本，是一个用于验证用户凭据的开放标准。社交网络 API，包括 Live Connect，已经采用 OAuth 作为其身份验证标准。OAuth 基本上允许用户使用 Live Connect 授权 web 服务进行身份验证，而无需与应用共享其机密登录凭据。
  • 表示状态转移（REST）：它是 web 服务实现中流行的一种架构风格。在 Windows 应用商店开发中，REST 允许我们通过 Live Connect API 轻松请求用户信息。此 REST 实现支持标准 HTTP 方法，如 GET、PUT、POST 和 DELETE。
  • JSON：代表JavaScript 对象表示法，一种用于表示 web 服务中信息的轻量级数据交换格式。Live Connect 以 JSON 格式交换用户信息。例如，当函数请求用户的配置文件信息时，该信息将在包含first_name、last_name等内容的响应对象中返回。

在 Windows 8 中，用户可以使用其 Microsoft 帐户（Hotmail、Live 和 Outlook）登录其设备；因此，应用可以利用此功能提供单一登录体验。例如，Windows 8 的主要应用（如 People、Mail 和 Messaging）以及 Microsoft 网站（如 Outlook 和 Bing）都可以利用单点登录，因此用户在登录 PC 后无需登录这些应用和网站；这一过程将代表他们进行。我们开发的应用也可以通过实现 Live Connect API 中的功能实现同样的功能，这样，如果用户已经登录到设备，就可以直接在我们的应用中进行身份验证。

在开始使用 Live Connect 功能之前，有两个先决条件：

  • 向 Windows 应用商店注册应用
  • 在 Windows 应用商店仪表板中配置 Windows 应用商店应用的实时连接设置

首先，我们需要在您的 Windows 应用商店仪表板中的应用商店中注册应用，可通过以下链接访问：

https://appdev.microsoft.com/StorePortals/en-us/Home/Index

登录门店仪表板；为此，您需要 Microsoft 帐户凭据，您将看到以下屏幕：

Introducing Live Connect

这是将列出整个应用的主页。此外，这是第一次使用的用户将看到的屏幕。为了让应用开始使用 Live Connect API，必须对其进行注册并相应配置其设置。此外，对于要使用 Live Connect 的 Windows 应用商店应用，它需要有一个包标识，该标识是包名称和发布者的组合，并且将唯一标识该应用。要获得软件包标识，我们需要提交应用；这基本上是为你的应用保留一个名称，添加它的描述，并提交它进行认证。在这个级别上，我们不需要将应用提交到 Windows 应用商店进行认证；我们只需要在 Windows 应用商店开发人员帐户中输入它的名称。为此，我们将首先单击提交应用链接，这是仪表板下左侧菜单中的第一个链接，正如您在上一个屏幕截图中所注意到的。您将被引导至提交应用页面，如下图所示：

Introducing Live Connect

点击应用名称为该应用指定一个唯一的名称，该名称将仅为该应用保留；没有其他应用可以使用它。如果应用未完全提交到商店，预订将持续一年。请确保您有权使用该名称，因为该应用将在此名称下在 Windows 应用商店中列出。请注意，应用名称应与在应用清单文件中为DisplayName字段输入的名称相同。若要继续，在提供的文本框中输入一个值，然后单击保留应用名称；这个名字现在被保留了；点击保存返回应用摘要页面。现在，该应用将在仪表板上的一个波浪形框中列出，其中包含删除和编辑链接。下面的屏幕截图显示了一个创建的测试应用，作为示例：

Introducing Live Connect

接下来我们需要为应用配置直播服务。要执行此操作，请遵循给定的步骤：

  1. 如果您在仪表板页面，找到您的应用并单击编辑。您将被引导到应用摘要页面。
  2. 点击高级功能。
  3. 点击推送通知和 Live Connect 服务信息。

  4. You will be directed to the page Push notifications and Live Connect services info page and will need to follow the steps under the heading If your app uses Live Connect services, review. It includes the following steps:

    • 识别你的应用

    这包括在应用清单中定义正确的标识值。这些值是在我们保留应用名称时创建的。我们可以通过两种方式设置这些值：

    1. We could set the app's identity values by using the Store menu in Visual Studio 2012 for Windows 8. Within an open project, in the top menu, click on Project; then select Store from the menu that appears, navigate to the submenu, and click on Associate App with the Store. Follow and finish the wizard, the process is illustrated in the following screenshot:

      Introducing Live Connect

      在向导的第一步（在上一个屏幕截图中用数字 2 标记）中，将提示您使用 Microsoft 帐户登录。

    2. 或者，我们可以在应用清单文件中手动设置应用的包标识。在文本编辑器中打开应用的AppManifest.xml文件，并使用Name和Publisher值设置<identity>元素的这些属性。Windows 应用商店在您保留应用名称时创建了这些值，您可以从 Windows 应用商店仪表板中检索。以下代码显示了包含这些值的 XML 设置节点的语法：

      js <Identity Name="19474XXX.BookTestApp" Publisher="CN=F0476225-496D-4EDF-946E-46F6247D5B9A"" />

      • 验证您的服务

    此步骤涉及检索客户端机密值。Live Connect 服务使用客户端密码对来自服务器的通信进行身份验证，以保护应用的安全。将显示以下客户端密码：

    ZQMKO4G0T3ICZE1H06OfRYZ1/hVuZXn。

    请注意，如果需要，您可以随时返回页面并创建新的客户端机密。

    • Representing your app to Live Connect users

      这是配置 Live Connect services 信息的最后一步，包括指定 Live Connect services 用于提示用户访问其数据并与其交互的权限的同意对话框的设置。在此步骤中，您可以向他们提供指向您自己的服务条款和隐私政策的链接，并上传您的应用徽标以显示在“同意”对话框中。

结束了应用在 Windows 应用商店上的注册和配置过程。现在转到编码部分；我们将了解如何启用基本的登录和身份验证功能。

用户登录应用

要启动登录功能编码，我们需要参考我们应用解决方案中的 Live Connect API；为了做到这一点，我们应该首先下载并安装 Windows Live SDK（如果您尚未安装）。可通过以下链接从Live Connect 开发者中心找到并下载：

http://msdn.microsoft.com/en-us/live/ff621310.aspx

在该页面上，您还可以找到支持 Android 和 iOS 的 Live SDK 版本的下载链接。或者，您可以使用 NuGet 软件包管理器在 Visual Studio 中找到 Live SDK 并将其直接安装到您的开放式解决方案中。

要执行此操作，请在 Visual Studio 中打开应用解决方案，右键单击解决方案浏览器中的解决方案，然后单击管理 NuGet 软件包……

将出现一个对话框，在对话框右上角提供的搜索文本框中键入livesdk；软件包经理将在线搜索包括livesdk在内的所有相关匹配项。在搜索结果中，找到Live SDK并点击安装。这将安装 Live SDK 包并将其包含在参考中。

下面的屏幕截图显示了屏幕上的管理 NuGet 软件包对话框：

Signing in users to the app

接下来，我们在项目中添加对 Live Connect API 的引用。为此，请按照给定的步骤进行操作：

  1. 在解决方案浏览器中，右键点击参考，然后点击添加参考。
  2. 点击Windows扩展 SDKLive SDK。
  3. 点击添加，然后点击关闭。

一旦我们添加对 Live SDK 的引用，JavaScript 文件wl.js将添加到解决方案中。为方便起见，我建议您将此文件复制并粘贴到您的js文件夹中。然后我们添加了指向新添加的wl.js的<script>元素，因此我们可以在default.html页面中使用 Microsoft IntelliSense 来实现此 API，如下代码所示：

<script src="///LiveSDKHTML/js/wl.js"></script>

注意为src属性设置的文件路径包含///；我们使用 3 个反斜杠（/）的原因是，目录层次结构中有三个级别可以到达位于References下LiveSDKHTML下js目录中的wl.js文件。

添加对此脚本文件的引用将在其引用的 HTML 文件中启用 Microsoft IntelliSense。

此外，如果您希望在 JavaScript 级别启用 intelliSense，请将引用添加到用于调用此 API 的方法的 JavaScript 文件的顶部，如下代码所示：

/// <reference path="///LiveSDKHTML/js/wl.js" />

提示

建议您在单独的 JavaScript 文件中编写使用wl.js的代码。这将使修改和调试应用变得更容易。

让我们添加一个按钮，单击该按钮时，将提示用户登录并响应“同意”对话框。

下面的标记将添加一个 ID 为signIn的button和一个 ID 为log的div。此div将用于在屏幕上显示内容，当我们点击登录按钮时，将让我们了解正在发生的事情：

<div id="liveSDK">
  <h1>Windows Live Connect</h1>
<div>
<div>
  The authentication in this section uses the Windows Live connect.
  <br />
  Sign in to your Microsoft account by clicking on the below button:
</div>
<button id="signIn">Sign in</button><br /><br />
<div id="log"><br /></div>
</div> 
</div>

首先我们通过调用WL.init方法初始化 Live Connect API（在库中进行其他函数调用之前，应用必须在每个页面上调用此函数），然后在页面加载上订阅auth.login事件，如下代码所示：

WL.init();
WL.Event.subscribe("auth.login", function () {
  if (WL.getSession()){
    log("You are now signed in!");
  }
});

在auth.login事件的回调函数上，我们使用获取当前会话对象的WL.getSession()方法检查状态；如果存在，则用户已登录。

接下来，我们将通过单击按钮和日志功能添加登录功能：

document.querySelector("#signIn").onclick = function (e) {
  if (WL.getSession()){ 
    log("You are already signed in!");
}
  else {
    WL.login({ scope: "wl.signin" });
  }
};
//log what is happening
function log(info) {
  var message = document.createTextNode(info);
  var logDiv = document.querySelector("#log");
  logDiv.appendChild(message);
  logDiv.appendChild(document.createElement("br"));
}

点击登录按钮，首先检查是否有会话，用户是否已经登录。如果没有会话，我们尝试通过调用WL.login方法登录用户；此方法取参数scope: "wl.signin"。范围值如"wl.signin"或"wl.skydrive"用于指示如果用户同意，应用将能够访问用户数据的哪些部分。

在前面的代码行中，我们使用以下格式定义了一个作用域：scope: "wl.signin"，这是一个字符串参数。我们也可以定义多个作用域，但格式略有不同，使用字符串值数组，如以下代码行所示：

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

在初始化库时，也可以通过将其作为可选参数传递给WL.init方法来设置范围。此外，在login方法中输入的范围值将覆盖并扩展init方法中定义的范围列表。此外，当login方法未提供范围时，使用WL.init范围值。

WL.login函数应仅在响应用户操作时调用，如在我们的示例中单击按钮，因为此函数可能导致启动同意页面提示。

log函数只接受文本，并简单地将其附加到 ID 为log的div的内容中，这样我们就可以获得所发生事情的状态信息。

现在运行应用。您将看到以下屏幕截图，提示您登录；随后将显示“同意”对话框：

Signing in users to the app

按照上一屏幕截图中出现的步骤进行操作。在端，应用将显示消息：您已登录！

获取用户信息

login函数返回一个 promise 对象，该对象允许我们在成功的情况下做出正确的反应，即用户成功登录。我们的目标是获取用户的个人资料信息。因此，我们需要修改前面显示的WL.login调用，并请求额外的作用域，如wl.basic、wl.birthday和wl.emails，这将允许我们检索基本的个人资料信息，如姓名，还可以获取用户的生日和电子邮件。在登录方法的成功回调中，我们执行对WL.api函数的调用，该函数返回所需的用户配置文件信息。从技术上讲，WL.api函数对 Live Connect Representational State Transfer（REST）API 进行调用。WL.api调用的语法如下代码所示：

WL.api({
    path: "me" ,
    method: "GET"
});

在前面的代码示例中，我们传递了 me快捷方式来请求有关登录用户的信息。path 参数指定 REST API 对象的路径，本例中为对象me，包含first_name和last_name等属性；WL.api返回一个承诺对象，我们可以对其调用then()，在成功回调中，我们会请求用户的名字和姓氏，这是范围"wl.basic"提供的。代码如下所示：

WL.api({
  path: "me" , method: "GET"
  }).then(
  function (response) {
    log("First Name: " + response.first_name);
    log("Last Name: " + response.last_name);
    log("Email: " + response.emails.preferred);
    log("Birthday: " + response.birth_day + "/" + response.birth_month);
}

将前面的代码添加到登录按钮点击处理程序中WL.login调用的then方法中，完整代码如下：

document.querySelector("#signIn").onclick = function (e) {
  WL.login({
    scope: ["wl.signin", "wl.basic", "wl.birthday", "wl.emails"]
    }).then(
    function (response) {
      WL.api({
         path: "me", method: "GET"
         }).then(
         function (response) {
           log("First Name: " + response.first_name);
           log("Last Name: " + response.last_name);
           log("Emails: " + response.emails.preferred);
           log("Birthday: " + response.birth_day + "/" + response.birth_month);
           }
         );
     }
  );
};

现在运行应用，您会注意到“同意”对话框将更改，请求访问有关您的生日和电子邮件地址的信息，如以下屏幕截图所示：

Getting user info

您批准同意提示后，点击登录按钮，应用将显示请求的信息，如下图所示：

Getting user info

提示

为了遵守 Microsoft 为 Windows 应用商店应用设置的指导原则，除了设置弹出按钮控件或任务的一部分外，您不应在应用的任何位置显示 Microsoft 帐户登录或注销选项。用户希望帐户管理选项位于“设置”对话框中，更改其位置将为用户带来不一致和意外的体验。

总结

在本章中，我们介绍了 Live Connect，了解了其核心概念，并了解了我们可以使用这些 API 做什么，应用开始调用 API 需要什么设置，以及如何编写调用 API 的基本代码。

我们还介绍了如何在商店中注册应用，以及如何从 VisualStudio 中与商店通信。

然后，我们可以利用 Live Connect API 并将用户登录到应用。此外，我们还学习了如何在用户签署同意后获取会话信息。

在下一章中，我们将了解应用栏，如何为应用创建一个应用栏，以及如何向其添加菜单按钮。

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://www.moonapi.com/news/1194.html