通过

快速入门：在示例桌面应用中登录用户

适用于： 带白色复选标记符号的绿色圆圈，指示以下内容适用于员工租户。 员工租户 绿色圆圈，带有白色复选标记符号，指示以下内容适用于外部租户。 外部租户（了解详细信息）

在本快速入门中，你将使用示例应用程序了解如何向桌面应用程序添加身份验证。 示例应用程序允许用户登录和注销，并使用Microsoft身份验证库（MSAL）来处理身份验证。

在开始之前，请使用此页面顶部的 “选择租户类型 选择器”来选择租户类型。 Microsoft Entra ID 提供两个租户配置， 即员工 和 外部配置。 员工租户配置适用于员工、内部应用和其他组织资源。 外部租户适用于面向客户的应用。

先决条件

  • 拥有有效订阅的 Azure 帐户。 如果还没有帐户，请 免费创建帐户。
  • 此 Azure 帐户必须具有管理应用程序的权限。 以下任何Microsoft Entra 角色都包含所需的权限：
    • 应用程序管理员
    • 应用程序开发人员
  • 员工租户。 可以使用默认目录或 设置新租户。
  • 在 Microsoft Entra 管理中心注册新应用， 仅为此组织目录中的帐户配置。 有关更多详细信息 ，请参阅注册应用程序 。 在应用程序 概述 页中记录以下值供以后使用：
    • 应用程序（客户端）ID
    • 目录（租户）ID

下载示例项目

注释

本教程中提供的 Electron 示例专门用于使用 MSAL 节点。 Electron 应用程序中不支持 MSAL 浏览器。 确保完成以下步骤以正确设置项目。

  • 若要克隆示例，请打开命令提示符并导航到要创建项目的位置，并输入以下命令：

    git clone https://github.com/Azure-Samples/ms-identity-javascript-nodejs-desktop.git

  • 下载 .zip 文件。 将其解压缩到名称长度少于 260 个字符的文件路径。

配置项目

在代码编辑器中，打开 ms-identity-javascript-nodejs-desktop-main/App/authConfig.js 文件。 按如下所示替换值：

Variable Description 示例
Enter_the_Cloud_Instance_Id_Here 在其中注册应用程序的 Azure 云实例 https://login.microsoftonline.com/ （包括尾部正斜杠）
Enter_the_Tenant_Info_Here 租户 ID 或主域 contoso.microsoft.com 或 aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here 已注册的应用程序的客户端 ID 00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Graph_Endpoint_Here 应用将调用的Microsoft图形 API 云实例 https://graph.microsoft.com/ （包括尾部正斜杠）

文件应如下所示：

const AAD_ENDPOINT_HOST = "https://login.microsoftonline.com/"; // include the trailing slash

const msalConfig = {
    auth: {
        clientId: "00001111-aaaa-2222-bbbb-3333cccc4444",
        authority: `${AAD_ENDPOINT_HOST}/aaaabbbb-0000-cccc-1111-dddd2222eeee`,
    },
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                 console.log(message);
             },
             piiLoggingEnabled: false,
             logLevel: LogLevel.Verbose,
        }
    }
}

const GRAPH_ENDPOINT_HOST = "https://graph.microsoft.com/"; // include the trailing slash

const protectedResources = {
     graphMe: {
         endpoint: `${GRAPH_ENDPOINT_HOST}v1.0/me`,
         scopes: ["User.Read"],
     }
};

module.exports = {
     msalConfig: msalConfig,
     protectedResources: protectedResources,
 };

运行应用程序

  1. 需要安装此示例的依赖项一次：

    cd ms-identity-javascript-nodejs-desktop-main
npm install

  2. 然后，通过命令提示符或控制台运行应用程序：

    npm start

  3. 选择 “登录 ”以启动登录过程。

    首次登录时，系统会提示你提供同意，以允许应用程序登录和访问配置文件。 成功登录后，将重定向回应用程序。

后续步骤

若要了解有关使用 MSAL Node 进行 Electron 桌面应用开发的详细信息，请参阅教程：

教程：在 Electron 桌面应用中登录用户并调用 Microsoft 图形 API

先决条件

下载示例项目

注释

本教程中提供的 Electron 示例专门用于使用 MSAL 节点。 Electron 应用程序中不支持 MSAL 浏览器。 确保完成以下步骤以正确设置项目。

若要获取桌面应用示例代码，请运行以下命令，从 GitHub 下载 .zip 文件 或克隆示例 Web 应用程序：

git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

如果选择下载 .zip 该文件，请将示例应用文件提取到路径总长度为 260 或更少字符的文件夹。

安装项目依赖项

  1. 打开控制台窗口，并更改为包含 Electron 示例应用的目录：

    cd 1-Authentication\3-sign-in-electron\App

  2. 运行以下命令以安装应用依赖项：

    npm install && npm update

配置示例 Web 应用

  1. 在代码编辑器中，打开 App\authConfig.js 文件。

  2. 查找占位符：

    1. Enter_the_Application_Id_Here 并将其替换为之前注册的应用的应用程序（客户端）ID。

    2. Enter_the_Tenant_Subdomain_Here 并将其替换为 Directory （tenant） 子域。 例如，如果租户主域为 contoso.onmicrosoft.com，请使用 contoso。 如果没有租户名称，请了解如何 阅读租户详细信息。

运行并测试示例 Web 应用

现在可以测试示例 Electron 桌面应用。 运行应用后，桌面应用窗口将自动显示：

  1. 在终端中运行以下命令：

    npm start

    登录到电子桌面应用的屏幕截图。

  2. 在显示的桌面窗口中，选择“ 登录 ”或 “注册 ”按钮。 此时会打开浏览器窗口，系统会提示你登录。

  3. 在浏览器登录页上，键入 电子邮件地址，选择“ 下一步”，键入 密码，然后选择“ 登录”。 如果没有帐户，请选择 “无帐户” ？创建一个 链接，用于启动注册流。

  4. 如果选择注册选项，请在填写电子邮件、一次性密码、新密码和更多帐户详细信息后完成整个注册流程。 你将看到类似于以下屏幕截图的页面。 如果选择登录选项，则会看到类似的页面。 该页显示令牌 ID 声明。

    电子桌面应用中查看令牌声明的屏幕截图。

相关内容