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

使用 Azure Active Directory B2C 在你自己的 Node.js Web API 中启用身份验证

本文介绍如何创建调用 Web API 的 Web 应用。 Web API 需要受 Azure Active Directory B2C (Azure AD B2C) 保护。 若要授权访问 Web API，需要处理相关请求，这些请求包含由 Azure AD B2C 颁发的有效访问令牌。

先决条件

• 在开始之前，请阅读并完成使用 Azure AD B2C 在示例 Node.js Web API 中配置身份验证中的步骤。 然后按照本文中的步骤，将示例 Web 应用和 Web API 替换为你自己的 Web 应用和 Web API。

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

• Node.js 运行时

步骤 1：创建受保护的 Web API

请按照以下步骤创建 Node.js Web API。

步骤 1.1：创建项目

使用适用于 Node.js 的 Express 生成 Web API。 若要创建 Web API，请执行以下操作：

1. 创建名为 TodoList 的新文件夹。
2. 在 TodoList 文件夹下，创建名为 index.js 的文件。
3. 在命令 shell 中，运行 npm init -y。 此命令将为 Node.js 项目创建一个默认 package.json 文件。
4. 在命令 shell 中，运行 npm install express。 此命令安装 Express 框架。

步骤 1.2：安装依赖项

在你的 Web API 项目中添加身份验证库。 身份验证库将分析 HTTP 身份验证头，验证令牌，并提取声明。 有关详细信息，请查看该库的文档。

若要添加身份验证库，请运行以下命令安装相应的包：

npm install passport
npm install passport-azure-ad
npm install morgan

morgan 包是适用于 Node.js 的 HTTP 请求记录器中间件。

步骤 1.3：编写 Web API 服务器代码

在 index.js 文件中添加以下代码：

const express = require('express');
const morgan = require('morgan');
const passport = require('passport');
const config = require('./config.json');
const todolist = require('./todolist');
const cors = require('cors');

//<ms_docref_import_azuread_lib>
const BearerStrategy = require('passport-azure-ad').BearerStrategy;
//</ms_docref_import_azuread_lib>

global.global_todos = [];

//<ms_docref_azureadb2c_options>
const options = {
    identityMetadata: `https://${config.credentials.tenantName}.b2clogin.com/${config.credentials.tenantName}.onmicrosoft.com/${config.policies.policyName}/${config.metadata.version}/${config.metadata.discovery}`,
    clientID: config.credentials.clientID,
    audience: config.credentials.clientID,
    policyName: config.policies.policyName,
    isB2C: config.settings.isB2C,
    validateIssuer: config.settings.validateIssuer,
    loggingLevel: config.settings.loggingLevel,
    passReqToCallback: config.settings.passReqToCallback
}

//</ms_docref_azureadb2c_options>

//<ms_docref_init_azuread_lib>
const bearerStrategy = new BearerStrategy(options, (token, done) => {
        // Send user info using the second argument
        done(null, { }, token);
    }
);
//</ms_docref_init_azuread_lib>
const app = express();

app.use(express.json()); 

//enable CORS (for testing only -remove in production/deployment)
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Authorization, Origin, X-Requested-With, Content-Type, Accept');
    next();
});

app.use(morgan('dev'));

app.use(passport.initialize());

passport.use(bearerStrategy);

// To do list endpoints
app.use('/api/todolist', todolist);

//<ms_docref_protected_api_endpoint>
// API endpoint, one must present a bearer accessToken to access this endpoint
app.get('/hello',
    passport.authenticate('oauth-bearer', {session: false}),
    (req, res) => {
        console.log('Validated claims: ', req.authInfo);
    
          
        // Service relies on the name claim.  
        res.status(200).json({'name': req.authInfo['name']});
    }
);
//</ms_docref_protected_api_endpoint>

//<ms_docref_anonymous_api_endpoint>
// API anonymous endpoint, returns a date to the caller.
app.get('/public', (req, res) => res.send( {'date': new Date() } ));
//</ms_docref_anonymous_api_endpoint>

