React|登録およびログインの実装コスト

会員収入

ゆうこうかじゅう
ペイロード(payload)は、伝送されたデータを表す.データを転送するときに、タイトル、メタデータ、エラーチェックビットなどのさまざまな要素を一緒に送信することで、データ転送の効率と信頼性を向上させることができます.
これは、送信するデータ自体がペイロードであることを意味します.私たちが宅配便を送ったり受け取ったりするとき、宅配便の貨物は有効荷重ですが、領収書や箱、マットなどの緩衝材などは付加されているので、有効荷重ではありません.
jsonで表示される実際のデータでは、ペイロードは次のjsonで「data」です.それ以外のすべてのデータは通信面の補助情報である.

{
	"status" : 
	"from": "localhost",
	"to": "http://melonicedlatte.com/chatroom/1",
	"method": "GET",
	"data":{ "message" : "There is a cutty dog!" }
}

https://www.notion.so/d61112fa19984e28b36bcd2fdad2064f
パスワードをtest 001に設定し、会員登録ボタンを押すとロードエラーが発生します.
お客様のパスワード検証では、少なくとも8文字を超える必要がありますが、エラーが8文字を超えるため、ペイロードが容易に超えられます.

要求をクライアント・サーバに送信し、要求を処理します(コストを追加した後)
返事をもらった.

var Customer = Clayful.Customer;

var payload = {
    email:    'email',
    password: 'password',
};
 console.log("payload",payload); //30번째 줄 

Customer.createMe(payload, function(err, result) {

    if (err) {
        // Error case
        console.log(err.code);
    }

    var data = result.data;

    console.log(data); //41번째 줄 

});

いつ作成されたのか、メールが何なのかなど、返事が来ました.

ログイン・ページは、登録コストの後に移動します。

react-router-domが提供するuserNavigate Hooksを使用します.
userNavigateに接続します.

import React, { useState } from 'react'
import { Link, useNavigate } from 'react-router-dom'
import clayful from 'clayful/client-js'

function RegisterPage() {
    const navigate = useNavigate();
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

navigate("/가려고하는페이지");に接続し、登録に成功した場合はログインページに移動します.

メールが重複しているため、エラーが発生します.

会員加入に成功したら、ログインページに入ります.

ログイン

ログインUIは会員入力とほぼ類似しているため、インポートされて使用され、同様にuserStateが使用されている.

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import clayful from 'clayful/client-js'

function LoginPage() {
    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");

    const handleEmailChange = (event) => {
        setEmail(event.target.value);
    }

    const handlePasswordChange = (event) => {
        setPassword(event.target.value);
    }
    
    const handleSubmit = (event) => {
        event.preventDefault();

        var Customer = clayful.Customer;

        var payload = {
            email,
            password
        };

        Customer.authenticate(payload, function(err, result) {

            if (err) {
                // Error case
                console.log(err.code);
            }

            var data = result.data;

            console.log(data);

        });
    }

    return (
        <div className='auth-wrapper'>
        <h1>로그인.</h1>
        <form onSubmit={handleSubmit}>
            <input 
            onChange={handleEmailChange}
            placeholder='Apple ID' 
            type="email" 
            name="email" 
            value={email}
            />
            <input 
            onChange={handlePasswordChange}
            placeholder='암호' 
            type="password" 
            name="password" 
            value={password}
            />
            <p>
                Apple ID는 아이튠즈, 앱스토어, 아이클라우드에 로그인할 때 필요하니 꼭 만들어주세요요~!
            </p>

            <button type='submit' className='btn-register'>로그인</button>
            <Link to="register" style={{ color: "gray", textDecoration: "none" }}>
                {""}
                Apple ID가 없으신가요? 지금 생성.
           </Link>
        </form>
    </div>
    )
}

export default LoginPage

ログインに成功すると、クライアントのログインを必要とするAPI(*ForMeシリーズ)用のクライアント認証トークン(token)が返されます.

{
    "customer":  "XJUMY4ZD4PKY",
    "token":     "<customer-auth-token>",
    "expiresIn": 604800
}

**customer:**お客様の固有IDを返します

**expiresIn**:検証トークンは数秒後に期限切れになります.

**token:**は、顧客認証トークンを返します.

ローカルストレージにトークンを保持

トークンは、実際には、ユーザがログインしているかどうか、有効なユーザであるかどうか、リクエストを発行できるかどうかを判断するトークンである.リクエストを発行するために使用されるため、ブラウザでタグを保持できます.

var data = result.data;
localStorage.setItem("customerUid", data.customer);
localStorage.setItem("accessToken", data.token);

console.log(data);

これにより、コードを作成して再ログインし、key&valueとして保存できます.

ログインが成功したら、ホームページに移動します。

Customer.authenticate(payload, function(err, result) {

if (err) {
                // Error case
	 console.log(err.code);
     return; //return이 있어야 아래로 내려가지 않고 멈춘다.
}

var data = result.data;
localStorage.setItem("customerUid", data.customer);
localStorage.setItem("accessToken", data.token);

// console.log(data);
            
navigate("/"); //메인으로 이동 
 });

会員登録窓口と同様に、UserNavigate Hooksを使って登録ボタンをクリックすると、ホームページにアクセスできます.

成功200~!
ソース
http://melonicedlatte.com/web/2020/01/14/205200.html