React JS - Как аутентифицировать учетные данные с помощью оператора выборки

Question

Моя цель - создать страницу входа в React JS, на которой запущена служба отдыха json.В Postman, когда я ввожу URL-адрес для службы, задайте его для запуска в качестве POST и введите следующий текст JSON в тело: {username: "myUserName", password: "myPassword"} ... возвращается токен.Поэтому в моем предложении fetch я использую JSON.stringify для передачи имени пользователя и пароля на сервер.

Я новичок в использовании Fetch с реагировать, поэтому мой вопрос в том, как начать работу саутентифицировать различных пользователей, просто используя реагировать JS только с fetch?Я предполагаю, что я должен написать свою логику в течение секунды после моего предложения Fetch?

В настоящее время моя страница принимает любые учетные данные и направляет пользователя на целевую страницу после нажатия кнопки отправки.У меня есть функция, содержащая fetch, и теперь я вызываю функцию fetch после нажатия кнопки onSubmit, которая теперь захватывает токен.

Это мой код:

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);

Как мне начать получать форму для аутентификации различных пользователей?По сути, я пытаюсь, чтобы моя страница принимала имя пользователя и пароль и, если они совпадают, а затем направляла пользователя на целевую страницу.

Answer 1

Не помещайте свой авторизационный токен в тело. Поместите это в Заголовки. Первая функция передаст имя пользователя, пароль и тип аутентификации (например, grant_type=password). Тогда моя вторая функция собирается использовать это для аутентификации запроса. Больше нет необходимости передавать какую-либо информацию о пользователе, потому что мой API знает, кто запрашивает, на основании переданного токена. Текущая документация для OAuth 2.0 находится здесь , и вы можете найти больше информации о использование заголовков с fetch в документации выборки Mozilla .

// 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());
}

Я бы также порекомендовал:

1. Вызов извлечения из thunk или саги, но это выходит за рамки вопроса.

2. Нет необходимости помещать свой токен в скрытое поле. Который до сих пор доступен, кстати. Просто держите это в состоянии. Есть и другие вещи, которые вы можете сделать, чтобы немного его обезопасить, но это тоже выходит за рамки вопроса.