Часто бывает необходимость защитить лишь страницу паролем с некоторым секретным содержимым, но не хочется долго разбираться с серверными скриптами, настройками .htaccess и .htpasswd, тогда это можно сделать с помощью языка JavaScript.
Сразу предупреждаю: через этот скрипт JS для защиты паролем нельзя прятать что-то ценное. Особо умный посетитель всегда может узнать пароль через исходный код страницы, например, набрав в браузере CTRL+U и найдя скрипт, как и всё содержимое страницы.
И ещё одна фишка такого скрипта: если введён не верный пароль, он на секунду покажет содержимое, но тут же перекинет или на повторный ввод пароля, или на любую другую страницу, в зависимости от настроек.
То есть, мы как бы показываем: вот искомое, оно совсем рядом, но тут же через секунду «Однако, пароль ввести всё же придётся!».
Области применения
Где может пригодиться такая защита контента:
- Для авторов e-mail рассылок и инфобизнесменов. Подпишись на рассылку, получи пароль и тогда ларёчек откроется.
- Для запоминания имени, фамилии автора блога или адреса блога. В качестве пароля просто используется ключ, который и должен запомнить надолго посетитель. А за это тоже какой-то бонус.
- С небольшими доработками можно тоже выдавать желаемое после лайка, доната, комментария и т.д. Вариантов масса, кто на что горазд.
Пример работы по кнопке ниже (откроется в новом окне). Пароль: 123456
Где работает защита
Работать будет почти везде: от простой HTML-странички до системы управления контентом типа WordPress или Joomla. Да, я знаю, в них и так можно поставить пароль. Например, в WordPress это делается вот так:
Но эта защита работает несколько иначе, хоть и на уровне сервера, и на много надёжнее, но нет этой «заманухи», вроде «посмотри ещё секунды и мы снова скроем от глаз твоих».
Ну и CMS разных полно, не все настолько же мощны, как WordPress. Наконец, простые сайты на HTML, простеньком PHP и лендинг пейдж никто не отменял!
Как установить и настроить
В любое место страницы вставляем такой код:
<script language="JavaScript">
pass = prompt ('Введите пароль ниже:');
if (pass=='123456') { alert ('Пароль введён верно') } else { alert ('Пароль введён не верно'), top.location.href="https://code66.ru" }</script>
В целом всё понятно по коду: можно изменить текст окна, пароль (в коде он 123456), ответы при правильном вводе и не правильном вводе пароля. Последняя ссылка — это адрес, на который будет перенаправлен посетитель, если он введёт не верный пароль.
Например, если нужно постоянно показывать снова форму ввода (как в примере), то можно ввести адрес этой же страницы. Но можно перенаправить снова на какую-то полезную страницу.
Так, если пароль выдаётся после подписки на рассылку, то можно перенаправить на форму подписки.
Важно: обязательно все кавычки одинарные должны остаться, иначе скрипт работать не будет!
При вводе в окнах редактирования разных CMS и программ, нужно для вставки переходить в режим «Текст» или «HTML», «Код» и т.д. В WordPress вставлять нужно только в этой вкладке:
Иначе редактор автоматически заменит некоторые символы на специальные, чего допустить нельзя!
Подпишись на рассылку и получай свежие кейсы первым:
