单页应用程序:代码配置Single-page application: Code configuration

了解如何为单页应用程序 (SPA) 配置代码。Learn how to configure the code for your single-page application (SPA).

支持单页应用的 Microsoft 库Microsoft libraries supporting single-page apps

以下 Microsoft 库支持单页应用:The following Microsoft libraries support single-page apps:

语言/框架Language / framework 项目Project on
GitHubGitHub
Package 获取Getting
startedstarted
用户登录Sign in users 访问 Web APIAccess web APIs 正式发布 (GA) 或Generally available (GA) or
公共预览版1Public preview1
AngularAngular MSAL Angular v22MSAL Angular v22 msal-angularmsal-angular 库可以为用户登录请求 ID令牌。 库可以为受保护的 Web API 请求访问令牌。 公共预览版Public preview
AngularAngular MSAL Angular3MSAL Angular3 msal-angularmsal-angular 教程Tutorial 库可以为用户登录请求 ID令牌。 库可以为受保护的 Web API 请求访问令牌。 GAGA
AngularJSAngularJS MSAL AngularJS3MSAL AngularJS3 msal-angularjsmsal-angularjs 库可以为用户登录请求 ID令牌。 库可以为受保护的 Web API 请求访问令牌。 公共预览版Public preview
JavaScriptJavaScript MSAL.js v22MSAL.js v22 msal-browsermsal-browser 教程Tutorial 库可以为用户登录请求 ID令牌。 库可以为受保护的 Web API 请求访问令牌。 GAGA
JavaScriptJavaScript MSAL.js 1.03MSAL.js 1.03 msal-coremsal-core 教程Tutorial 库可以为用户登录请求 ID令牌。 库可以为受保护的 Web API 请求访问令牌。 GAGA
ReactReact MSAL React2MSAL React2 msal-reactmsal-react 库可以为用户登录请求 ID令牌。 库可以为受保护的 Web API 请求访问令牌。 公共预览版Public preview

1 Azure 预览版的补充使用条款适用于公共预览版中的库。1 Supplemental terms of use for Azure Previews apply to libraries in Public preview.

2 仅使用 PCKE 的身份验证代码流(建议)。2 Auth code flow with PCKE only (Recommended).

3隐式授权流3 Implicit grant flow only.

应用程序代码配置Application code configuration

在 MSAL 库中,应用程序注册信息在库初始化期间作为配置传递。In an MSAL library, the application registration information is passed as configuration during the library initialization.

// Configuration object constructed.
const config = {
    auth: {
        clientId: 'your_client_id'
    }
};

// create UserAgentApplication instance
const userAgentApplication = new UserAgentApplication(config);

有关可配置选项的更多信息,请参阅使用 MSAL.js 初始化应用程序For more information on the configurable options, see Initializing application with MSAL.js.

后续步骤Next steps

转到此方案中的下一篇文章:登录和注销Move on to the next article in this scenario, Sign-in and sign-out.