教程:创建 Azure 时序见解单页 Web 应用Tutorial: Create an Azure Time Series Insights single-page web app

本教程引导你完成创建自己的单页 Web 应用程序 (SPA) 以访问 Azure 时序见解数据的过程。This tutorial guides you through the process of creating your own single-page web application (SPA) to access Azure Time Series Insights data.

本教程介绍:In this tutorial, you'll learn about:

  • 应用程序设计The application design
  • 如何将应用程序注册到 Azure Active Directory (Azure AD)How to register your application with Azure Active Directory (Azure AD)
  • 如何生成、发布和测试 Web 应用程序How to build, publish, and test your web application

Note

  • 本教程的源代码在 GitHub 上提供。The source code for this tutorial is provided on GitHub.
  • 提供了时序见解客户端示例应用以演示在本教程中使用的完整应用。The Time Series Insights client sample app is hosted to show the completed app used in this tutorial.

如果没有 Azure 订阅,请注册一个试用的 Azure 订阅Sign up for a trial Azure subscription if you don't already have one.

先决条件Prerequisites

  • Visual Studio 的免费副本。A free copy of Visual Studio. 下载 2017 或 2019 Community 版本以开始使用。Download the 2017 or 2019 Community versions to get started.

  • 适用于 Visual Studio 的 IIS Express、Web 部署和 Azure 云服务核心工具组件。The IIS Express, Web Deploy, and Azure Cloud Services core tools components for Visual Studio. 通过修改 Visual Studio 安装来添加组件。Add the components by modifying your Visual Studio installation.

了解应用程序设计Understand application design

时序见解示例 SPA 是本教程中使用的设计和代码的基础。The Time Series Insights sample SPA is the basis for the design and code used in this tutorial. 代码使用时序见解 JavaScript 客户端库。The code uses the Time Series Insights JavaScript client library. 时序见解客户端库提供两个主要 API 类别的抽象:The Time Series Insights client library provides an abstraction for two main API categories:

  • 用于调用时序见解查询 API 的包装器方法:可用于通过基于 JSON 的表达式查询时序见解数据的 REST API。Wrapper methods for calling the Time Series Insights query APIs: REST APIs you can use to query for Time Series Insights data by using JSON-based expressions. 这些方法组织在库的 TsiClient.server 命名空间下。The methods are organized under the TsiClient.server namespace of the library.

  • 用于创建和填充多种图表控件的方法:可以用于在网页中可视化时序见解数据的方法。Methods for creating and populating several types of charting controls: Methods you can use to visualize Time Series Insights data in a webpage. 这些方法组织在库的 TsiClient.ux 命名空间下。The methods are organized under the TsiClient.ux namespace of the library.

本教程还会使用示例应用程序时序见解环境中的数据。This tutorial also uses data from the sample application's Time Series Insights environment. 有关时序见解示例应用程序的结构以及它如何使用时序见解客户端库的详细信息,请参阅教程探索 Azure 时序见解 JavaScript 客户端库For details about the structure of the Time Series Insights sample application and how it uses the Time Series Insights client library, see the tutorial Explore the Azure Time Series Insights JavaScript client library.

注册到 Azure ADRegister with Azure AD

