在示例 Electron 桌面应用程序中登录用户。

您所在的位置:网站首页 wallpaper怎么隐藏桌面应用 在示例 Electron 桌面应用程序中登录用户。

在示例 Electron 桌面应用程序中登录用户。

2023-05-29 06:49| 来源: 网络整理| 查看: 265

你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站,请访问 https://docs.azure.cn。

在示例 Electron 桌面应用程序中登录用户 项目 05/23/2023

本操作指南使用示例 Electron 桌面应用程序来演示如何向桌面应用程序添加身份验证。 示例应用程序使用户能够登录和注销。示例 web 应用程序使用适用于 Node 的 Microsoft 身份验证库 (MSAL) 来处理身份验证。

本文将执行以下任务:

在 Microsoft Entra 管理中心注册桌面应用程序。

在 Microsoft Entra 管理中心创建登录和注销用户流。

将 Web 应用程序与用户流相关联。

使用自己的面向客户的 Azure Active Directory (Azure AD) 租户详细信息,更新示例 Electron 桌面应用程序。

运行并测试示例桌面应用程序。

先决条件

Node.js。

Visual Studio Code 或其他代码编辑器。

面向客户的 Azure AD 租户。 如果还没有,请注册免费试用版。

注册桌面应用

若要使应用程序能够让用户通过 Microsoft Entra 登录,必须让面向客户的 Azure Active Directory (Azure AD) 能够识别你创建的应用程序。 应用注册会在应用与 Microsoft Entra 之间建立信任关系。 注册应用程序时,Azure AD 会生成一个名为“应用程序(客户端)ID”的唯一标识符,该值用于在创建身份验证请求时标识应用。

以下步骤演示如何在 Microsoft Entra 管理中心注册应用:

登录 Microsoft Entra 管理中心。

如果你有权访问多个租户,请确保使用包含面向客户的 Azure AD 租户的目录:

在工具栏中选择“目录 + 订阅”图标。

在“门户设置 | 目录 + 订阅”页面上,找到“目录名称”列表中的面向客户的 Azure AD 目录,然后选择“切换”。

在边栏菜单中,选择“Azure Active Directory”。

选择“应用程序”,然后选择“应用注册”。

选择“+ 新建注册”。

在出现的“注册应用程序”页面中,输入应用程序的注册信息:

在“名称”部分中,输入将向应用用户显示的有意义的应用程序名称,例如“ciam-client-app”。

在“支持的帐户类型”下,选择“仅此组织目录中的帐户” 。

选择“注册”。

注册完成后,将显示应用程序的“概述”窗格。 记录要在应用程序源代码中使用的目录(租户)ID 和应用程序(客户端)ID。

若要为应用注册指定应用类型,请执行以下步骤:

在“管理”下,选择“身份验证”。

在“平台配置”页上,选择“添加平台”,然后选择“移动和桌面应用程序”选项。

对于“自定义重定向 URL”,请输入 http://localhost,然后选择“配置”。

授予 API 权限

从“应用注册”页中,选择创建的应用程序(例如 ciam-client-app)以打开其“概述”页。

在“管理”下选择“API 权限” 。

在“已配置权限”下,选择“添加权限”。

选择“Microsoft API”选项卡。

在“常用 Microsoft API”部分下,选择“Microsoft Graph”。

选择“委托的权限”选项。

在“选择权限”部分下,搜索并选择“openid”和“offline_access”权限。

选择“添加权限”按钮。

此时,你已正确分配了权限。 但是,由于租户是客户的租户,因此使用者用户本身不能同意这些权限。 若要解决此问题,作为管理员的你必须代表租户中的所有用户同意这些权限:

选择“为 授予管理员同意”,然后选择“是”。

选择“刷新”,然后验证两个范围的“状态”下是否均显示“已为 授予”。

配置可选声明

在“管理”下,选择“令牌配置”。

选择“添加可选声明”。

选择“可选的声明类型”,然后选择“ID”。

