احراز هویت Master Frontend: نسخه ی نمایشی Userauth خود را بسازید

آماده باز کردن اسرار تأیید اعتبار کاربر هستید؟ امروز ، شما با ساختن نسخه ی نمایشی Userauth که ورود به سیستم ، ثبت نام و مدیریت کاربر را انجام می دهد ، وارد دنیای برنامه های امن می شوید. این فقط مربوط به فرم ها نیست – شما در حال یادگیری پایه و اساس هر برنامه وب مدرن هستید!

فهرست مطالب

1. درک جادوی احراز هویت
2. تنظیم قلعه React خود
3. با API تمرین خود ملاقات کنید – reqres
4. ساخت سیستم ورود به سیستم
5. ثبت نام کاربر ساده ساخته شده است
6. واکشی داده های کاربر مانند یک حرفه ای
7. مدیریت وضعیت احراز هویت
8. رسیدگی به خطا – وقتی کاربران اشتباه می کنند
9. سطح بعدی: احراز هویت واقعی و فراتر از آن
10. ایده های طراحی و پیشرفت

درک جادوی احراز هویت

به تأیید اعتبار مانند ورودی VIP Club فکر کنید. برنامه شما این باشگاه است و کاربران برای دریافت Pass VIP (نشانه تأیید اعتبار) به اعتبار مناسب (نام کاربری/رمز عبور) نیاز دارند. پس از گذر از آنها ، می توانند به مناطق اختصاصی (مسیرهای محافظت شده) باشگاه شما دسترسی پیدا کنند.

آنچه شما تسلط خواهید داشت:

• ورود به سیستم و ثبت نام کاربر
• احراز هویت مبتنی بر توکن
• مسیرهای محافظت شده و جلسات کاربر
• الگوهای ارتباطی API در دنیای واقعی

تنظیم قلعه React خود

بیایید زمین بازی احراز هویت خود را بسازیم:

npx create-react-app userauth-demo
cd userauth-demo
npm start

قلعه React شما اکنون بلند است! این را به عنوان ساخت قاب یک ساختمان امن فکر کنید – اکنون ما سیستم های امنیتی را اضافه خواهیم کرد.

با API تمرین خود ملاقات کنید – reqres

Reqres (https://reqres.in) زمین آموزش شماست – یک API جعلی اما واقع بینانه که دقیقاً مانند سرورهای تأیید اعتبار واقعی پاسخ می دهد. این مانند یک شبیه ساز پرواز برای توسعه دهندگان است!

نقاط پایانی کلیدی که از آنها استفاده خواهید کرد:

• POST /api/login – دروازه ورودی شما
• POST /api/register – میز ثبت نام
• GET /api/users – فهرست عضو
• GET /api/users/{id} – پروفایل های عضو انفرادی

چگونه reqres کار می کند (قیاس ساده)

Reqres را به عنوان یک پذیرنده مفید در یک ساختمان اداری مسخره تصور کنید:

• شما می توانید در بررسی (ورود به سیستم) تمرین کنید
• می توانید ثبت نام کنید (ثبت نام)
• می توانید لیست کارمندان را بخواهید (کاربران را دریافت کنید)
• پذیرنده همیشه به صورت حرفه ای پاسخ می دهد ، حتی اگر این فقط تمرین باشد!

ساخت سیستم ورود به سیستم

بیایید Bouncer دیجیتالی خود را ایجاد کنیم – مؤلفه ورود به سیستم که اعتبار را بررسی می کند و دسترسی را به آنها اعطا می کند.

بنیاد مؤلفه ورود شما

import React, { useState } from 'react';

function LoginForm({ onLoginSuccess }) {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');

  return (
    <div className="login-container">
      <h2>Welcome Back! 🚪h2>
      {/* We'll build this step by step */}
    div>
  );
}

export default LoginForm;

اینجا چه اتفاقی می افتد؟

• email/password – جعبه های ذخیره سازی برای اعتبار کاربر
• loading – پرچم “لطفا صبر کنید” در حالی که ما اعتبار را بررسی می کنیم
• error – یک صفحه پیام برای وقتی که همه چیز اشتباه می شود
• onLoginSuccess – یک عملکرد جشن در هنگام ورود به سیستم!

عملکرد جادویی ورود به سیستم

const handleLogin = async (e) => {
  e.preventDefault(); // Stop the form from refreshing the page

  try {
    setLoading(true);
    setError(''); // Clear any previous errors

    // Send credentials to our digital bouncer
    const response = await fetch('https://reqres.in/api/login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: email,
        password: password
      })
    });

    const data = await response.json();

    if (response.ok) {
      // Success! User gets their VIP pass
      console.log('Login successful! Token:', data.token);
      localStorage.setItem('authToken', data.token);
      onLoginSuccess(data);
    } else {
      // Bouncer says "no entry"
      setError(data.error || 'Login failed');
    }

  } catch (error) {
    setError('Network error - please try again');
  } finally {
    setLoading(false);
  }
};

