React JS-如何通过获取语句对凭据进行身份验证 [英] React JS - How to authenticate credentials via a fetch statement
问题描述
我的目标是创建一个运行JSON Rest服务的React JS登录页面.在Postman中，当我输入服务的URL时，将其设置为以POST身份运行，然后在主体中输入以下JSON: {用户名:"myUserName"，密码:"myPassword"} ...返回令牌.因此，在我的fetch子句中，我使用JSON.stringify将用户名和密码传递给服务器.
My goal is to create a React JS login page that runs off a json Rest service. In Postman, when I enter the URL for the service, set it to run as POST and enter the following JSON into the body: {username: "myUserName", password: "myPassword"} ...a token is returned. So in my fetch clause, I'm using JSON.stringify to pass the username and password to the server.
我是刚开始使用Fetch和react，所以我的问题是，我如何开始对各个用户进行身份验证，而仅将React JS仅与fetch一起使用?我假设我要在Fetch子句的第二个语句中编写逻辑?
I'm new to using Fetch with react, So my question is, how do I get started in authenticating various users, just using react JS with fetch only? I assume, I'm to write my logic within the second then of my Fetch clause?
当前，我的页面接受任何凭据，并在单击提交"按钮后将用户路由到登录页面.我有一个包含fetch的函数，现在在单击onSubmit按钮后立即调用fetch函数，该按钮现在捕获令牌.
Currently, my page accepts any credentials and routes the user to a landing page upon clicking the submit button. I have a function containing fetch and now calling the fetch function once the onSubmit button is clicked, which now grabs the token.
这是我的代码:
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './Login.css';
import { withRouter } from 'react-router-dom';
class Login extends Component {
constructor() {
super();
this.state = {
data: [],
username: "",
password: "",
token: "",
};
} //end constructor
componentWillMount() {
}
componentDidMount() {
this.fetchData();
}
fetchData() {
fetch('http://theapi/api/auth', {
method: 'POST',
headers: {
'Content-type': 'application/json',
},
body: JSON.stringify({
username: 'myUserName',
password: 'myPassword',
Authorization: 'TheReturnedToken',
})
}) /*end fetch */
.then(results => results.json())
.then(data => this.setState({ data: data })
)
}
//request the token
requestAccessToken(data) {
const loginInfo = '${data}&grant_type=password';
return fetch('${API_URL}Token', {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/json',
}),
body: loginInfo,
})
.then((response) => response.json());
}
//authenticate request
requestUserInfo(token) {
return fetch('${API_URL}api/participant/userinfo', {
method: 'GET',
headers: new Headers({
Authorization: 'Bearer ${token}',
}),
})
.then((response) => response.json());
}
change = (e) => {
this.setState({
[e.target.name]: e.target.value
});
}; //end change
onSubmit = (e) =>{
this.fetchData();
e.preventDefault();
//console.log(this.state);
this.setState({
username: "",
password: "",
});
this.props.history.push('/landing');
};
render() {
console.log(this.state.data);
return (
<div>
<div className="loginContainer">
<h2>Member Login</h2>
<form>
<input
id="username"
name="username"
placeholder="User Name"
value={this.state.username}
onChange={e => this.change(e) }
className="form-control"
/> <br />
<input
id="password"
name="password"
type="password"
placeholder="Password"
value={this.state.password}
onChange={e => this.change(e) }
className="form-control"
/> <br />
<button onClick={e => this.onSubmit(e)} className="btn btn-primary">Submit</button>
</form>
</div>
</div>
);
}
}
export default withRouter(Login);
我如何开始获取自己的表格以对各种用户进行身份验证?基本上，我试图让我的页面接受用户名和密码(如果两者匹配)，然后将用户路由到登录页面.
How do I get started in getting my form to authenticate various users? Basically, I'm attempting to have my page to accept a username and password and if the two match, and then route the user to a landing page.
推荐答案
请勿将您的授权令牌放在正文中.将其放在标题中.第一个功能将传入用户名，密码和身份验证类型(即grant_type=password).然后，我的第二个功能将使用它来验证请求.不再需要传递任何用户信息，因为我的api根据传入的令牌知道谁在请求. OAuth 2.0在这里，您可以找到有关通过
Don't put your authorization token in the body. Put it in the Headers. The first function is going to pass in username, password, and authentication type (ie grant_type=password). Then my second function is going to use that to authenticate the request. There is no longer a need to pass any user information, because my api knows who is requesting based on the token that is passed in. The current documentation for OAuth 2.0 is here, and you can find more information about using headers with fetch at Mozilla's fetch documentation.
// request the token
// subscribe to this event and use the returned json to save your token to state or session storage
export function requestAccessToken(data) {
const loginInfo = `${data}&grant_type=password`;
return fetch(`${API_URL}Token`, {
method: 'POST',
headers: new Headers({
'Content-Type': 'application/x-www-form-urlencoded',
}),
body: loginInfo,
})
.then((response) => response.json());
// in your case set state to returned token
}
// use said token to authenticate request
export function requestUserInfo(token) {
return fetch(`${API_URL}api/participant/userinfo`, {
method: 'GET',
headers: new Headers({
Authorization: `Bearer ${token}`,
}),
})
.then((response) => response.json());
}
我还建议:
-
从thunk或saga调用fetch，但这不在问题的范围之内.
Calling fetch from a thunk or a saga, but this is out of scope of the question.
无需将令牌放在隐藏字段中.顺便说一句，仍然可以访问.只需保持其状态即可.您还可以执行其他一些操作来保护它，但这也不在问题范围之内.
No need to put your token in a hidden field. Which is still accessible btw. Just keep it in state. There are other things you can do to secure it a little, but this too, is out of scope of the question.
这篇关于React JS-如何通过获取语句对凭据进行身份验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