Important

  • 新的“Azure Active Directory” > “应用注册” 边栏选项卡取代了旧的“Azure Active Directory” > “应用注册(旧版)” 边栏选项卡 2019 年 5 月版。The new Azure Active Directory > App registrations blade replaces the legacy Azure Active Directory > App registrations (Legacy) blade May 2019.
  • 在旧版边栏选项卡中创建或显示的应用注册将自动显示在新的边栏选项卡中。App registrations created or displayed in the legacy blade will automatically appear in the new blade.
  • 有关迁移到新的 Azure 应用注册体验的全面信息,请阅读 Azure 应用注册培训指南Azure Active Directory 快速入门For comprehensive information about migrating to the new Azure App registration experience, read the Azure App registrations training guide and Azure Active Directory Quickstart.
  1. Azure 门户中,依次选择“Azure Active Directory” > “应用注册” > “新注册” 。In the Azure portal, select Azure Active Directory > App registrations > New registration.

    Azure Active Directory 中的新应用程序注册New application registration in Azure Active Directory

    Tip

    使用新的 Azure Active Directory 应用注册面板,可通过选择“拥有的应用程序”筛选显示的应用 。The new Azure Active Directory App registration panel allows you to filter the displayed apps by selecting Owned applications.

    你的应用在注册后将在此处列出。Your app will be listed here after you register it.

  2. 为应用程序提供名称,然后选择“仅此组织目录中的帐户” ,以指定可访问 API 的“支持的帐户类型” 。Give the application a name and select Accounts in this organizational directory only to specify the Supported account types that may access the API. 选择要在用户进行身份验证后将其重定向到的有效 URI,然后选择“注册” 。Choose a valid URI to redirect users to after they authenticate, then Register.

    在 Azure Active Directory 中创建应用程序Create the application in Azure Active Directory

  3. 重要的 Azure Active Directory 应用信息显示在所列应用的“概述” 边栏选项卡中。Important Azure Active Directory app information is displayed in your listed app's Overview blade. 在“拥有的应用程序”下,选择你的应用 ,然后选择“概述” 。Select your app under Owned applications, then Overview.

    复制应用程序 IDCopy the application ID

    复制要在客户端应用程序中使用的“应用程序(客户端) ID” 。Copy your Application (client) ID to use in your client application.

  4. “身份验证” 边栏选项卡可指定重要的身份验证配置设置。The Authentication blade specifies important authentication configuration settings.

    1. “重定向 URI” 必须与身份验证请求所提供的地址相匹配:Redirect URIs must match the address supplied by the authentication request:

      • 对于本地开发环境中托管的应用,请选择“公共客户端(移动和桌面)” 。For apps hosted in a local development environment, select Public client (mobile & desktop). 确保将“默认客户端类型”设置为“是” 。Make sure to set the Default client type to yes.
      • 对于 Azure 应用服务上托管的单页应用,请选择“Web” 。For Single-Page apps hosted on Azure App Service, select Web.
    2. 检查“ID 令牌”以启用隐式授权流 。Enable the implicit grant flow by checking ID tokens.

    创建新客户端机密Create a new client secret

    单击“保存” 。Click Save.

  5. 将 Azure Active Directory 应用与 Azure 时序见解关联。Associate your Azure Active Directory app Azure TIme Series Insights. 依次选择“API 权限” > “添加权限” > “我的组织使用的 API” 。Select API permissions > Add a permission > APIs my organization uses.

    将 API 与 Azure Active Directory 应用相关联Associate an API with your Azure Active Directory app

    在搜索栏中键入 Azure Time Series Insights,然后选择 Azure Time Series InsightsType Azure Time Series Insights into the search bar then select Azure Time Series Insights.

  6. 接下来,指定你的应用所需的 API 权限类型。Next, specify the kind API permission your app requires. 默认情况下,将突出显示“委派的权限” 。By default, Delegated permissions will be highlighted. 然后,选择一种权限类型,再选择“添加权限” 。Choose a permission type then, select Add permissions.

    指定你的应用所需的 API 权限类型Specify the kind of API permission your app requires

生成并发布Build and publish

  1. 创建一个存储应用程序项目文件的目录。Create a directory to store your application project files. 然后访问以下每个 URL。Then, go to each of the following URLs. 右键单击页面右上角的“原始” 链接,然后选择“另存为” 以将文件保存在项目目录中。Right-click the Raw link in the upper-right corner of the page, and then select Save as to save the files in your project directory.

    Note

    根据浏览器,可能需要在保存文件之前将文件扩展名更改为 .html 或 .css。Depending on the browser, you might need to change the file extensions to .html or .css before you save the file.

  2. 验证是否在 Visual Studio 中安装了所需组件。Verify that the required components are installed in Visual Studio. 必须安装适用于 Visual Studio 的 IIS Express、Web 部署和 Azure 云服务核心工具组件。The IIS Express, Web Deploy, and Azure Cloud Services core tools components for Visual Studio must be installed.

    Visual Studio - 修改已安装的组件Visual Studio - Modify the installed components

    Note

    根据版本和配置设置,Visual Studio 体验可能与描述的示例略有不同。Your Visual Studio experience might vary slightly from the depicted examples depending on your version and configuration settings.

  3. 打开 Visual Studio 并登录。Open Visual Studio and sign in. 若要为 web 应用程序创建项目,请在“文件” 菜单中,选择“打开” > “网站”。To create a project for the web application, on the File menu, select Open > Web Site.

    Visual Studio - 创建新解决方案Visual Studio - Create a new solution

  4. 在“打开网站” 窗格中,选择存储 HTML 和 CSS 文件的工作目录,然后选择“打开”。In the Open Web Site pane, select the working directory where you stored the HTML and CSS files, and then select Open.

    Visual Studio - 包含“打开”和“网站”选项的“文件”菜单Visual Studio - The File menu, with the Open and Web Site options

  5. 在 Visual Studio 的“视图” 菜单中,选择“解决方案资源管理器”。In the Visual Studio View menu, select Solution Explorer. 新解决方案随即打开。Your new solution opens. 它包含一个网站项目(地球图标),其中包含 HTML 和 CSS 文件。It contains a website project (globe icon), which contains the HTML and CSS files.

    Visual Studio - 解决方案资源管理器中的新解决方案Visual Studio - The new solution in Solution Explorer

  6. 在发布应用之前,必须在 index.html 中更改配置设置。Before you publish your app, you must alter the configuration settings in index.html.

    1. 对注释 "PROD RESOURCE LINKS" 下的三行取消注释,以将依赖项从 DEVELOPMENT 切换到 PRODUCTION。Uncomment the three lines under the comment "PROD RESOURCE LINKS" to switch the dependencies from DEVELOPMENT to PRODUCTION. 注释掉注释 "DEV RESOURCE LINKS" 下的三行。Comment out the three lines under the comment "DEV RESOURCE LINKS".

      <html><head>
          <title>Time Series Insights Sample App</title>
          <meta charset="utf-8">
          <meta http-equiv="cache-control" content="no-cache" />
          <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.11/js/adal.min.js"></script>
      
          <!--bluebird for Promise polyfill to support IE in sample client-->
          <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.3.4/bluebird.min.js"></script>    
      
          <!-- PROD RESOURCE LINKS -->
          <!-- <link rel="stylesheet" type="text/css" href="./sampleStyles.css">
          <script src="https://unpkg.com/tsiclient@1.1.4/tsiclient.js"></script>
          <link rel="stylesheet" type="text/css" href="https://unpkg.com/tsiclient@1.1.4/tsiclient.css"> -->
      
          <!-- DEV RESOURCE LINKS -->
          <link rel="stylesheet" type="text/css" href="./sampleStyles.css">
          <script src="../../dist/tsiclient.js"></script>
          <link rel="stylesheet" type="text/css" href="../../dist/tsiclient.css">
      </head>
      

      依赖项应如以下示例所示进行注释:Your dependencies should be commented like the following example:

      <!-- PROD RESOURCE LINKS -->
      <link rel="stylesheet" type="text/css" href="./sampleStyles.css">
      <script src="https://unpkg.com/tsiclient@1.1.4/tsiclient.js"></script>
      <link rel="stylesheet" type="text/css" href="https://unpkg.com/tsiclient@1.1.4/tsiclient.css">
      
      <!-- DEV RESOURCE LINKS -->
      <!-- <link rel="stylesheet" type="text/css" href="./sampleStyles.css">
      <script src="../../dist/tsiclient.js"></script>
      <link rel="stylesheet" type="text/css" href="../../dist/tsiclient.css"> -->
      
    2. 若要配置应用以使用 Azure AD 应用注册 ID,请更改 clientID 值以使用注册应用程序以使用 Azure AD 时在步骤 3 中复制的应用程序 IDTo configure the app to use your Azure AD app registration ID, change the clientID value to use the Application ID you copied in step 3 when you registered the application to use Azure AD. 如果已在 Azure AD 中创建了注销 URL,请将该值设置为 postLogoutRedirectUri 值。If you've created a Logout URL in Azure AD, set that value as the postLogoutRedirectUri value.

         // START: AUTHENTICATION RELATED CODE USING ADAL.JS
       // Set up ADAL
       var authContext = new AuthenticationContext({
           clientId: '000000-000000-000000-000000',
           postLogoutRedirectUri: 'https://tsiapp.azurewebsites.net/',
           cacheLocation: 'localStorage'
       });
      

      例如:For example:

      clientId: '8884d4ca-b9e7-403a-bd8a-366d0ce0d460',
      postLogoutRedirectUri: 'https://tsispaapp.chinacloudsites.cn',
      
    3. 完成修改后,保存 index.html。When you're finished making modifications, save index.html.

  7. 在 Azure 订阅中将该 Web 应用程序作为 Azure 应用服务进行发布。Publish the web application in your Azure subscription as an Azure App Service.

    Note

    以下步骤中所示的屏幕截图中的多个选项会使用 Azure 订阅中的数据自动填充。Several options in the screenshots that are shown in the following steps are automatically populated with data from your Azure subscription. 每个窗格可能需要几秒钟才能完全加载。It might take a few seconds for each pane to load completely.

    1. 在解决方案资源管理器中,右键单击网站项目节点,然后选择“发布 Web 应用”。In Solution Explorer, right-click the website project node, and then select Publish Web App.

      Visual Studio - 选择解决方案资源管理器“发布 Web 应用”选项Visual Studio - Select the Solution Explorer Publish Web App option

    2. 选择“开始” 以开始发布应用。Select Start to begin publishing your app.

      Visual Studio - 发布配置文件窗格Visual Studio - The Publish profile pane

    3. 选择发布新的 Azure 应用服务实例或使用现有实例。Select to publish a new Azure App Service instance or use an existing one.

      选择 Azure 应用服务实例Select an Azure App Service instance

    4. 选择要用于发布应用程序的订阅。Select the subscription that you want to use to publish the application. 选择“TsiSpaApp” 项目。Select the TsiSpaApp project. 选择“确定”。 Then, select OK.

      Visual Studio - 发布配置文件应用服务窗格Visual Studio - The Publish profile App Service pane

    5. 选择“发布” 以部署 Web 应用程序。Select Publish to deploy the web application.

      Visual Studio - “发布”选项和发布日志输出Visual Studio - The Publish option and the publish log output

    6. 成功发布的日志会出现在 Visual Studio “输出” 窗格中。A successful publish log appears in the Visual Studio Output pane. 部署完成后,Visual Studio 会在浏览器选项卡中打开 Web 应用程序,提示进行登录。When deployment is finished, Visual Studio opens the web application in a browser tab and prompts for sign-in. 成功登录后,时序见解控件会使用数据进行填充。After successful sign-in, the Time Series Insights controls are populated with data.

    7. 导航到 Web 应用并登录以查看呈现的时序见解可视数据。Navigate to your web app and login to view the rendered Time Series Insights visual data.

      查看托管的 Web 应用Review the hosted web app

