認証認証

This tutorial is a continuation from my . We are still learning how to build an authentication system with react. Check out to bring you up to speed.

このチュートリアルの手順に従ってくださいhere

ログイン

今、我々は注意を向けるLogin.js ファイル.あなたが最後の記事から来ているならば、以下のステップの大部分はよく知られています.

初期状態を設定するemail , password and login

  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
  const [login, setLogin] = useState(false);

集合するname and value 属性をemail and password 入力フィールド.これは私のです.

{/* email */}
        <Form.Group controlId="formBasicEmail">
          <Form.Label>Email address</Form.Label>
          <Form.Control
            type="email"
            name="email"
            value={email}
            placeholder="Enter email"
          />
        </Form.Group>

        {/* password */}
        <Form.Group controlId="formBasicPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control
            type="password"
            name="password"
            value={password}
            placeholder="Password"
          />
        </Form.Group>

この時点で、あなたはもはやあなたに入力することはできませんLogin フォームフィールド.これは、前の状態から現在の状態まで更新するフィールドを設定していないためです.それをしましょう

追加onChange={(e) => setEmail(e.target.value)}and onChange={(e) => setPassword(e.target.value)} にemail and password 入力フィールド.これは私のです.

       {/* email */}
        <Form.Group controlId="formBasicEmail">
          <Form.Label>Email address</Form.Label>
          <Form.Control
            type="email"
            name="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="Enter email"
          />
        </Form.Group>

        {/* password */}
        <Form.Group controlId="formBasicPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control
            type="password"
            name="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="Password"
          />
        </Form.Group>

これで、フォームフィールドに入力することができます

追加onSubmit={(e)=>handleSubmit(e)} and onClick={(e)=>handleSubmit(e)} にform and button 要素.The onSubmit フォームの送信を有効にするEnter キーはonClick ボタンをクリックしてフォームの提出を有効にします.フォームは以下のようになります.

      <Form onSubmit={(e)=>handleSubmit(e)}>
        {/* email */}
        <Form.Group controlId="formBasicEmail">
          <Form.Label>Email address</Form.Label>
          <Form.Control
            type="email"
            name="email"
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            placeholder="Enter email"
          />
        </Form.Group>

        {/* password */}
        <Form.Group controlId="formBasicPassword">
          <Form.Label>Password</Form.Label>
          <Form.Control
            type="password"
            name="password"
            value={password}
            onChange={(e) => setPassword(e.target.value)}
            placeholder="Password"
          />
        </Form.Group>

        {/* submit button */}
        <Button
          variant="primary"
          type="submit"
          onClick={(e) => handleSubmit(e)}
        >
          Login
        </Button>
      </Form>

これが動作しているかどうかをテストするには、return ライン

const handleSubmit = (e) => {
    // prevent the form from refreshing the whole page
    e.preventDefault();
    // make a popup alert showing the "submitted" text
    alert("Submited");
  }

ボタンをクリックするか、Enterキーを押すと、結果は次のようになります.

関数の構築

今すぐ削除alert 関数からのステートメント

あなたがから来ていないならば、axiosをインストールしてください.Axiosを使ってAPIを呼び出すか、フロントエンドをバックエンドに接続します.

npm i axios

ファイルの先頭にあるaxiosをインポートします.

import axios from "axios";

handlesubmit関数では、axiosに必要な設定をうまく構築し、フロントエンドをバックエンドに接続します.

// set configurations
    const configuration = {
      method: "post",
      url: "https://nodejs-mongodb-auth-app.herokuapp.com/login",
      data: {
        email,
        password,
      },
    };

The method データの処理方法を示します.url API関数がアクセスするエンドポイントですdata すべての入力またはrequest body バックエンドが期待していること.うまくいけばそれは十分明確です.

設定の設定を持って、今すぐ呼び出しを行いましょう.API呼び出しは1行の文です.こちら

axios(configuration)

これでAPIコールが完了しました.しかし、実際に成功したかどうかを確認する必要があります.そして、おそらく我々のユーザーに結果を表示します.それで、それを修正するために、我々はそれから使用します...キャッチ.ブロック

さて、次のようになります.

    // make the API call
    axios(configuration)
    .then((result) => {console.log(result);})
    .catch((error) => {console.log(error);})

テスト用のコンソールにログインしています

今度は新しいユーザでログインして、結果のコンソールをチェックしてください.成功した.下記を参照

もちろん、ログインしようとした結果をチェックするためにコンソールにユーザーを指示しません.では、ユーザに伝える方法を見つけましょう

コードを次のコードに置き換えます.

    // make the API call
    axios(configuration)
      .then((result) => {
        setLogin(true);
      })
      .catch((error) => {
        error = new Error();
      });

設定によってlogin to true , ログイン処理が完了したときに、今すぐ教えてください.では、ユーザに伝えましょう

次のコードを追加しますForm 元素

      {/* display success message */}
        {login ? (
          <p className="text-success">You Are Logged in Successfully</p>
        ) : (
          <p className="text-danger">You Are Not Logged in</p>
        )}

このコードは、login is true . さあ試してみましょう
これは私のです.

あなたが私のものと同じ結果を得ているならば、あなたはそれをしました!
あなたは素晴らしい

結論

我々は、我々が出発したところから、このチュートリアルを始めました.我々はすでに登録したユーザーにログインする方法を見てきました.
All codes are here
次に、見ていきます.
ジャストスティックアラウンド