تحقيق ميكانيكية التسجيل التلقائي داخل أسبوع باستخدام php (cookie، session، localStorage)

الكوكي، الجلسة، المحفظة المحلية، هذه هي أكثر الأشياء التي تسبب القلق للمبرمجين، سأشرحها لك باستخدام واجهة تسجيل الدخول البسيطة لـ username و password.

يستخدم الكوكي لتخزين بيانات المستخدم، ويتم تخزينه في موقع المستخدم المحلي:

أولاً، تعريف واجهة تسجيل الدخول:

<form action="server.php" method="post"> 
        <input type="text" name="username" class="username" placeholder="اسم المستخدم"> 
        <input type="password" name="password" class="password" placeholder="كلمة المرور"> 
        <button type="submit">ادخلني</button> 
        <div class="error"><span>+</span></div> 
      </form> 

هل تعرفون الكود المقدم هنا، وهو نموذج استمارة. ثم هو معالجة server.php للـ action،

<?php 
/** 
 * تم إنشاؤه بواسطة PhpStorm. 
 * مستخدم: المسؤول 
 * تاريخ: 2016-7-19 
 * وقت: 11:50 
 */ 
include "data.php"; 
header("Content-type:text/html;charset=utf-8"); 
//echo "ddd"; 
if ($_SERVER["REQUEST_METHOD"] == "POST") {//الخطوة الأولى 
//  echo "ddd1"; 
  if ($_POST["username"] == $info["username"] && $_POST["password"] == $info["password"]) {//الخطوة الثانية 
    $myArr = $_POST; 
    $myArr = array_merge($myArr, array("loginIP" => $_SERVER["REMOTE_ADDR"], "loginTime" => time())); 
    se($myArr); 
    setcookies($_POST["username"], $_POST["password"]); 
    setStroage($_POST["username"], $_POST["password"]); 
    echo "<script> 
   window.location.href='index.php'; 
  </script>"; 
  } 
} 
  echo "<script> 
alert('يرجى الدخول'); 
window.location.href='login.html'; 
</script>"; 
} 
//من خلال الجلسة حفظها على الخادم 
function se(array $arr) 
{ 
  session_start(); 
  $_SESSION["username"] = $arr["username"]; 
  $_SESSION["password"] = $arr["password"]; 
  $_SESSION["loginIP"] = $arr["loginIP"]; 
  $_SESSION["loginTime"] = $arr["loginTime"]; 
} 
//من خلال الكوكيز حفظها محليًا 
function setCookies($username, $password) 
{ 
  setcookie("username", $username, time() + 120); 
  setcookie("password", $password, time() + 120); 
} 
//echo "<script> 
// 
//  localStorage.setItem('username','$username'); 
//localStorage.setItem('password'," . "'" . $password . "'" . "); 
//</script>"; 
function setStroage($username, $password){ 
  echo "<script> 
  localStorage.setItem('username'," . "'" . $username . "'" . "); 
  localStorage.setItem('password'," . "'" . $password . "'" . "); 
  </script>"; 
} 

أحملت data.php فعليًا يحتوي على بيانات واحدة فقط,

$info=array("username"=>"admin","password"=>"admin"); 

هذه البيانات تستخدم لتحقق مما إذا كانت اسم المستخدم وكلمة المرور المدخلة صحيحة.

أولاً، في الخادم، يتم التحقق مما إذا كان هناك طلب post، إذا لم يكن كذلك، يتم عرض رسالة لتسجيل الدخول مرة أخرى وإعادة عرض واجهة تسجيل الدخول، بعد التأكد من أن الطلب هو post، يتم التحقق مما إذا كانت المعلومات المدخلة صحيحة، إذا كانت صحيحة، يتم إعداد setcookie. سأشرح كل سطر من هذه الأكواد

$myArr = $_POST; // وضع البيانات المرسلة كـ post في myarr; 
    $myArr = array_merge($myArr, array("loginIP" => $_SERVER["REMOTE_ADDR"], "loginTime" => time()));//هذه هي المعلمات الإضافية، واحدة هي عنوان تسجيل الدخول للمستخدم، والأخرى هي فترة صلاحية الكوكي (ستختفي قبل وقت العثور على وقت تسجيل الدخول) 
    se($myArr); 
    setcookies($_POST["username"], $_POST["password"]); // هذا هو إعداد cookie، حيث يتم تعيين القيم المرسلة كcookie، وسيتم استقبالها من قبل getCookie 
    setStroage($_POST["username"], $_POST["password"]); 
    echo "<script> 
  window.location.href='index.php'; 

في الواقع، في هذه اللحظة، تم تخزين cookie وفقًا للزمن الذي قمنا بضبطه، ثم ما علينا القيام به هو خدمة الخادم الخاصة بنا لميزة عدم الحاجة إلى تسجيل الدخول، مثل تسجيل الدخول إلى برامج أخرى، يتم عرض رسالة بأنك لن تحتاج إلى كلمة المرور لمدة أسبوع

هذا هو الكود أدناه:

function intialLoadInfo(){ 
    $("input:text").val(getCoolieByKey("username")); // هذان هما الذي يتم استخدامهما لإكمال اسم المستخدم وكلمة المرور التي تم إدخالها مسبقًا (تحقيق الغرض) 
    $("input:password").val(getCoolieByKey("password")); 
  } 
  /* الحصول على cookie باستخدام key */ 
  function getCoolieByKey(key){ 
    var cookie=document.cookie.split(";"); // هذه السطر هي التي تقوم بفصل قيمة cookie (split) لتمكين البحث عنها في الخطوات التالية (بعد الفصل تكون كقائمة) 
    لـ for(var i=0; i<cookie.length; i++) { // مرور على الطول 
      var value=cookie[i].trim(); // إزالة الفراغات 
      إذا (value.indexOf(key)==0) { // تحقق مما إذا كان أول قيمة 
        val=value.split("="); 
        console.log(val[0]); 
        الرجوع إلى val[1]; 
      } 
    } 
  } 

يتم تنفيذ getCookieByKey(key) في الطريقة الأولى المذكورة أعلاه;

هذا الدالة المزودة بمعامل تأخذ المعامل الذي نحن قد قمنا بتعليقه myArr كنوع من البيانات;

ثم التوضيح التفصيلي في الشيفرة، يمكنكم الرجوع إليها.

2.session: يتم استخدام session لتخزين معلومات المستخدم على الجانب الخاص بالخادم، عند إغلاق المتصفح، يتم التدمير تلقائيًا؛

session_start();

المجموعة الكبيرة $_SESSION يمكن استخدامها لتعيين وقراءة session؛

الشيفرة كالتالي:

function se(array $arr) 
{ 
  session_start(); 
  $_SESSION["username"] = $arr["username"]; 
  $_SESSION["password"] = $arr["password"]; 
  $_SESSION["loginIP"] = $arr["loginIP"]; 
  $_SESSION["loginTime"] = $arr["loginTime"]; 
} 

أولاً، الشيفرة أعلاه، نفس الحصول على أربعة خصائص، وضعت في $_SESSION الخاصة بنا؛ يتم التخزين:

ثم يتم تنفيذ الشيفرة أعلاه، يمكنك رؤية وجود se

$myArr = array_merge($myArr, array("loginIP" => $_SERVER["REMOTE_ADDR"], "loginTime" => time()));//هذه هي المعلمات الإضافية، واحدة هي عنوان تسجيل الدخول للمستخدم، والأخرى هي فترة صلاحية الكوكي (ستختفي قبل وقت العثور على وقت تسجيل الدخول) 
    se($myArr); 

هنا فقط لـ session مكتوبة;

هو يخزن أربعة خصائص، username.password.IP.time

في الشيفرة أعلاه أيضًا هناك تعليق; في الواقع، يمكننا الآن العثور على session التي أنشأناها في session.

3. localStorage في الجانب JS: طريقة التخزين المحلي المقدمة من HTML5 (يمكن تسميتها "قاعدة بيانات الأصابع القيم");

تعيين البيانات: localStorage.setItem("key","value");
قراءة البيانات: localStorage.getItem("key"); النتيجة هي قيمة نصية؛
حذف البيانات: localStorage.removeItem("key");

الشيفرة التفصيلية كالتالي:

ملف الجافاسكربت المكتوب تحت html هو ثم يتم تنفيذ:

$(function (){ 
    إذا (localStorage.getItem("username")!=""&&localStorage.getItem("password")!=""){ 
      document.getElementById("username").value=localStorage.getItem("username"); 
      document.getElementById("password").value=localStorage.getItem("password"); 
    } 
  }); 

　هذا الدالة تتكون أساسًا من إنشاء

function setStroage($username, $password){ 
  echo "<script> 
  localStorage.setItem('username'," . "'" . $username . "'" . "); 
  localStorage.setItem('password'," . "'" . $password . "'" . "); 
  </script>"; 
} 

في الواقع، هذا الأمر يتطلب كتابته تدريجيًا، وأنا رغم أنني أستطيع كتابته، لكنني أستخدم هذا المثال كثيرًا في كل مرة أستخدمه، لذا أتمنى أن تكون الأمثلة التي استخدمتها لفترة طويلة مفيدة لك، شكرًا على القراءة، وآمل أن تساعدك، شكرًا لدعمك لهذا الموقع!

بيان: محتويات هذا المقال تم جمعها من الإنترنت، ويتمتع صاحب الحقوق بالملكية، ويتم توفير المحتويات من قبل مستخدمي الإنترنت الذين يقدمون المساهمات ويقومون بالتحميل بأنفسهم، ولا يمتلك هذا الموقع حقوق الملكية، ويتم التعامل مع المحتويات بدون تدخل بشري، ولا يتحمل هذا الموقع أي مسؤولية قانونية متعلقة بذلك. إذا رأيت محتوى يشتبه في مخالفة حقوق النسخ، فلا تتردد في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (الرجاء استبدال # ب @ عند إرسال البريد الإلكتروني) لإبلاغنا، وقدم الأدلة ذات الصلة، وسيتم حذف المحتوى المزعوم الذي يشتبه في مخالفة حقوق النسخ على الفور.