Azure AD B2C无法获取访问令牌 [英] Azure AD B2C Not getting Access Token
问题描述
我有一个用ReactJS编写的单页应用程序(SPA).我正在尝试查询Graph API.我正在使用msal.js库来处理我的身份验证.我正在使用Azure AD B2C管理我的帐户.到目前为止，我所拥有的:
I have a Single Page App (SPA) written in ReactJS. I am attempting to query the Graph API. I am using the msal.js library to handle my authentication. I am using Azure AD B2C to manage my accounts. What I have so far:
我能够登录Google并将我的个人资料信息返回给我的SPA.但是，当请求accessToken时，结果为空.我很肯定自己做错了，我猜这与我的应用注册和范围有关.当我注册我的应用程序时，它具有一个默认范围，称为"user_impersonation".键入此代码时，我意识到我注册了我的客户端(SPA)，而不是API.我需要同时注册吗?我不确定如何注册Graph.
I am able to login to Google and get my profile information back to my SPA. However, when an accessToken is requested, the result is empty. I am positive I'm doing something wrong and I'm guessing it's around my app registration and scopes. When I registered my app, it had a default scope called "user_impersonation". As I type this, I realize I registered my client (SPA) and not the API. Do I need to register both? I'm not sure how I would register 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:
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和应用程序注册的配置方式，我认为这是我的问题所在.
I was getting an access denied error when trying to query the Graph API so I replaced graph.microsoft.com/1.0 with httpbin so I could actually see what was being passed in. This is where I saw that the token was null. This is the exact same code I pulled from Microsoft's example project, which works when I use their code. What they don't show is how AAD B2C and app registrations are configured which is where I believe my problem is.
推荐答案
我的问题是我需要注册2个应用程序:1个用于客户端，1个用于API.然后，在Azure AD B2C门户中，我必须授予客户端对该API的访问权限.一旦这样做，便获得了访问令牌.
My problem was I needed to register 2 applications: 1 for my client, 1 for the API. Then, in the Azure AD B2C portal, I had to grant the client access to the API. Once I did that, an Access Token was given.
这篇关于Azure AD B2C无法获取访问令牌的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
