近年来，随着云服务的不断普及，越来越多的网站和应用选择微软账号作为登录方式。因此，开发者需要实现微软账户登录功能，而 npm 包 react-ms-login 可以帮助我们快速实现。
什么是 react-ms-login？
react-ms-login 是一个基于 react 的微软登录组件。它使用微软提供的 Microsoft Graph API 实现验证，支持弹出窗口和重定向两种登录方式，并提供了多种回调事件供开发者使用。
安装 react-ms-login
使用 npm 命令行工具，我们可以轻松地安装 react-ms-login：
--- ------- --------------
使用 react-ms-login
下面，我们来详细介绍如何使用 react-ms-login 实现微软账号登录功能。
引入 react-ms-login
在我们的项目中，我们需要先引入 react 和 react-ms-login：
------ ----- ---- -------- ------ ------- ---- -----------------
配置 MsLogin 组件
我们需要配置 MsLogin 组件，包括应用在 Azure Portal 中注册后获取到的客户端 ID 和秘钥、登录方式、回调事件等属性。
----- ------------- - -
--------- ----- ------ ----
------------ ----------------------------------
------- -
------------
-----------------
-----------
--
------------- --------
------- -----------------
--------- --------
---------- --------
--------- -- -- -
----------------------- ---------
--
-------------------------- ----
------------------------- ---
--其中 clientId 和 redirectUri 是必填属性。在 Azure Portal 中注册应用后，可以在“概述”页中找到客户端 ID，而重定向 URI 需要根据实际情况指定。
scopes 是一个字符串数组，用于指定请求的权限。 responseType 必须是 "token" 或 "code"。 prompt 可以是 "none"、"login"、"consent" 或 "select_account"。 language 用于设置语言，表示 UI 显示的语言环境。
loginType 是登录方式，可以是 "popup" 或 "redirect"。 callback 是一个回调函数，用于在用户成功登录后执行某些操作。authenticationPopupHeight 和 authenticationPopupWidth 分别是身份验证弹出窗口的高度和宽度。
使用 MsLogin 组件
现在，我们已经配置好 MsLogin 组件，可以在代码中直接使用。最简单的方式是：
--------
----------------------
------------------
--这会在页面上渲染出一个标识为“登录”的按钮，使用默认样式。如果要使用自定义样式，可以将 buttonTheme 属性设置为 "light" 或 "dark"。
处理登录信息
在登录成功后，我们可以通过回调函数来处理登录信息。例如，我们可以从 sessionStorage 中获取 accessToken：
--- ----------- - ----------------------------------------------
react-ms-login 示例代码
完整的 react-ms-login 示例代码如下：
------ ----- ---- --------
------ ------- ---- -----------------
----- ------------- - -
--------- ----- ------ ----
------------ ----------------------------------
------- -
------------
-----------------
-----------
--
------------- --------
------- -----------------
--------- --------
---------- --------
--------- -- -- -
----------------------- ---------
--- ----------- - ----------------------------------------------
------------------- ----- --- - - -------------
--
-------------------------- ----
------------------------- ---
--
----- --- ------- --------------- -
------ -- -
------ -
-----
--------
----------------------
------------------
--
---------- -- -------------
------
--
-
-
------ ------- ----总结
本文介绍了如何使用 npm 包 react-ms-login 实现微软账户登录功能。我们需要先安装并配置 react-ms-login 组件，然后在页面上使用它来实现登录。在登录成功后，我们可以通过回调函数来处理登录信息。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60057adf81e8991b448eb67c