تشفير النصوص و فكها بقاعدة base-64 لغة جافاسكربت
تشفير encryption و فك تشفير decryption للنصوص Texts في لغة JavaScript بقاعدة بيانات base-64.
يمكن إستخدام btoa() من أجل تشفير البيانات التي قد تتسبب في مشاكل الإتصال و نقلها و ثم إستخدام atob() لفك تشفير البيانات مرة أخرى.
يتم هذا عن طريق نوعين من الميثود المتوفرة في جافاسكربت وهما:
- الأمر btoa() يستخدم لتشفير النص.
- الأمر atob() يستخدم لفك تشفير النص.
إستخدام btoa() تشفير النصوص في جافاسكربت
تنشئ وظيفة btoa() سلسلة تشفير آسكي ASCII بترميز Base64 من سلسلة ثنائية.
يتم فيه التعامل مع كل حرف في السلسلة كبايت من البيانات الثنائية.
الشكل العام لكتابة btoa() جافاسكربت
var encodedData = btoa(stringToEncode);
مثال 1
سوف نقوم بتشفير كلمة Programmer Tech في تشفير btoa().
let text = "Programmer Tech";
let encode_text = btoa(text);
alert(encode_text);
عرفّنا المُتغير عبر let و إسمه text و عيننا له النص "Programmer Tech".
ثم عرفنا let آخر و إسمه encode_text و إستخدمنا الكلمة btoa من أجل تشفير النص و حدّدنا له أن البيانات التي سوف يتم تشفيرها موجودة في المتغير السابق text.
ثم عرضنا البيانات عبر ديالوك منبثق alert.
إستخدام atob() لتشفير النصوص في JavaScript
وظيفة atob() هي فك تشفير decryption سلسلة من البيانات التي تم تشفيرها بإستخدام تشفير Base64.
يمكن إستخدام btoa() من أجل تشفير البيانات التي قد تتسبب في حدوث مشكلات في الإتصال ثم نقلها و إستخدام atob() لفك تشفير البيانات مرة أخرى.
الشكل العام لكتابة atob() جافاسكربت
var decodedData = atob(encodedData);
مثال 2
let text = "Programmer Tech";
let encode_text = btoa(text)
let decode_text = atob(encode_text);
alert(decode_text);
إستخدمنا الميثود atob من أجل فك التشفير و تم فك لنا الكلمة المشفرة و عرض النتيجة في نافذة منبثقة.
إنشاء مشروع برمجة موقع تشفير و فك تشفير
في نهاية هذا الدرس و تعرفنا على طريقة إستخدام التشفير بواسطة btoa() و فك التشفير بواسطة atob() سوف نقوم ببرمجة موقع مهمته بك التشفير و التشفير بهذين الأمرين.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#app{
width: 100%;
max-width: 100%;
}
#app p{
width: 100%;
padding: 14px;
background: rgb(250, 3, 155);
color: white;
text-align: center;
font-family: sans-serif;
font-size: 22px;
}
#app textarea{
width: 100%;
border: 2px solid;
outline: none;
border-radius: 14px;
min-height: 140px;
}
#app select{
width: 100%;
padding: 14px;
border-radius: 14px;
margin-bottom: 14px;
}
</style>
</head>
<body>
<main id="app">
<p>نص</p>
<select id="select">
<option value="encode">تشفير النص</option>
<option value="decode">فك تشفير النص</option>
</select>
<textarea id="text"></textarea>
<p>النتيجة</p>
<textarea id="result"></textarea>
</main>
</body>
<script>
let textarea = document.getElementById("text");
let result = document.getElementById("result");
let select = document.getElementById("select");
textarea.addEventListener("input",()=>{
make_result();
});
select.addEventListener("change",()=>{
make_result();
});
function make_result(){
if(select.value == "decode"){
result.value = window.atob (textarea.value);
}else{
result.value = window.btoa(textarea.value);
}
}
</script>
</html>
شكل الموقع في المتصفح