选择可选的声明 login_hint。

选择“添加”,保存所做更改。

创建用户流

按照这些步骤创建可供客户用于登录或注册应用程序的用户流。

登录 Microsoft Entra 管理中心。

如果你有权访问多个租户,请确保使用包含面向客户的 Azure AD 租户的目录:

在工具栏中选择“目录 + 订阅”图标。

在“门户设置 | 目录 + 订阅”页面上,找到“目录名称”列表中的面向客户的 Azure AD 目录,然后选择“切换”。

在边栏菜单中,选择“Azure Active Directory”。

依次选择“外部标识”和“用户流”。

选择“+ 新建用户流”。

在“创建”页上执行以下操作:

为用户流输入名称,例如 SignInSignUpSample。

在“标识提供者”列表中,选择“电子邮件帐户”。 此标识提供者使用户能够使用其电子邮件地址登录或注册。

注意

只有在设置了与额外的标识提供者的联合身份验证之后,才会在此处列出这些标识提供者。 例如,如果设置了与 Google 或 Facebook 的联合身份验证,则能够在此处选择这些额外的标识提供者。

在“电子邮件帐户”下,可以选择两个选项之一。 对于本教程,请选择“电子邮件和密码”。

电子邮件和密码:使新用户能够使用电子邮件地址作为登录名称并使用密码作为其第一重身份验证凭据进行注册和登录。

电子邮件一次性密码:使新用户能够使用电子邮件地址作为登录名称并使用电子邮件一次性密码作为其第一重身份验证凭据进行注册和登录。

注意

只有在租户级别启用电子邮件一次性密码(“所有标识提供者”>“电子邮件一次性密码”),才能在用户流级别使用此选项。

在“用户属性”下,选择要在用户注册时收集的用户属性。 选择“显示更多内容”即可选择“国家/地区”、“显示名称”和“邮政编码”的属性和声明。 选择“确定” 。 (系统仅在用户首次注册时提示输入属性。)

选择“创建” 。 此时,新的用户流将显示在“用户流”列表中。 如果需要,请刷新页面。

若要启用自助式密码重置,请使用启用自助式密码重置一文中的步骤。

将 Web 应用程序与用户流相关联

尽管许多应用程序可与用户流相关联,但单个应用程序只能与一个用户流相关联。 用户流允许为特定应用程序配置用户体验。 例如,可以配置一个要求用户使用电话号码或电子邮件地址登录或注册的用户流。

在边栏菜单中,选择“Azure Active Directory”。

依次选择“外部标识”和“用户流”。

从列表中选择之前创建的自助注册用户流,例如 SignInSignUpSample。

在“使用”下,选择“应用程序”。

选择“添加应用程序”。

从列表中选择应用程序(如 ciam-client-app),或使用搜索框查找应用程序,然后将其选中。

选择“选择”。

克隆或下载示例 Web 应用程序

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

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

如果选择下载 .zip 文件,请将示例应用文件提取到路径总长度不超过 260 个字符的文件夹。

安装项目依赖项

打开控制台窗口,切换到包含 Electron 示例应用的目录:

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

运行以下命令以安装应用依赖项:

npm install && npm update 配置示例 Web 应用

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

查找占位符:

查找 Enter_the_Application_Id_Here 并将其替换为之前注册的应用的应用程序(客户端)ID。

查找 Enter_the_Tenant_Subdomain_Here 并将其替换为目录(租户)子域。 例如,如果租户主域为 contoso.onmicrosoft.com,请使用 contoso。 如果没有租户名称,请了解如何读取租户详细信息。

运行和测试示例 Web 应用

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

在终端中,运行以下命令:

npm start

在显示的桌面窗口中,选择“登录”或“注册”按钮。 随即将打开一个浏览器窗口,提示你登录。

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

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

后续步骤

启用密码重置。

自定义默认品牌。

配置使用 Google 的登录。

浏览 Electron 桌面应用示例代码。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3