使用 Azure AD、ReactJS 和 NodeJS 对用户进行身份验证并使用 Graph API

Question

我有一个使用 NodeJS + ReactJS 创建的项目应用程序，我想要的只是使用 Azure AD 对用户进行身份验证并使用 Graph API 来自 Azure。

我已经在 Azure 门户上正确配置了 Azure AD 和应用程序。包括权限委托和所有这些人员。

我正在尝试了解如何做到这一点的最佳方式，但没有成功。我一直在尝试在 google、Whosebug、Microsoft 文档甚至项目示例中查找。

一些示例已经工作，但没有一个是我能理解并放入我的项目中作为生产应用程序工作的。

我已将其用于对用户进行身份验证，但返回的 AccessToken 无法调用图形 API:

passport.use(new OIDCStrategy({
    redirectUrl: config.creds.returnURL,
    realm: config.creds.realm,
    clientID: config.creds.clientID,
    clientSecret: config.creds.clientSecret,
    oidcIssuer: config.creds.issuer,
    identityMetadata: config.creds.identityMetadata,
    skipUserProfile: config.creds.skipUserProfile,
    responseType: config.creds.responseType,
    responseMode: config.creds.responseMode,
    allowHttpForRedirectUrl: config.creds.allowHttpForRedirectUrl
  },
  function(iss, sub, profile, accessToken, refreshToken, done) {
    console.log(accessToken);
    profile = profile._json;
    if (!profile.email) {
      return done(new Error("No email found"), null);
    }
    // asynchronous verification, for effect...
    process.nextTick(function () {
      findByEmail(profile.email, function(err, user) {
        if (err) {
          return done(err);
        }
        if (!user) {
          // "Auto-registration"
          users.push(profile);
          return done(null, profile);
        }
        return done(null, user);
      });
    });
  }
));

这个给了我使用 Graph API 的权利 AccessToken，但我不明白如何使用它来代替 Passport：

function createAuthorizationUrl(state) {
  var authorizationUrl = templateAuthzUrl.replace('<client_id>', sampleParameters.clientId);
  authorizationUrl = authorizationUrl.replace('<redirect_uri>',redirectUri);
  authorizationUrl = authorizationUrl.replace('<state>', state);
  authorizationUrl = authorizationUrl.replace('<resource>', resource);
  return authorizationUrl;
}

// Clients get redirected here in order to create an OAuth authorize url and redirect them to AAD.
// There they will authenticate and give their consent to allow this app access to
// some resource they own.
app.get('/auth', function(req, res) {
  crypto.randomBytes(48, function(ex, buf) {
    var token = buf.toString('base64').replace(/\//g,'_').replace(/\+/g,'-');

    res.cookie('authstate', token);
    var authorizationUrl = createAuthorizationUrl(token);

    res.redirect(authorizationUrl);
  });
});

// After consent is granted AAD redirects here.  The ADAL library is invoked via the
// AuthenticationContext and retrieves an access token that can be used to access the
// user owned resource.
app.get('/getAToken', function(req, res) {
  if (req.cookies.authstate !== req.query.state) {
    res.send('error: state does not match');
  }
  var authenticationContext = new AuthenticationContext(authorityUrl);
  authenticationContext.acquireTokenWithAuthorizationCode(req.query.code, redirectUri, resource, sampleParameters.clientId, sampleParameters.clientSecret, function(err, response) {
    var message = '';
    if (err) {
      message = 'error: ' + err.message + '\n';
    }
    message += 'response: ' + JSON.stringify(response);

    if (err) {
      res.send(message);
      return;
    }

    // Later, if the access token is expired it can be refreshed.
    authenticationContext.acquireTokenWithRefreshToken(response.refreshToken, sampleParameters.clientId, sampleParameters.clientSecret, resource, function(refreshErr, refreshResponse) {
      if (refreshErr) {
        message += 'refreshError: ' + refreshErr.message + '\n';
      }
      message += 'refreshResponse: ' + JSON.stringify(refreshResponse);

      res.send(message); 
    }); 
  });
});

如果有人能帮助我提供一些真实的应用示例、视频或其他东西，那就太好了。我正在失去理智。

谢谢！

Answer 1

护照的OIDCStrategy后面是Authorize access to web applications using OpenID Connect and Azure Active Directory to authenticate & authorize users. And if you need the access for resources, you still need to complete the step of Use the authorization code to request an access token.

我根据 openid connection sample:

添加了一些代码片段

return 路由函数将使用 code 获取访问令牌并保存到用户查看对象中。

app.post('/auth/openid/return',
  passport.authenticate('azuread-openidconnect', { failureRedirect: '/login' }),
  function (req, res) {
    let option = {
      method:'POST',
      uri:'https://login.microsoftonline.com/<tenant_id>/oauth2/token',
      headers:{
        'Content-Type':'application/x-www-form-urlencoded'
      },
      form:{
        grant_type:'authorization_code',
        client_id:'<client_id>',
        resource:'https://graph.windows.net',
        client_secret:'<secret_key>',
        code:req.body.code,
        redirect_uri:'http://localhost:3000/auth/openid/return'
      }
    }
    console.log(option);
    request(option,function(err,res,body){
      req.user.access_token = JSON.parse(body).access_token;
    })

    // log.info('We received a return from AzureAD.');
    res.redirect('/');
  });

路由“/me”是为了使用访问令牌来请求资源的示例。

app.get('/me',ensureAuthenticated ,function(req,response){
  request.get("https://graph.windows.net/<tenant_id>/me?api-version=1.5", {
    'headers': {
      'Authorization': "Bearer " + req.user.access_token,
      'Content-Type': 'application/json'
    }
  }, function(err, res, body){
    if(err){
      console.log("err: " + err);
    }
    else{
      console.log("res: " + res);
      response.send(res);
    }
  });
});

如有任何疑问，请随时告诉我。

使用 Azure AD、ReactJS 和 NodeJS 对用户进行身份验证并使用 Graph API

Authenticate Users and use Graph API using Azure AD, ReactJS and NodeJS

azure

node.js

reactjs

passport.js

azure-ad-graph-api