通过 OIDCStrategy 和 BearerStrategy 使用 passport-azure-ad 配置来保护 Web 应用程序和 Web 服务器答案

【问题标题】：using passport-azure-ad configuration to secure a web app and web server via OIDCStrategy and BearerStrategy通过 OIDCStrategy 和 BearerStrategy 使用 passport-azure-ad 配置来保护 Web 应用程序和 Web 服务器
【发布时间】：2019-12-14 00:04:23
【问题描述】：

我有一个由 express.js 服务器（网络应用服务器）提供的网络应用。 Web 应用服务器通过 passport.js 和 passport-azure-ad npm 包处理用户登录。为此，我正在使用 OIDCStrategy。

我还通过另一台服务器（rest 后端）托管 REST api。我想通过 passport.js 和使用 BearerStrategy 的 passport-azure-ad npm 包来保护这个后端。为此，我想在网络应用服务器护照配置中定义一个范围，以便网络应用服务器的 access_token 可以通过 cookie 传递到我的网络应用，并从那里用于访问其余后端。

我的问题：在我当前的配置下，我在尝试使用 access_token 访问我的后端 api 时收到 401 拒绝访问。 access_token invalid 是错误信息：{"name":"AzureAD: Bearer Strategy", "msg":"authentication failed due to: error: invalid_token","v":0}

我认为我应该在登录时被重定向到权限页面，但事实并非如此。所以我猜我的访问令牌实际上是无效的。

Web 应用服务器通行证配置：

passport.use(
  new OIDCStrategy(
    {
      clientID: credsAzureAD.clientID,
      identityMetadata: credsAzureAD.identityMetadata, // here is use the web app tenant id
      clientSecret: credsAzureAD.clientSecret,
      callbackURL: credsAzureAD.returnURL,
      redirectUrl: credsAzureAD.returnURL,
      skipUserProfile: true,
      responseType: 'code',
      responseMode: 'query',
      scope: 'api://test/Write.Contributor',
      useCookieInsteadOfSession: false,
      passReqToCallback: false
    },
    (issuer, sub, profile, accessToken, refreshToken, done) => {
        user.accessToken = accessToken;
        return done(null, user);
    }
  )
);

我尝试使用 api://test 是我的 REST API 应用程序 ID uri 的范围，/Write.Contributor 是我在 azure 活动目录中定义的范围。

我的 REST 后端服务器通行证配置：

const options = {
    identityMetadata: azureAD.identityMetadata, // here I use the backend server tenant id
    clientID: azureAD.clientID,
    issuer: azureAD.issuer, // here I use the backend server tenant id
    passReqToCallback: false,
};

const bearerStrategy = new BearerStrategy(options, function(token, done) {
    done(null, {}, token);
});

我已经通过应用程序注册在 azure 活动目录中创建了我的后端服务器，并在上面创建了命名范围和应用程序 ID。我还在那里将我的 Web 应用程序 clientId 列入了白名单，作为授权的客户端应用程序。

我尝试拨打以下路线并收到 401：

app.get(
    '/testtest',
    cors(),
    passport.authenticate('oauth-bearer', { session: false }),
    function(req, res) {
        var claims = req.authInfo;
        console.log('User info: ', req.user);
        console.log('Validated claims: ', claims);
        res.status(200).json({ name: claims['name'] });
    }
);

这是我的 vue 网络应用程序的休息电话：

    let headers = {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${this.user.accessToken}`,
      'cache-control': 'no-cache'
    };
    const apiClient = axios.create({
      baseURL,
      headers
    });
    apiClient.get('/testtest').then( resp => console.log( resp));

我使用访问令牌，因为没有解码/编码。

非常感谢任何支持。谢谢！

【问题讨论】：

您是否通过 Azure 门户在客户端应用程序中添加了后端 AD 应用程序范围？更多详情请参考docs.microsoft.com/en-us/azure/active-directory/develop/…
非常感谢。我添加了范围，我知道收到另一条错误消息。 authentication failed due to: error: invalid_token, error description: In Strategy.prototype.jwtVerify: Invalid JWT token. 所以我想我现在必须弄清楚这一点。谢谢！
我更新了我的问题，并添加了我如何使用 accessToken。我是否使用了错误的访问令牌？

标签： javascript azure express azure-active-directory passport.js

【解决方案1】：

正如@Jim Xu 在 cmets 中建议的那样，通过 Azure Portal 将 REST api 的应用范围添加到客户端应用程序有助于解决问题。但我也使用了错误的令牌。

我现在使用验证函数参数列表中的param，而不是使用验证函数参数列表中的accessToken。

(iss, sub, profile, access_token, refresh_token, params, done) => {
     // access_token did not work
     // id_token can be used as an accessToken
     user.accessToken = params.id_token;
     ...
}

【讨论】：