故障排除Troubleshoot

错误代码/条件Error code/condition 说明Description
AADSTS50011: 未为应用程序注册回复地址。AADSTS50011: No reply address is registered for the application. Azure AD 注册缺少“重定向 URI” 属性。The Azure AD registration is missing a Redirect URI property. 转到“身份验证” > “重定向 URI” 以注册 Azure AD 应用程序。Go to Authentication > Redirect URIs for your Azure AD application registration. 验证在注册应用程序以使用 Azure AD 时,可以选择在步骤 2步骤 4 中指定的重定向 URI 是否存在。Verify that the Redirect URI you had the option to specify in step 2 or step 4 when you registered the application to use Azure AD is present.
AADSTS50011:在请求中指定的回复 URL 与为以下应用程序配置的回复 URL 不匹配:'<Application ID GUID>'。AADSTS50011: The reply url specified in the request does not match the reply urls configured for the application: '<Application ID GUID>'. 生成并发布 Web 应用程序中的步骤 6.b 中指定的 postLogoutRedirectUri 必须与 Azure AD 应用程序注册中的“身份验证” > “重定向 URI” 下指定的值匹配。The postLogoutRedirectUri specified in step 6.b in Build and publish the web application must match the value specified under Authentication > Redirect URIs in your Azure AD application registration.
Web 应用程序会加载,但登录页是未设置样式的纯文本页面,背景为白色。The web application loads, but it has an unstyled, text-only sign-in page, with a white background. 验证在生成并发布 Web 应用程序步骤 6 中论述的路径是否正确。Verify that the paths discussed in step 6 in Build and publish the web application are correct. 如果 Web 应用程序找不到 .css 文件,则页面无法正确设置样式。If the web application can't find the .css files, the page won't be styled correctly.

清理资源Clean up resources

本教程创建了多个正常运行的 Azure 服务。This tutorial creates several running Azure services. 如果不打算完成此系列教程,建议删除所有资源,以免产生不必要的费用。If you don't plan to finish this tutorial series, we recommend that you delete all resources to avoid incurring unnecessary costs.

在 Azure 门户左侧菜单中:In the Azure portal left menu:

  1. 选择“资源组”,然后选择针对时序见解环境创建的资源组。 Select Resource groups, and then select the resource group you created for the Time Series Insights environment. 在页面顶部选择“删除资源组”,输入资源组的名称,然后选择“删除”。 At the top of the page, select Delete resource group, enter the name of the resource group, and then select Delete.
  2. 选择“资源组”,然后选择设备模拟解决方案加速器创建的资源组。 Select Resource groups, and then select the resource group that was created by the device simulation solution accelerator. 在页面顶部选择“删除资源组”,输入资源组的名称,然后选择“删除”。 At the top of the page, select Delete resource group, enter the name of the resource group, and then select Delete.

后续步骤Next steps

本教程介绍了以下内容:In this tutorial, you learned about:

  • 应用程序设计The application design
  • 如何将应用程序注册到 Azure ADHow to register your application with Azure AD
  • 如何生成、发布和测试 Web 应用程序How to build, publish, and test your web application

本教程集成 Azure AD,并使用已登录用户的标识来获取访问令牌。This tutorial integrates with Azure AD and uses the identity of the user who is signed in to acquire an access token. 若要了解如何使用服务或守护程序应用程序的标识访问时序见解 API,请参阅以下文章:To learn how to access the Time Series Insights API by using the identity of a service or daemon application, see this article: