Azure AD B2C未获取访问令牌
Azure AD B2C未获取访问令牌
提问于 2018-06-21 10:05:31
我有一个用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 Appauth.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，这样我就可以真正看到传入的是什么。这就是我看到令牌为空的地方。这是我从微软的示例项目中提取的完全相同的代码，当我使用他们的代码时，它可以正常工作。他们没有展示的是AAD B2C和应用程序注册是如何配置的，我认为这就是我的问题所在。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-06-22 10:50:51
我的问题是我需要注册两个应用程序:一个用于我的客户端，一个用于API。然后，在Azure API门户中，我必须授予客户端对B2C的访问权限。一旦我这样做了，就会给出一个访问令牌。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50959353
复制相关文章
相似问题