英文:
SSO login with Azure AD using React JS
问题
我在开发单页面应用（SPA）时遇到了跨域令牌兑换的问题。我收到了以下错误消息：
"跨域令牌兑换仅允许用于 '单页面应用程序' 客户端类型。请求来源：'http://localhost:3000'。"
我的 React JS 应用程序代码如下：
App.js
import logo from './logo.svg';
import './App.css';
import { config } from './Config';
import { PublicClientApplication } from '@azure/msal-browser';
import { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
constructor(props) {
super(props);
this.state = {
error: null,
isAuthenticated: false,
user: {}
};
this.login = this.login.bind(this);
this.publicClientApplication = new PublicClientApplication({
auth: {
clientId: config.appId,
redirectUri: config.redirectUri,
authority: config.authority
}
});
}
async login() {
try {
await this.publicClientApplication.loginPopup({
scopes: config.scopes,
prompt: "select_account"
});
this.setState({ isAuthenticated: true });
} catch (err) {
this.setState({
isAuthenticated: false,
user: {},
error: err
});
}
}
logout() {
this.publicClientApplication.logout();
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
</a>
{this.state.isAuthenticated ? <p>Learn React </p> :
<p><button onClick={() => this.login()}>Login In</button></p>}
</header>
</div>
);
}
}
export default App;
config.js
export const config = {
appId: My_APP_ID,
redirectUri: "http://localhost:3000",
scopes: [
'user.read'
],
authority: "https://login.microsoftonline.com/My_APP_TENT_ID"
}
登录后输入用户名密码令牌 API 显示 400 错误请求。
请建议我上述代码有什么问题。如果有任何错误，请提出建议。先谢谢您。
英文:
I'm facing an issue with Cross-origin token redemption while developing a Single-Page Application (SPA). I'm getting the following error:
"Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type. Request origin: 'http://localhost:3000'."
My React JS App code
App.js
import logo from './logo.svg';
import './App.css';
import { config } from './Config';
import { PublicClientApplication } from '@azure/msal-browser';
import { Component } from 'react';
import { render } from 'react-dom';
class App extends Component {
constructor(props) {
super(props);
this. state = {
error: null,
isAuthenticated: false,
user:{}
}
this.login = this.login.bind(this);
this.publicClientApplication = new PublicClientApplication({
auth: {
clientId: config.appId,
redirectUri: config.redirectUri,
authority: config.authority
}
})
}
async login() {
try {
await this.publicClientApplication.loginPopup({
scopes: config.scopes,
prompt: "select_account"
});
this.setState({isAuthenticated:true})
} catch (err) {
this.setState({
isAuthenticated: false,
user: {},
error: err
})
}
}
logout() {
this.publicClientApplication.logout()
}
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
</a>
{this.state.isAuthenticated ? <p>Learn React </p>:
<p><button onClick={() => this.login()}>Login In</button></p> }
</header>
</div>
);
}
}
export default App;
config.js
export const config = {
appId:My_APP_ID,
redirectUri: "http://localhost:3000",
scopes: [
'user.read'
],
authority:"https://login.microsoftonline.com/My_APP_TENT_ID"
}
`
after login enter username password token api show 400 bad request
Please suggest me what's wrong above code. If did any mistake suggest me. Thanks in advance.
答案1
得分: 0
When you create an application, it's under redirect URI, I'm looking to see where I can find it for an existing application.
You can also edit your manifest file for your application directly by adding redirect URIs:
"replyUrlsWithType": [
{
"url": "http://localhost:3000",
"type": "Spa"
},
...other urls
],
英文:
When you create an application, it's under redirect URI, I'm looking to see where I can find it for an existing application
You can also edit your manifest file for your application directly by adding redirect URIs:
"replyUrlsWithType": [
{
"url": "http://localhost:3000",
"type": "Spa"
},
...other urls
],
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论