快速入门：在 JavaScript SPA 中登录用户并获得访问令牌

在本快速入门中，你将下载并运行一个代码示例，该示例演示 JavaScript 单页应用程序 (SPA) 如何让用户登录并调用 Microsoft Graph。 此代码示例还演示如何获取访问令牌来调用 Microsoft Graph API 或任何 Web API。

有关说明，请参阅示例工作原理。

先决条件

• 具有活动订阅的 Azure 帐户。 创建帐户。
• Node.js
• Visual Studio Code（用于编辑项目文件）

步骤 2：下载项目

 // Config object to be passed to Msal on creation
 const msalConfig = {
   auth: {
     clientId: "Enter_the_Application_Id_Here",
     authority: "Enter_the_Cloud_Instance_Id_Here/Enter_the_Tenant_Info_Here",
     redirectUri: "Enter_the_Redirect_Uri_Here",
   },
   cache: {
     cacheLocation: "sessionStorage", // This configures where your cache will be stored
     storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
   }
 };

  // Add here the endpoints for MS Graph API services you would like to use.
  const graphConfig = {
    graphMeEndpoint: "Enter_the_Graph_Endpoint_Here/v1.0/me",
    graphMailEndpoint: "Enter_the_Graph_Endpoint_Here/v1.0/me/messages"
  };

  // Add here scopes for access token to be used at MS Graph API endpoints.
  const tokenRequest = {
      scopes: ["Mail.Read"]
  };

使用 Node.js 在 Web 服务器中运行项目：

1. 若要启动服务器，请从项目目录运行以下命令：

   npm install
   npm start
   

2. 打开 Web 浏览器并转到 http://localhost:3000/。

3. 选择“登录”开始登录，然后调用 Microsoft Graph API。

在浏览器加载应用程序后，选择“登录”。 首次登录时，系统会提示你同意允许应用程序访问你的个人资料并登录。 成功登录后，你的用户个人资料信息应会显示在页面上。

详细信息

示例工作原理

msal.js

MSAL 库会将登录用户，并请求用于访问受 Microsoft 标识平台保护的 API 的令牌。 快速入门 index.html 文件包含对该库的引用：

<script type="text/javascript" src="https://alcdn.msftauth.net/lib/1.2.1/js/msal.js" integrity="sha384-9TV1245fz+BaI+VvCjMYL0YDMElLBwNS84v3mY57pXNOt6xcUYch2QLImaTahcOP" crossorigin="anonymous"></script>

可将上述版本替换为 MSAL.js 版本中列出的最新发布版本。

另外，如果已安装 Node.js，则可通过 Node.js 包管理器 (npm) 下载最新版本：

npm install msal

MSAL 初始化

快速入门代码还演示了如何初始化 MSAL 库：

  // Config object to be passed to Msal on creation
  const msalConfig = {
    auth: {
      clientId: "75d84e7a-40bx-f0a2-91b9-0c82d4c556aa", // this is a fake id
      authority: "https://login.partner.microsoftonline.cn/common",
      redirectUri: "http://localhost:3000/",
    },
    cache: {
      cacheLocation: "sessionStorage", // This configures where your cache will be stored
      storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    }
  };

const myMSALObj = new Msal.UserAgentApplication(msalConfig);

有关可用的可配置选项的详细信息，请阅读初始化客户端应用程序。

用户登录

以下代码片段演示如何进行用户登录：

// Add scopes for the id token to be used at Microsoft identity platform endpoints.
const loginRequest = {
    scopes: ["openid", "profile", "https://microsoftgraph.chinacloudapi.cn/User.Read"],
};

myMSALObj.loginPopup(loginRequest)
    .then((loginResponse) => {
    //Login Success callback code here
}).catch(function (error) {
    console.log(error);
});

另外，你可能希望使用 loginRedirect 方法将当前页重定向到登录页，而不是显示弹出窗口。

请求令牌

MSAL 使用三个方法来获取令牌：acquireTokenRedirect、acquireTokenPopup 和 acquireTokenSilent

以无提示方式获取用户令牌

acquireTokenSilent 方法处理令牌获取和续订，无需进行任何用户交互。 首次执行 loginRedirect 或 loginPopup 方法后，通常使用 acquireTokenSilent 方法获取用于访问受保护资源的令牌，以便进行后续调用。 进行请求或续订令牌的调用时，以静默方式进行。

const tokenRequest = {
    scopes: ["https://microsoftgraph.chinacloudapi.cn/Mail.Read"]
};

myMSALObj.acquireTokenSilent(tokenRequest)
    .then((tokenResponse) => {
        // Callback code here
        console.log(tokenResponse.accessToken);
    }).catch((error) => {
        console.log(error);
    });

以交互方式获取用户令牌

在某些情况下，你要强制用户与 Microsoft 标识平台进行交互。 例如：

• 由于密码已过期，用户可能需要重新输入凭据。
• 应用程序正在请求访问用户需要许可的其他资源范围。
• 需要双重身份验证。

建议用于大多数应用程序的常用模式是先调用 acquireTokenSilent，然后捕获异常，然后再调用 acquireTokenPopup（或 acquireTokenRedirect），以便启动交互式请求。

调用 acquireTokenPopup 会显示用于登录的弹出窗口。 （调用 acquireTokenRedirect 则会将用户重定向到 Microsoft 标识平台。） 在该窗口中，为了进行交互，用户需要确认其凭证、为所需的资源提供许可，或者完成双重身份验证。

// Add here scopes for access token to be used at MS Graph API endpoints.
const tokenRequest = {
    scopes: ["https://microsoftgraph.chinacloudapi.cn/Mail.Read"]
};

myMSALObj.acquireTokenPopup(requestObj)
    .then((tokenResponse) => {
        // Callback code here
        console.log(tokenResponse.accessToken);
    }).catch((error) => {
        console.log(error);
    });

后续步骤

有关为本快速入门生成应用程序的更详细分步指导，请参阅：