Question

我有一个用ReactJS编写的单页应用程序（SPA）。我正在尝试查询Graph API。我正在使用msal.js库来处理我的身份验证。我正在使用Azure AD B2C管理我的帐户。我到目前为止所拥有的：

我能够登录Google并将我的个人资料信息返回给我的SPA。但是，当请求accessToken时，结果为空。我很肯定自己做错了，我猜这与我的应用注册和范围有关。当我注册我的应用程序时，它具有一个默认范围，称为“ user_impersonation”。键入此代码时，我意识到我注册了我的客户端（SPA），而不是API。我需要同时注册吗？我不确定如何注册Graph。

我的代码：

App.js

import AuthService from '../services/auth.service';
import GraphService from '../services/graph.service';

class App extends Component {
  constructor() {
  super();
  this.authService = new AuthService();
  this.graphService = new GraphService();
  this.state = {
    user: null,
    userInfo: null,
    apiCallFailed: false,
    loginFailed: false
  };
}
  componentWillMount() {}

  callAPI = () => {
    this.setState({
    apiCallFailed: false
  });
  this.authService.getToken().then(
    token => {
      this.graphService.getUserInfo(token).then(
        data => {
          this.setState({
            userInfo: data
          });
        },
        error => {
          console.error(error);
          this.setState({
            apiCallFailed: true
          });
        }
      );
    },
    error => {
      console.error(error);
      this.setState({
        apiCallFailed: true
      });
    }
  );
};

logout = () => {
  this.authService.logout();
};

login = () => {
  this.setState({
    loginFailed: false
  });
  this.authService.login().then(
    user => {
      if (user) {
        this.setState({
          user: user
        });
      } else {
        this.setState({
          loginFailed: true
        });
      }
    },
    () => {
      this.setState({
       loginFailed: true
      });
    }
  );
};

render() {
  let templates = [];
  if (this.state.user) {
    templates.push(
      <div key="loggedIn">
        <button onClick={this.callAPI} type="button">
          Call Graph's /me API
        </button>
        <button onClick={this.logout} type="button">
          Logout
        </button>
        <h3>Hello {this.state.user.name}</h3>
      </div>
    );
  } else {
    templates.push(
      <div key="loggedIn">
        <button onClick={this.login} type="button">
          Login with Google
        </button>
      </div>
    );
  }
  if (this.state.userInfo) {
    templates.push(
      <pre key="userInfo">{JSON.stringify(this.state.userInfo, null, 4)}</pre>
    );
  }
  if (this.state.loginFailed) {
    templates.push(<strong key="loginFailed">Login unsuccessful</strong>);
  }
  if (this.state.apiCallFailed) {
    templates.push(
      <strong key="apiCallFailed">Graph API call unsuccessful</strong>
    );
  }
  return (
    <div className="App">
      <Header />
      <Main />
        {templates}
    </div>
  );
 }
}

export default App

auth.service.js：

import * as Msal from 'msal';

export default class AuthService {
constructor() {
// let PROD_REDIRECT_URI = 'https://sunilbandla.github.io/react-msal-sample/';
// let redirectUri = window.location.origin;
// let redirectUri = 'http://localhost:3000/auth/openid/return'
// if (window.location.hostname !== '127.0.0.1') {
//   redirectUri = PROD_REDIRECT_URI;
// }
this.applicationConfig = {
  clientID: 'my_client_id',
  authority: "https://login.microsoftonline.com/tfp/my_app_name.onmicrosoft.com/b2c_1_google-sisu",
  b2cScopes: ['https://my_app_name.onmicrosoft.com/my_api_name/user_impersonation email openid profile']
  // b2cScopes: ['graph.microsoft.com user.read']
};
this.app = new Msal.UserAgentApplication(this.applicationConfig.clientID, this.applicationConfig.authority, function (errorDesc, token, error, tokenType) {});
// this.logger = new Msal.logger(loggerCallback, { level: Msal.LogLevel.Verbose, correlationId:'12345' });
}


login = () => {
    return this.app.loginPopup(this.applicationConfig.b2cScopes).then(
    idToken => {
    const user = this.app.getUser();
    if (user) {
      return user;
    } else {
      return null;
    }
  },
   () => {
      return null;
    }
  );
};


logout = () => {
  this.app.logout();
};


getToken = () => {
  return this.app.acquireTokenSilent(this.applicationConfig.b2cScopes).then(
    accessToken => {
      return accessToken;
    },
    error => {
      return this.app
        .acquireTokenPopup(this.applicationConfig.b2cScopes)
        .then(
          accessToken => {
            return accessToken;
          },
          err => {
            console.error(err);
          }
        );
      }
    );
  };
}

graph.service.js

export default class GraphService {
constructor() {
  // this.graphUrl = 'https://graph.microsoft.com/v1.0';
  this.graphUrl = 'http://httpbin.org/headers';
}

getUserInfo = token => {
  const headers = new Headers({ Authorization: `Bearer ${token}` });
  const options = {
    headers
  };
  return fetch(`${this.graphUrl}`, options)
    .then(response => response.json())
    .catch(response => {
      throw new Error(response.text());
    });
  };
}

尝试查询Graph API时遇到访问拒绝错误，因此我用httpbin替换了graph.microsoft.com/1.0，这样我就可以实际看到传入的内容。这是我看到令牌为null的地方。这是与我从Microsoft的示例项目中提取的代码完全相同的代码，当我使用他们的代码时可以使用。他们没有显示的是AAD B2C和应用程序注册的配置方式，我认为这是我的问题所在。

Answer 1

对不起，这可能会使用户感到困惑，但是这里有几种不同的服务。

有Azure AD Graph API - it is same for B2C

有Microsoft Graph。

然后，在Azure AD B2C本身中，您将Application Registration用于 B2C 部分。使用此应用程序注册，您不能使用任何图形。

还有一个普通的Application Integration in Azure Active Directory，对图表有效。但是，这种类型的应用程序集成（也如here所述）不能用于 B2C 流。

因此，再次说明一下：

您不能使用任何Graph API（Azure AD Graph API或 Microsoft Graph）来自 B2C 应用程序。

AND

您不能使用任何 B2C功能（例如通过google登录，等等）从注册为与Graph一起使用的“普通”应用的上下文中。

因此，在B2C registered application的上下文中，您只能请求和get an access_token for an API which is also registered for use with B2C。

Answer 2

我的问题是我需要注册2个应用程序：1个用于我的客户端，1个用于API。然后，在Azure AD B2C门户中，我必须授予客户端对API的访问权限。一旦这样做，便获得了访问令牌。

Azure AD B2C无法获取访问令牌

graph.service.js

2 个答案: