MSAL 的初始化

在初始化 MSAL Browser 之前，请先在Microsoft Entra 管理中心中注册应用程序以获取应用程序（客户端）ID。

CreatePCA 模式

MSAL.js 提供了一种 CreatePCA 模式，允许你为应用选择类型 PublicClientApplication 。 当前选项包括 Standard 和 Nestable 配置。 将来将引入更多配置。

标准配置

如果你在单页应用程序中使用 MSAL.js，请导入 msal-browser 以使用 createStandardPublicClientApplication 创建 IPublicClientApplication 实例。 此函数创建 PublicClientApplication 具有标准配置的实例。

import * as msal from "@azure/msal-browser";

const pca = msal.createStandardPublicClientApplication({
    auth: {
        clientId: "ENTER_CLIENT_ID",
        authority: "https://login.microsoftonline.com/ENTER_TENANT_ID",
    },
});

嵌套应用配置

如果你的应用是一个基于 iframe 的嵌套应用，并且将其身份验证委托给 hub SDK（该 SDK 可以是在 MetaOS 框架中运行的 SPA 或桌面应用程序），请导入 msal-browser，并使用 createNestablePublicClientApplication 创建一个 IPublicClientApplication 实例。 此函数使用 NAA 配置创建 PublicClientApplication 实例。

import * as msal from "@azure/msal-browser";

const nestablePca = msal.createNestablePublicClientApplication({
    auth: {
        clientId: "ENTER_CLIENT_ID",
        authority: "https://login.microsoftonline.com/ENTER_TENANT_ID",
    },
});

初始化 PublicClientApplication 对象

若要使用 MSAL.js，需要实例化对象 PublicClientApplication 。 你必须提供应用程序的 client id (appId)。

选项 1

实例化一个 PublicClientApplication 对象，并在之后初始化它。 该 initialize 函数是异步的，必须在调用其他 MSAL.js API 之前解析。

import { PublicClientApplication } from "@azure/msal-browser";

const msalConfig = {
    auth: {
        clientId: 'your_client_id'
    }
};

const msalInstance = new PublicClientApplication(msalConfig);
await msalInstance.initialize();

方法 2

createPublicClientApplication调用返回初始化PublicClientApplication对象的静态方法。 请注意，此函数是异步的。

import { PublicClientApplication } from "@azure/msal-browser";

const msalConfig = {
    auth: {
        clientId: 'your_client_id'
    }
};

const msalInstance = await PublicClientApplication.createPublicClientApplication(msalConfig);

（可选）配置颁发机构

默认情况下，MSAL 配置为使用 common 租户，该租户用于多租户应用程序以及允许个人帐户（非 B2C）的应用程序。

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.com/common/'
    }
};

如果你的应用受众是单租户，你必须提供包含你的租户 ID 的机构，如下所示：

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.com/{your_tenant_id}'
    }
};

如果您的应用程序使用独立的、兼容 OIDC 的颁发机构（例如 "https://login.live.com" 或 IdentityServer），则需要在 knownAuthorities 字段中提供该机构，并将 protocolMode 设置为 "OIDC"。

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.live.com',
        knownAuthorities: ["login.live.com"],
    },
    system: {
        protocolMode: "OIDC",
    }
};

（可选）配置重定向 URI

默认情况下，MSAL 会将重定向 URI 设置为其当前运行所在的页面。 如果你想在与运行 MSAL 的页面不同的页面上接收授权代码，可以在配置中进行设置：

const msalConfig = {
    auth: {
        clientId: 'your_client_id',
        authority: 'https://login.microsoftonline.com/{your_tenant_id}',
        redirectUri: 'https://contoso.com'
    }
};

任何使用的重定向 URI 都必须在门户注册中进行配置。 还可以使用 login 和 request API 为每个请求设置重定向 URI。

（可选）其他配置

MSAL 具有其他配置选项，可 在此处查看。

使用 0 个或多个可用帐户处理应用启动

以下流程图可以帮助你在有一个帐户（或多个帐户）可用于 SSO 时，避免出现不必要的身份验证提示。

选择交互类型

在浏览器中，可通过两种方式向用户显示来自应用程序的登录屏幕：

• 显示当前页中的弹出窗口
• 将浏览器窗口重定向到登录服务器

弹出窗口 API

• loginPopup
• acquireTokenPopup

弹出窗口 API 使用 ES6 Promises，当弹出窗口中的身份验证流结束并返回到指定的重定向 URI 时解决，或者如果代码中存在问题或弹出窗口被阻止，则拒绝。

RedirectUri 注意事项

使用弹出窗口 API 时， redirectUri 必须指向实现 MSAL 重定向桥的专用页面。 此页处理身份验证响应并将其传回主应用程序。

有关设置重定向页面的详细指南，请参阅 RedirectUri 注意事项。

msalInstance.loginPopup({
    redirectUri: "http://localhost:3000/redirect",
});

重定向 API

• loginRedirect
• acquireTokenRedirect

注意：如果您使用的是 msal-angular 或 msal-react，重定向的处理方式有所不同。有关更多详情，请参阅 msal-angular 重定向文档 和 msal-react 常见问题解答。

重定向 API 是异步（即返回 promise）void 函数，它们在缓存一些基本信息后重定向浏览器窗口。 如果选择使用重定向 API，请注意 必须调用 handleRedirectPromise() 才能正确处理 API。 完成此令牌交换后，可以使用以下函数执行操作：

msalInstance.handleRedirectPromise().then((tokenResponse) => {
    // Check if the tokenResponse is null
    // If the tokenResponse !== null, then you are coming back from a successful authentication redirect.
    // If the tokenResponse === null, you are not coming back from an auth redirect.
}).catch((error) => {
    // handle error, either in the library or coming back from the server
});

这也允许你在重新加载页面时检索令牌。 有关使用情况的详细信息，请参阅 onPageLoad 示例 。

不建议在单个应用程序中使用这两种交互类型。

后续步骤

你已准备好执行 登录！