const port = process.env.PORT || 5000;

app.listen(port, () => {
    console.log('Listening on port ' + port);
});

记下 index.js 文件中的以下代码片段：

• 导入 passport Microsoft Entra 库

  const BearerStrategy = require('passport-azure-ad').BearerStrategy;
  

• 设置 Azure AD B2C 选项

  const options = {
      identityMetadata: `https://${config.credentials.tenantName}.b2clogin.com/${config.credentials.tenantName}.onmicrosoft.com/${config.policies.policyName}/${config.metadata.version}/${config.metadata.discovery}`,
      clientID: config.credentials.clientID,
      audience: config.credentials.clientID,
      policyName: config.policies.policyName,
      isB2C: config.settings.isB2C,
      validateIssuer: config.settings.validateIssuer,
      loggingLevel: config.settings.loggingLevel,
      passReqToCallback: config.settings.passReqToCallback
  }
  

• 使用 Azure AD B2C 选项实例化 passport Microsoft Entra 库

  const bearerStrategy = new BearerStrategy(options, (token, done) => {
          // Send user info using the second argument
          done(null, { }, token);
      }
  );
  

• 受保护的 API 终结点。 它处理的请求包含一个由 Azure AD B2C 颁发的有效访问令牌。 此终结点返回访问令牌中的 name 声明值。

  // API endpoint, one must present a bearer accessToken to access this endpoint
  app.get('/hello',
      passport.authenticate('oauth-bearer', {session: false}),
      (req, res) => {
          console.log('Validated claims: ', req.authInfo);
      
            
          // Service relies on the name claim.  
          res.status(200).json({'name': req.authInfo['name']});
      }
  );
  

• 匿名 API 终结点。 Web 应用无需提供访问令牌即可调用它。 使用它通过匿名调用来调试 Web API。

  // API anonymous endpoint, returns a date to the caller.
  app.get('/public', (req, res) => res.send( {'date': new Date() } ));
  

步骤 1.4：配置 Web API

向配置文件中添加配置。 该文件包含有关 Azure AD B2C 标识提供者的信息。 Web API 应用使用此信息来验证访问令牌，该访问令牌由 Web 应用当作持有者令牌传递。

1. 在项目根文件夹下，创建一个 config.json 文件，然后向其添加以下 JSON 对象：

   {
       "credentials": {
           "tenantName": "fabrikamb2c",
           "clientID": "93733604-cc77-4a3c-a604-87084dd55348"
       },
       "policies": {
           "policyName": "B2C_1_susi"
       },
       "resource": {
           "scope": ["tasks.read"]
       },
       "metadata": {
           "authority": "login.microsoftonline.com",
           "discovery": ".well-known/openid-configuration",
           "version": "v2.0"
       },
       "settings": {
           "isB2C": true,
           "validateIssuer": true,
           "passReqToCallback": false,
           "loggingLevel": "info"
       }
   }
   

2. 在 config.json 文件中，更新以下属性：

部分	密钥	值
凭据	tenantName	Azure AD B2C 租户名称的第一部分（例如 fabrikamb2c）。
凭据	clientID	Web API 应用程序 ID。 若要了解如何获取 Web API 应用程序注册 ID，请参阅先决条件。
策略	policyName	用户流或自定义策略。 若要了解如何获取用户流或策略，请参阅先决条件。
resource	scope	Web API 应用程序注册的范围，例如 [tasks.read]。 若要了解如何获取 Web API 范围，请参阅先决条件。

步骤 2：创建 Web Node Web 应用程序

请按照以下步骤创建 Node Web 应用。 此 Web 应用会对要获取访问令牌的用户进行身份验证，该令牌用于调用已在步骤 1 中创建的 Node Web API：

步骤 2.1：创建 Node 项目

创建一个用于保留 Node 应用程序的文件夹，例如 call-protected-api。