تجزیه جریان احراز هویت:

1. e.preventDefault(): فرم را از انجام رفتار پیش فرض خود متوقف می کند (تجدید صفحه)
2. method: 'POST': ما در حال ارسال اطلاعات هستیم ، نه فقط درخواست آن
3. headers: گفتن سرور “سلام ، من داده های JSON را ارسال می کنم”
4. localStorage.setItem(): ذخیره پاس VIP (توکن) در ایمن مرورگر

رابط فرم ورود به سیستم

<form onSubmit={handleLogin}>
  <div>
    <input
      type="email"
      placeholder="Email address"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      required
    />
  div>

  <div>
    <input
      type="password"
      placeholder="Password"
      value={password}
      onChange={(e) => setPassword(e.target.value)}
      required
    />
  div>

  {error && (
    <div className="error-message">
      ⚠️ {error}
    div>
  )}

  <button type="submit" disabled={loading}>
    {loading ? 'Checking credentials...' : 'Enter the Club 🚪'}
  button>
form>

{/* Pro tip for testing */}
<div className="test-credentials">
  <p>🧪 Test with: eve.holt@reqres.in / any passwordp>
div>

ثبت نام کاربر ساده ساخته شده است

ثبت نام مانند پر کردن درخواست عضویت است. بیایید آن روند را بسازیم:

const handleRegister = async (e) => {
  e.preventDefault();

  try {
    setLoading(true);
    setError('');

    // Submit membership application
    const response = await fetch('https://reqres.in/api/register', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        email: email,
        password: password
      })
    });

    const data = await response.json();

    if (response.ok) {
      // Welcome to the club!
      console.log('Registration successful!', data);
      setError(''); // Clear any errors
      // You might want to auto-login here or show success message
    } else {
      setError(data.error || 'Registration failed');
    }

  } catch (error) {
    setError('Network error during registration');
  } finally {
    setLoading(false);
  }
};

تفاوت کلیدی از ورود به سیستم:

• ساختار مشابه ، نقطه پایانی مختلف (/api/register)
• موفقیت به معنای “حساب ایجاد شده” به جای “دسترسی اعطا شده” است
• شما ممکن است برای ورود به سیستم یا تأیید خودکار هدایت شوید

واکشی داده های کاربر مانند یک حرفه ای

پس از ورود کاربران ، آنها می خواهند اطلاعات عضو را ببینند. بیایید یک فهرست کاربر بسازیم:

function UserDirectory() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(false);
  const [selectedUser, setSelectedUser] = useState(null);

  // Fetch the member directory
  const fetchUsers = async () => {
    try {
      setLoading(true);

      const response = await fetch('https://reqres.in/api/users?page=1');
      const data = await response.json();

      setUsers(data.data); // ReqRes wraps users in a 'data' property

    } catch (error) {
      console.error('Failed to fetch users:', error);
    } finally {
      setLoading(false);
    }
  };

  // Fetch detailed info for one member
  const fetchUserDetails = async (userId) => {
    try {
      const response = await fetch(`https://reqres.in/api/users/${userId}`);
      const data = await response.json();

      setSelectedUser(data.data);

    } catch (error) {
      console.error('Failed to fetch user details:', error);
    }
  };

  // Load users when component starts
  React.useEffect(() => {
    fetchUsers();
  }, []);

  return (
    <div className="user-directory">
      <h2>Club Members 👥h2>

      {loading && <p>Loading member directory...p>}

      <div className="users-grid">
        {users.map(user => (
          <div 
            key={user.id} 
            className="user-card"
            onClick={() => fetchUserDetails(user.id)}
          >
            <img src={user.avatar} alt={`${user.first_name}'s avatar`} />
            <h3>{user.first_name} {user.last_name}h3>
            <p>{user.email}p>
          div>
        ))}
      div>

      {selectedUser && (
        <div className="user-details">
          <h3>Selected Member Detailsh3>
          <p>Name: {selectedUser.first_name} {selectedUser.last_name}p>
          <p>Email: {selectedUser.email}p>
        div>
      )}
    div>
  );
}

