练习 - 将 JavaScript 应用连接到 Microsoft 365

已完成

在本练习中,你将创建一个连接到 Microsoft 365 的 JavaScript 应用。 你将使用 Microsoft 身份验证库 JavaScript 库来允许用户使用他们的 Microsoft 365 帐户登录到你的应用。 然后将使用 Microsoft Graph JavaScript SDK 显示他们的名称。

运行应用

  1. 要获取本练习中使用的初始应用代码,请选择以下选项之一:

    如果使用 Git,请通过使用 git clone 命令克隆项目:

    git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git
    

    如果不使用 Git,请在 Web 浏览器中转到 https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart。 依次选择代码按钮、下载 ZIP。 将 zip 文件提取到计算机。

  2. 在代码编辑器中打开文件夹。

  3. 打开 auth.js 文件并找到常量 msalConfig

    const msalConfig = {
        auth: { .. }
    }
    
  4. 将 属性的值 clientId 替换为之前注册的 Azure AD 应用程序中复制 的应用程序 (客户端) ID 值 (spa-aad-app) 。 可以从 Azure AD 应用程序(spa-aad-app)的概述页获取此值。

  5. 在同 一auth.js 文件中,找到 msalConfig.auth.authority 属性。 将<your directory ID here>值替换为之前注册的 Azure AD 应用程序(spa-aad-app)的目录(租户)ID值。 可以从 Azure AD 应用程序(spa-aad-app)的概述页获取此值。

    msalConfig 常量应类似于以下代码,其中唯一 ID 来自 Azure AD 租户和已注册的应用程序:

    const msalConfig = {
      auth: {
        clientId: 'b1a37248-53b5-430c-b946-ef83521af70c',
        authority: 'https://login.microsoftonline.com/b930540b-a147-45bb-8f24-bfbed091aa25',
        redirectUri: 'http://localhost:8080'
      }
    };
    
  6. 在终端中执行以下命令来预览该 Web 应用:

    npm start
    
  7. 应打开默认浏览器并指向 http://localhost:8080

  8. 选择“使用 Microsoft 登录”按钮,以使用 Microsoft 365 帐户登录。

  9. 使用帐户登录并同意应用后,应该看到应用显示用户名。

  10. 通过在终端窗口中选择 CTRL+C 来停止 Node.js 服务器。