Django3.2 | 11 | QRオーダーシステムの構築 | ログイン機能実装 - 学生向けプログラミング入門

[10 | ログイン機能実装前準備]　<<　[ホーム]　>>　[12 | Auth Context]

まずは「qrmenu_react」の編集をします。

「qrmenu_react/src/pages/Login.js」ファイルを以下のように編集します。

記述編集　【Desktop/QRMenu/qrmenu_react/src/pages/Login.js】

import { Button, Col, Form, Row, Card } from "react-bootstrap";
import { React, useState } from "react";

import { signIn } from "../apis";
import MainLayout from "../layouts/MainLayout";

const Login = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");

  const onClick = () => {
    signIn(username, password);
  };

  return (
    <MainLayout>
        <Row className="justify-content-center">
          <Col lg={6} mg={8}>
            <Card>
              <Card.Body>
                <div className="form-title text-center">
                  <b>ログイン</b>
                </div>
                <Form.Group>
                  <Form.Label>氏名</Form.Label>
                  <Form.Control
                    type="text"
                    placeholder="氏名を入力"
                    value={username}
                    onChange={(e) => setUsername(e.target.value)}
                  />
                  <Form.Label>パスワード</Form.Label>
                  <Form.Control
                    type="password"
                    placeholder="パスワードを入力"
                    value={password}
                    onChange={(e) => setPassword(e.target.value)}
                  />
                </Form.Group>
                <Button variant="standard" block onClick={onClick}>
                    ログイン
                  </Button>                
              </Card.Body>
            </Card>
          </Col>
        </Row>
    </MainLayout>
  );
};
export default Login;

「qrmenu_react/src/index.css」ファイルに記述を追加します。

記述追加　【QRMenu/qrmenu_react/src/index.css】

body {
  background-color: #f2f2f2;
}

* {
  font-family: "Kosugi Maru", sans-serif;
}

.btn-standard {
  background-color: #ff3366;
  color: white;
  width: 100%;
}

.btn-standard:hover {
  background-color: #fc285d;
  color: white;
}

.form {
  width: 100%;
  margin-top: 5rem;
}

.form-label {
  font-size: 0.8rem;
}

.form-title {
  font-size: 1.3rem;
}

「qrmenu_react/src」フォルダに「apis.js」ファイルを新規作成します。
新規作成した「apis.js」ファイルを以下のように編集します。

新規作成　【QRMenu/qrmenu_react/src/apis.js】

import { toast } from 'react-toastify';

export function signIn(username, password) {
  return fetch("/auth/token/login/", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ username, password }),
  })
    .then((response) => {
      console.log(response);

      //もし成功したら
      if (response.ok) {
        toast.success("ログイン成功");
        return response.json();
      }
      //失敗
      return response.json().then((json) => {
          //JSONエラー
          if (response.status === 400) {
            toast.error("氏名もしくはパスワードに間違いがあります。");
            const errors = Object.keys(json).map(
                (k) => `${(json[k].join(" "))}`
            );
            throw new Error(errors.join(" "));
          }
          throw new Error(JSON.stringify(json));
        })
        .catch((e) => {
          if (e.name === "SyntaxError") {
            throw new Error(response.statusText);
          }
          throw new Error(e);
        })
    })
    .then((json) => {
      //API呼び出し成功
      toast(JSON.stringify(json), { type: "success" });
    })
    .catch((e) => {
      //全エラー
      toast(e.message, { type: "error" });
    })
}

「qrmenu_react/package.json」ファイルに「"proxy": "http://localhost:8000"」の記述を追加します。

記述追加　【QRMenu/qrmenu_react/package.json】5行目

{
  "name": "qrmenu_react",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8000",
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^4.6.0",
    "react": "^17.0.2",
    "react-bootstrap": "^1.5.2",
    "react-dom": "^17.0.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "react-toastify": "^7.0.3",
    "web-vitals": "^1.0.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}