درک جریان داده ها:

• useEffect هنگامی که مؤلفه بارگذاری می شود اجرا می شود (مانند باز کردن فهرست عضو)
• map() برای هر عضو کارت ایجاد می کند (مانند چاپ کارت ویزیت)
• روی Handlers اطلاعات دقیق را کلیک کنید (مانند جستجوی نمایه کامل شخصی)

مدیریت وضعیت احراز هویت

چالش واقعی به یاد آوردن چه کسی در کل برنامه شما وارد شده است. این را به عنوان سیستم حافظه برنامه خود فکر کنید:

function App() {
  const [isAuthenticated, setIsAuthenticated] = useState(false);
  const [currentUser, setCurrentUser] = useState(null);

  // Check if user was previously logged in
  React.useEffect(() => {
    const token = localStorage.getItem('authToken');
    if (token) {
      setIsAuthenticated(true);
      // In a real app, you'd validate this token
    }
  }, []);

  const handleLoginSuccess = (userData) => {
    setIsAuthenticated(true);
    setCurrentUser(userData);
  };

  const handleLogout = () => {
    localStorage.removeItem('authToken');
    setIsAuthenticated(false);
    setCurrentUser(null);
  };

  return (
    <div className="app">
      {isAuthenticated ? (
        <div>
          <header>
            <h1>Welcome to the Club!h1>
            <button onClick={handleLogout}>Exit Club 🚪button>
          header>
          <UserDirectory />
        div>
      ) : (
        <div>
          <LoginForm onLoginSuccess={handleLoginSuccess} />
          {/* Add registration form toggle here */}
        div>
      )}
    div>
  );
}

تجزیه مدیریت دولت:

• isAuthenticated – پرچم بولی (آیا آنها در باشگاه هستند یا نه؟)
• currentUser – ذخیره سازی برای اطلاعات کاربر (دقیقاً چه کسی در باشگاه است؟)
• localStorage بررسی کنید – اعضای بازگشت را به خاطر بسپارید
• ارائه مشروط – نمایش نظرات مختلف بر اساس وضعیت AUTH

رسیدگی به خطا – وقتی کاربران اشتباه می کنند

کاربران اشتباه می کنند – رمزهای عبور اشتباه ، مشکلات شبکه ، جلسات منقضی. بیایید این موارد را با لطف انجام دهیم:

const [errors, setErrors] = useState({});

const validateForm = () => {
  const newErrors = {};

  if (!email.includes('@')) {
    newErrors.email = 'Please enter a valid email';
  }

  if (password.length < 6) {
    newErrors.password = 'Password must be at least 6 characters';
  }

  setErrors(newErrors);
  return Object.keys(newErrors).length === 0;
};

const handleSubmit = async (e) => {
  e.preventDefault();

  if (!validateForm()) {
    return; // Don't submit if validation fails
  }

  // Your API call here...
};

// Display errors in your JSX
{errors.email && <span className="error">{errors.email}span>}
{errors.password && <span className="error">{errors.password}span>}

فلسفه رسیدگی به خطا:

• اعتبار اولیه (قبل از ارسال به سرور)
• پیام های روشن و مفیدی را ارائه دهید
• خراب نشوید – با لطف و رسیدگی به مشکلات شبکه
• کاربران را به سمت موفقیت راهنمایی کنید

سطح بعدی: احراز هویت واقعی و فراتر از آن

تبریک می گویم! شما اصول احراز هویت را تسلط داده اید. اما این فقط پایه و اساس شماست. اینجا جایی است که سفر شما ادامه دارد:

integration احراز هویت Firebase