1. 在终端中，将目录切换到 Node 应用文件夹，例如 cd call-protected-api，然后运行 npm init -y。 此命令为 Node.js 项目创建默认的 package.json 文件。

2. 在终端中，运行 npm install express。 此命令安装 Express 框架。

3. 创建更多文件夹和文件以实现以下项目结构：

   call-protected-api/
   ├── index.js
   └── package.json
   └── .env
   └── views/
       └── layouts/
           └── main.hbs
       └── signin.hbs
       └── api.hbs
   

   views 文件夹包含 Web 应用 UI 的 handlebars 文件。

步骤 2.2：安装依赖项

在终端中，通过运行以下命令来安装 dotenv、express-handlebars、express-session 和 @azure/msal-node 包：

npm install dotenv
npm install express-handlebars
npm install express
npm install axios
npm install express-session
npm install @azure/msal-node

步骤 2.3：生成 Web 应用 UI 组件

1. 在 main.hbs 文件中添加以下代码：

   <!DOCTYPE html>
   <html lang="en">
     <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
       <title>Azure AD B2C | Enable authenticate on web API using MSAL for B2C</title>
   
       <!-- adding Bootstrap 4 for UI components  -->
       <!-- CSS only -->
       <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
       <link rel="SHORTCUT ICON" href="https://c.s-microsoft.com/favicon.ico?v2" type="image/x-icon">
     </head>
     <body>
       <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
         <a class="navbar-brand" href="/">Microsoft Identity Platform</a>
           {{#if showSignInButton}}
               <div class="ml-auto">
                   <a type="button" id="SignIn" class="btn btn-success" href="/signin" aria-haspopup="true" aria-expanded="false">
                       Sign in to call PROTECTED API
                   </a>
                   <a type="button" id="SignIn" class="btn btn-warning" href="/api" aria-haspopup="true" aria-expanded="false">
                       Or call the ANONYMOUS API 
                    </a>
               </div>
           {{else}}
                   <p class="navbar-brand d-flex ms-auto">Hi {{givenName}}</p>
                   <a class="navbar-brand d-flex ms-auto" href="/signout">Sign out</a>
           {{/if}}
       </nav>
       <br>
       <h5 class="card-header text-center">MSAL Node Confidential Client application with Auth Code Flow</h5>
       <br>
       <div class="row" style="margin:auto" >
         {{{body}}}
       </div>
       <br>
       <br>
     </body>
   </html>
   

   main.hbs 文件位于 layout 文件夹中，它应包含整个应用程序所需的任何 HTML 代码。 它可实现使用 Bootstrap 5 CSS 框架生成的 UI。 任何在页面之间发生变化的 UI（例如 signin.hbs）都放置在显示为 {{{body}}} 的占位符中。

2. 在 signin.hbs 文件中添加以下代码：

   <div class="col-md-3" style="margin:auto">
     <div class="card text-center">
       <div class="card-body">
         {{#if showSignInButton}}
   
         {{else}}
              <h5 class="card-title">You have signed in</h5>
             <a type="button" id="Call-api" class="btn btn-success" href="/api" aria-haspopup="true" aria-expanded="false">
                 Call the PROTECTED API
             </a>
         {{/if}}
       </div>
       </div>
     </div>
   </div>
   

3. 在 api.hbs 文件中添加以下代码：

   <div class="col-md-3" style="margin:auto">
     <div class="card text-center bg-{{bg_color}}">
       <div class="card-body">
   
             <h5 class="card-title">{{data}}</h5>
   
       </div>
     </div>
   </div>
   

   此页显示来自 API 的响应。 Bootstrap 的卡片中的 bg-{{bg_color}} 类属性使 UI 能够显示不同 API 终结点的不同背景色。

步骤 2.4：完成 Web 应用程序服务器代码

1. 在 .env 文件中添加以下代码，其中包括服务器 HTTP 端口、应用注册详细信息，以及登录和注册用户流/策略详细信息：

   SERVER_PORT=3000
   #web apps client ID
   APP_CLIENT_ID=<You app client ID here>
   #session secret
   SESSION_SECRET=sessionSecretHere
   #web app client secret
   APP_CLIENT_SECRET=<Your app client secret here>
   #tenant name
   TENANT_NAME=<your-tenant-name>
   #B2C sign up and sign in user flow/policy name and authority
   SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>
   AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
   #client redorect url
   APP_REDIRECT_URI=http://localhost:3000/redirect
   LOGOUT_ENDPOINT=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000
   

   根据配置示例 Web 应用中的说明修改 .env 文件中的值

2. 在 index.js 文件中，添加以下代码：

   /*
    * Copyright (c) Microsoft Corporation. All rights reserved.
    * Licensed under the MIT License.
    */
   require('dotenv').config();
   const express = require('express');
   const session = require('express-session');
   const {engine}  = require('express-handlebars');
   const msal = require('@azure/msal-node');
   //Use axios to make http calls 
   const axios = require('axios');
   
   //<ms_docref_configure_msal>
   /**
    * Confidential Client Application Configuration
    */
    const confidentialClientConfig = {
       auth: {
           clientId: process.env.APP_CLIENT_ID, 
           authority: process.env.SIGN_UP_SIGN_IN_POLICY_AUTHORITY, 
           clientSecret: process.env.APP_CLIENT_SECRET,
           knownAuthorities: [process.env.AUTHORITY_DOMAIN], //This must be an array
           redirectUri: process.env.APP_REDIRECT_URI,
           validateAuthority: false
       },
       system: {
           loggerOptions: {
               loggerCallback(loglevel, message, containsPii) {
                   console.log(message);
               },
               piiLoggingEnabled: false,
               logLevel: msal.LogLevel.Verbose,
           }
       }
   };
   
   // Initialize MSAL Node
   const confidentialClientApplication = new msal.ConfidentialClientApplication(confidentialClientConfig);
   //</ms_docref_configure_msal>
   // Current web API coordinates were pre-registered in a B2C tenant.
   
   //<ms_docref_api_config>
   const apiConfig = {
       webApiScopes: [`https://${process.env.TENANT_NAME}.onmicrosoft.com/tasks-api/tasks.read`],
       anonymousUri: 'http://localhost:5000/public',
       protectedUri: 'http://localhost:5000/hello'
   };
   //</ms_docref_api_config>
   
   /**
    * The MSAL.js library allows you to pass your custom state as state parameter in the Request object
    * By default, MSAL.js passes a randomly generated unique state parameter value in the authentication requests.
    * The state parameter can also be used to encode information of the app's state before redirect. 
    * You can pass the user's state in the app, such as the page or view they were on, as input to this parameter.
    * For more information, visit: https://docs.microsoft.com/azure/active-directory/develop/msal-js-pass-custom-state-authentication-request
    */
   const APP_STATES = {
       LOGIN: 'login',
       CALL_API:'call_api'   
   }
   
   
   /** 
    * Request Configuration
    * We manipulate these two request objects below 
    * to acquire a token with the appropriate claims.
    */
    const authCodeRequest = {
       redirectUri: confidentialClientConfig.auth.redirectUri,
   };
   
   const tokenRequest = {
       redirectUri: confidentialClientConfig.auth.redirectUri,
   };
   
   
   /**
    * Using express-session middleware. Be sure to familiarize yourself with available options
    * and set them as desired. Visit: https://www.npmjs.com/package/express-session
    */
    const sessionConfig = {
       secret: process.env.SESSION_SECRET,
       resave: false,
       saveUninitialized: false,
       cookie: {
           secure: false, // set this to true on production
       }
   }
   //Create an express instance
   const app = express();
   
   //Set handlebars as your view engine
   app.engine('.hbs', engine({extname: '.hbs'}));
   app.set('view engine', '.hbs');
   app.set("views", "./views");
   
   app.use(session(sessionConfig));
   
   /**
    * This method is used to generate an auth code request
    * @param {string} authority: the authority to request the auth code from 
    * @param {array} scopes: scopes to request the auth code for 
    * @param {string} state: state of the application, tag a request
    * @param {Object} res: express middleware response object
    */
   
    const getAuthCode = (authority, scopes, state, res) => {
       // prepare the request
       console.log("Fetching Authorization code")
       authCodeRequest.authority = authority;
       authCodeRequest.scopes = scopes;
       authCodeRequest.state = state;
   
       //Each time you fetch Authorization code, update the authority in the tokenRequest configuration
       tokenRequest.authority = authority;
   
       // request an authorization code to exchange for a token
       return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
           .then((response) => {
               console.log("\nAuthCodeURL: \n" + response);
               //redirect to the auth code URL/send code to 
               res.redirect(response);
           })
           .catch((error) => {
               res.status(500).send(error);
           });
   }
   
   app.get('/', (req, res) => {
       res.render('signin', { showSignInButton: true });
   });
   
   
   
   app.get('/signin',(req, res)=>{ 
           //Initiate a Auth Code Flow >> for sign in
           //Pass the api scopes as well so that you received both the IdToken and accessToken
           getAuthCode(process.env.SIGN_UP_SIGN_IN_POLICY_AUTHORITY,apiConfig.webApiScopes, APP_STATES.LOGIN, res);
   });
   
   
   app.get('/redirect',(req, res)=>{    
       
       if (req.query.state === APP_STATES.LOGIN) {
           // prepare the request for calling the web API
           tokenRequest.authority = process.env.SIGN_UP_SIGN_IN_POLICY_AUTHORITY;
           tokenRequest.scopes = apiConfig.webApiScopes;
           tokenRequest.code = req.query.code;
           confidentialClientApplication.acquireTokenByCode(tokenRequest)
           .then((response) => {
               req.session.accessToken = response.accessToken;
               req.session.givenName = response.idTokenClaims.given_name;
               console.log('\nAccessToken:' + req.session.accessToken);
               res.render('signin', {showSignInButton: false, givenName: response.idTokenClaims.given_name});
           }).catch((error) => {
               console.log(error);
               res.status(500).send(error);
           });
       }else{
           res.status(500).send('We do not recognize this response!');
       }
   });
   
   //<ms_docref_api_express_route>
   app.get('/api', async (req, res) => {
       if(!req.session.accessToken){
           //User is not logged in and so they can only call the anonymous API
           try {
               const response = await axios.get(apiConfig.anonymousUri);
               console.log('API response' + response.data); 
               res.render('api',{data: JSON.stringify(response.data), showSignInButton: true, bg_color:'warning'});
           } catch (error) {
               console.error(error);
               res.status(500).send(error);
           }         
       }else{
           //Users have the accessToken because they signed in and the accessToken is still in the session
           console.log('\nAccessToken:' + req.session.accessToken);
           let accessToken = req.session.accessToken;
           const options = {
               headers: {
                   //accessToken used as bearer token to call a protected API
                   Authorization: `Bearer ${accessToken}`
               }
           };
   
           try {
               const response = await axios.get(apiConfig.protectedUri, options);
               console.log('API response' + response.data); 
               res.render('api',{data: JSON.stringify(response.data), showSignInButton: false, bg_color:'success', givenName: req.session.givenName});
           } catch (error) {
               console.error(error);
               res.status(500).send(error);
           }
       }     
   });
   
   //</ms_docref_api_express_route>
   
   /**
    * Sign out end point
   */
   app.get('/signout',async (req, res)=>{    
       logoutUri = process.env.LOGOUT_ENDPOINT;
       req.session.destroy(() => {
           res.redirect(logoutUri);
       });
   });
   app.listen(process.env.SERVER_PORT, () => console.log(`Msal Node Auth Code Sample app listening on port !` + process.env.SERVER_PORT));
   

   index.js 文件中的代码由全局变量和快速路由组成。

   全局变量：

   • confidentialClientConfig：MSAL 配置对象，用于创建机密客户端应用程序对象。

     /**
      * Confidential Client Application Configuration
      */
      const confidentialClientConfig = {
         auth: {
             clientId: process.env.APP_CLIENT_ID, 
             authority: process.env.SIGN_UP_SIGN_IN_POLICY_AUTHORITY, 
             clientSecret: process.env.APP_CLIENT_SECRET,
             knownAuthorities: [process.env.AUTHORITY_DOMAIN], //This must be an array
             redirectUri: process.env.APP_REDIRECT_URI,
             validateAuthority: false
         },
         system: {
             loggerOptions: {
                 loggerCallback(loglevel, message, containsPii) {
                     console.log(message);
                 },
                 piiLoggingEnabled: false,
                 logLevel: msal.LogLevel.Verbose,
             }
         }
     };
     
     // Initialize MSAL Node
     const confidentialClientApplication = new msal.ConfidentialClientApplication(confidentialClientConfig);
     

   • apiConfig：包含 webApiScopes 属性（其值必须为数组），该属性是在 Web API 中配置并授予 Web 应用的范围。 它还有要调用的 Web API 的 URI，即 anonymousUri 和 protectedUri。

     const apiConfig = {
         webApiScopes: [`https://${process.env.TENANT_NAME}.onmicrosoft.com/tasks-api/tasks.read`],
         anonymousUri: 'http://localhost:5000/public',
         protectedUri: 'http://localhost:5000/hello'
     };
     

   • APP_STATES：同时随令牌响应返回的请求中包含的值。 用于区分从 Azure AD B2C 收到的响应。

   • authCodeRequest：用于检索授权代码的配置对象。

   • tokenRequest：用于通过授权代码获取令牌的配置对象。

   • sessionConfig：Express 会话的配置对象。

   • getAuthCode：一种创建授权请求 URL，让用户输入凭据并同意应用程序的方法。 它使用 ConfidentialClientApplication 类中定义的 getAuthCodeUrl 方法。

   快速路由：

   • /:
     • 它是 Web 应用的条目，可呈现 signin 页面。
   • /signin:
     • 登录用户。
     • 调用 getAuthCode() 方法并向其传递“登录和注册”用户流/策略的 authority、APP_STATES.LOGIN 和 apiConfig.webApiScopes。
     • 它使系统质询最终用户，让其输入登录名；如果用户没有帐户，可以注册一个。
     • 此终结点生成的最终响应包括回发到 /redirect 终结点的 B2C 授权代码。
   • /redirect:
     • 在 Azure 门户中设置为 Web 应用重定向 URI 的终结点。
     • 它使用 Azure AD B2C 的响应中的 state 查询参数来区分从 Web 应用发出的请求。
     • 如果应用状态为 APP_STATES.LOGIN，则使用获取的授权代码通过 acquireTokenByCode() 方法检索令牌。 通过 acquireTokenByCode 方法请求令牌时，使用的范围与获取授权代码时使用的范围相同。 获取的令牌包括 accessToken、idToken 和 idTokenClaims。 获取 accessToken 后，请将其放入会话中，供稍后用于调用 Web API。
   • /api:
     • 调用 Web API。
     • 如果 accessToken 不在会话中，请调用匿名 API 终结点 (http://localhost:5000/public)，否则请调用受保护的 API 终结点 (http://localhost:5000/hello)。
   • /signout:
     • 注销用户。
     • 清除 Web 应用会话，然后对 Azure AD B2C 退出登录终结点进行 HTTP 调用。

步骤 3：运行 Web 应用和 API

按照运行 Web 应用和 API 中的步骤测试 Web 应用和 Web API。

后续步骤

• 使用 Azure AD B2C 保护 Azure API 管理 API