آماده برای درجه تولید است؟ Firebase مسیر ارتقاء شماست:

• آنچه ارائه می دهد: حساب های کاربری واقعی ، تنظیم مجدد رمز عبور ، ورود اجتماعی (Google ، Facebook)
• شروع: از کنسول Firebase بازدید کنید
• چالش بعدی شما: Reqres را با Auth Firebase جایگزین کنید

🤖 افزودن ویژگی های AI

تصور کنید سیستم AUTH شما باهوش تر می شود:

• توصیه های هوشمندانه: “خوش آمدید! بر اساس فعالیت شما …”
• بینش های امنیتی: تشخیص ناهنجاری AI برای ورود به سیستم
• شروع: برای تجربیات کاربر هوشمند ، API Gemini Google را کاوش کنید

🛡 مفاهیم امنیتی پیشرفته

دانش امنیتی خود را بالا ببرید:

• نشانه های JWT: درک ساختار و اعتبار سنجی
• نشانه های تازه: نگه داشتن کاربران ایمن
• دسترسی مبتنی بر نقش: مجوزهای مختلف برای کاربران مختلف
• احراز هویت دو عاملی: اضافه کردن لایه های امنیتی اضافی

🎨 تعالی طراحی

جریان های نویسنده شما باید زیبا و بصری باشد:

• دریبل: “طراحی فرم ورود به سیستم” یا “UI تأیید اعتبار” را جستجو کنید
• عود: فیلتر شده توسط “ui/ux” و “login”
• مواد-یووی یا خنجر: اجزای فرم از پیش ساخته شده
• تمرکز روی UX: انتقال صاف ، حالت های خطای پاک ، شاخص های بارگیری

tips نکات توسعه محلی (Bamenda & Beyond)

با اتصال محدود کار می کنید؟ توسعه خود را بهینه کنید:

• طراحی آفلاین اول: حالت احراز هویت حافظه پنهان
• پیشرفت پیشرونده: عملکرد اساسی بدون جاوا اسکریپت
• بارگذاری هوشمند: فقط در صورت نیاز به آنچه شما نیاز دارید واکشی کنید

مأموریت شما در انتظار است! 🚀

شما اکنون DNA تأیید هویت کاربر را درک می کنید – پایه و اساس هر برنامه امن. چالش شما:

یک نسخه ی نمایشی userauth جلا دهید که به نمایش می گذارد:

• جریان ورود/ورود به سیستم صاف
• رابط مدیریت کاربر زیبا
• رسیدگی به خطای قوی
• چشم انداز طراحی منحصر به فرد شما

به یاد داشته باشید ، هر بستر اصلی با احراز هویت ساده شروع شد. فیس بوک ، توییتر ، اینستاگرام – همه آنها با “آیا کاربران می توانند با اطمینان وارد شوند؟” شما اکنون به آن مهارت اساسی تسلط یافته اید.

الگویی که با Reqres آموخته اید ، مستقیماً به API های واقعی ترجمه می شود. مفاهیم نشانه ها ، مسیرهای محافظت شده و مدیریت دولت جهانی است. شما فقط در حال ساخت نسخه ی نمایشی نیستید – شما در حال یادگیری زبان برنامه های ایمن وب هستید.

💡 نکات حرفه ای برای موفقیت:

• ساده را شروع کنید ، سپس به تدریج ویژگی ها را اضافه کنید
• رسیدگی به خطای خود را کاملاً آزمایش کنید
• به جزئیات تجربه کاربر توجه کنید
• بررسی کنید که چگونه برنامه های مورد علاقه شما تأیید هویت را انجام می دهند

ایده های پسوند:

• ویرایش پروفایل کاربر را اضافه کنید
• شاخص های قدرت رمز عبور را پیاده سازی کنید
• داشبوردهای مبتنی بر نقش ایجاد کنید
• شبیه سازی ورود به سیستم اجتماعی را اضافه کنید

حالا بروید و چیزی امن و زیبا بسازید! وب به توسعه دهندگان بیشتری نیاز دارد که هم طرفهای فنی و هم از تجربه تأیید اعتبار را درک می کنند. 🔐✨

برنامه نویسی مبارک ، متخصص احراز هویت آینده! 🛡