Створення простої контактної форми за допомогою Angularjs та php. Як змусити працювати атрибут required для input у старих версіях IE? 6 увійти за допомогою ім'я required

Привіт, хлопці сподіваються справи йдуть добре, сьогодні ми пояснюватимемо дуже корисний підручник разом з вами. На сьогоднішньому уроці ми створимо просту контактну форму, використовуючи angularJS та php.

Контактна форма є стандартною веб-сторінкою, яка доступна на кожному сайті. Це дозволяє відвідувачам сайту зв'язатися з власниками сайтів або постачальниками послуг, які відповідають за підтримку цього веб-сайту. Так що ми думаємо, чому б не створити просту контактну форму за допомогою Angularjs та php, щоб отримувати повідомлення від веб-сайтів, читачів та/або користувачів.

Ми використовуємо Angularjs для переднього плану та php на стороні сервера. Ми будемо писати код на php, який приймає дані з Angular форми та відправляє електронною поштою адміністратору сайту. Створіть папку з ім'ям “contact-form” у вашому веб-каталозі додатків та створіть зразок оформлення сторінки HTML- index.html. Тепер скопіюйте та вставте код нижче у файл index.html.

Php код для надсилання електронної пошти

Створіть сторінку contact.php і скопіюйте код, наведений нижче. Нижче наведено php-код, який витягуватиме дані з angular форми та надсилатиме електронною поштою, за вказаною адресою електронної пошти.

< ?php $post_data = file_get_contents("php://input"); $data = json_decode($post_data); //Just to display the form values echo "Name: " . $data->name; echo "Email:". $ data-> email; echo "Message:". $ data-> message; // sned an email $to = $data->email; $subject = "Тестовий лист сайт для тестування angularjs контактної форми$message = $data->message; $headers = "From: " . $data->name .. "\r\n" .. "\r\n" . "X-Mailer: PHP/" . phpversion(); //функція PHP mailдля надсилання електронної пошти на адресу електронної пошти mail($to, $subject, $message, $headers); ?>

Чому мені встановили цю форму

На даний момент на ваш сайт проводиться Brute-force атака. Brute-force атака - це атака по підбору паролів. В даному випадку відбувається підбір пароля до адміністративної панелі вашого сайту.

Щоб не допустити злому вашого сайту та підвищити його безпеку, нами було встановлено додатковий захист.

Як я тепер можу отримати доступ до адмін-панелі сайту

Тепер при доступі до адміністративної панелі вашого сайту (на Joomla або WordPress) з'являтиметься додаткове вікно введення логіну та пароля з написом «please use your control panel password». Як логін необхідно ввести логін вашої послуги хостингу, він має вигляд «U1234567». Як пароль — поточний пароль до вашої послуги хостингу.

Після проходження базової HTTP-автентифікації перед вами відкриється стандартне поле для авторизації в адмін-панелі вашого сайту. Тепер вам потрібно буде ввести логін і пароль адміністратора сайту.

Як працює базова HTTP-автентифікація

При введенні логіна-паролю у вікно базової автентифікації значення логіну та хеша паролябудуть порівнюватися зі значеннями в спеціальному файлі ~/etc/users, доступним на панелі керування хостингом. Вміст файлу виглядає приблизно так: «u1234567:dm48bspxIO3rg». Де "u1234567" - логін, а "dm48bspxIO3rg" - хеш пароля(Зверніть увагу: тільки хеш, а не сам пароль!). Хеш пароля – це результат перетворення пароля за певним алгоритмом.

Таким чином, коли ви вводите логін та пароль у вікно базової автентифікації, від введеного пароля береться хеші порівнюється зі значенням хеша у файлі ~/etc/users. Якщо значення збігаються, ви проходите автентифікацію.

У мене не вдається пройти базову автентифікацію

Ймовірно, ви вводите неправильний пароль. Встановіть Новий парольдля базової аутентифікації:

Якщо ви пройшли базову автентифікацію, але не можете увійти безпосередньо в адмін-панель сайту Joomla або WordPress, скористайтесь довідкою:

Як підвищити захист сайту від Brute-Force атак?

Для підвищення захисту сайту:

• змініть логін суперкористувача на більш унікальний. Не використовуйте короткі імена, якщо ви будете використовувати ім'я разом з прізвищем. У мережі Інтернет є безліч ресурсів, де зібрані найбільш популярні логіни. Ознайомтеся з ними та ніколи не використовуйте їх;
• установіть складний пароль адміністратора сайту. Складний пароль повинен містити літери верхнього та нижнього регістру, цифри та додаткові символи, такі як * - _ # : і т.д. Довжина пароля - не менше шести символів. Бажано від 10 і від.

Як прибрати форму базової HTTP-автентифікації?

Щоб прибрати форму базової HTTP-автентифікації:

AuthType Basic AuthName "дозволяє використовувати свій контрольний panel password" AuthUserFile .../users Require valid-user

Для коментування рядка поставте символ решітки («#») на початок рядка, так.

Posted October 23rd at 11:15pm.

Використання підтвердження імені користувача для підвищення рівня безпеки облікового запису

В якості додаткового заходу безпеки ми пропонуємо вам систему підтвердження імені користувача, яка має підвищити безпеку облікового запису на деяких сторінках EA, включаючи вашу сторінку облікового запису EA.

• До уваги гравців у FIFA: дана функціянеобхідна для доступу до серверів FIFA Ultimate Team та партнерських програм.

Цей захисний захід покликаний захистити ваш обліковий запис EA від входу до нього з невідомих пристроїв без пароля та підтвердження вашого імені користувача. Повідомлення будуть надходити на мобільний телефон або електронну пошту на ваш вибір. Під час підтвердження імені користувача створюються тимчасові цифрові коди доступу для кожного конкретного користувача, необхідні для входу в обліковий запис з невідомого пристрою.

Увімкнення підтвердження імені користувача

1. Зайдіть на ea.com та виконайте вхід.

2. Натисніть на ім'я користувача, а потім виберіть пункт «Мій обліковий запис».

3. Виберіть вкладку «Безпека», де можна знайти розділ «Підтвердження імені користувача».

4. Натисніть «Увімкнути» для активації функції підтвердження імені користувача, введіть відповідь на контрольне запитання та виберіть один із варіантів: електронна пошта, програма для ідентифікації або SMS для отримання коду підтвердження.

• Якщо ви оберете опцію «Електронна пошта», а не SMS, переконайтеся, що вказана для облікового запису адреса електронної пошти - це дійсна та працююча адреса, яку ви регулярно перевіряєте на наявність нових повідомлень.
• Додаток для ідентифікації планшета та мобільного телефону дозволяє генерувати на цих пристроях коди підтвердження для входу в обліковий запис.
• Виберіть тип пристрою зі списку та завантажте Google Authenticator для пристроїв на базі Apple і Android або Authenticator для пристроїв, які використовують операційну систему Windows.
• Гравцям у FIFA 15 на PlayStation 3 та Xbox 360 не знадобиться вживати додаткових заходів безпеки під час підтвердження імені користувача з програмою для ідентифікації.

5. Тепер ви отримуватимете код підтвердження під час спроби входу з невідомого пристрою. Кожні 90 днів ви отримуватимете код підтвердження при вході до облікового запису з довірених пристроїв. Таким чином, тільки ви за допомогою унікального кодуВи можете отримати доступ до вашого облікового запису EA.

При необхідності підтвердження імені користувача можна вимкнути, поверніться на сторінку керування. обліковим записомта виберіть «Вимкнути».*

Примітка

• *Не відключайте підтвердження імені користувача, якщо ви граєте у FIFA Ultimate Team, інакше вам буде відмовлено у доступі.
• Переконайтеся, що ви також створили та підтвердили Секретне питаннята відповідь на нього для гри FIFA Ultimate Team.

Налаштуйте програму для ідентифікації

Додаток для ідентифікації – це самий швидкий спосіббезпечної перевірки вашої особи. Налаштуйте програму для ідентифікації на своєму мобільному пристроїщоб входити за допомогою згенерованого ним коду для двоступінчастої ідентифікації.

1. Відкрийте вкладку «Безпека» на сторінці «Мій обліковий запис» та знайдіть розділ «Підтвердження імені користувача».

2. Натисніть "Увімкнути", щоб увімкнути систему "Підтвердження імені користувача", дайте відповідь на контрольне запитання, виберіть "Додаток для ідентифікації" та натисніть "Продовжити".

3. Виберіть у випадаючому списку потрібну вам операційну систему телефону і проскануйте QR-код за допомогою програми для читання штрих-кодів або знайдіть у магазині програм для вашого телефону на запит authenticator відповідний додаток: Google Authenticator на Android та iOS або Authenticator на Windows Phone.

4. Відкрийте програму ідентифікації та виберіть додати обліковий запис вручну.

5. Проскануйте QR-код або введіть секретний код, щоб зв'язати програму для ідентифікації з обліковим записом EA.

6. Завершіть налаштування програми для ідентифікації, вказавши згенерований ним для облікового запису Electronic Arts код і натиснувши «Увімкнути підтвердження імені користувача».

Коли вам знадобиться підтвердити ім'я користувача у майбутньому:

1. Відкрийте програму для ідентифікації.

2. Введіть шестизначний код для облікового запису Electronic Arts.

Згенерований код дійсний протягом обмеженого часу. Якщо час дії поточного коду вже закінчується, зачекайте, поки програма згенерує новий код, щоб мати достатньо часу на його введення.

Що робити, якщо я не можу скористатися мобільним телефономабо електронною поштою, коли мені потрібний код? Чи можна створити допоміжні коди?

Якщо ваш телефон, ідентифікатор або електронна скринькане доступні для вас, єдиний спосіб увійти в обліковий запис EA з невідомого комп'ютера - використання допоміжних кодів. Переконайтеся, що зберігайте їх у надійному та доступному для вас місці. Ви можете переглядати та оновлювати дані коди в обліковому записі EA у розділі «Налаштування конфіденційності» клієнта Origin або в режимі он-лайн.

• Натисніть «Безпека», потім «Перегляд» та «Допоміжні коди».*
• Ви також можете скористатися функцією «Запит нового коду після входу до FIFA Ultimate Team».

*Якщо у вас закінчилися допоміжні коди, ви можете згенерувати нові на сторінці «Керування обліковим записом».

Підтвердьте контактну інформацію, щоб переконатися у вірності коду.

Якщо у вас виникли труднощі з кодом підтвердження імені користувача, переконайтеся, що адресу електронної пошти або номер телефону введено правильно. Під час використання ідентифікатора переконайтеся, що програма правильно встановлена.

• Якщо під час активації підтвердження імені користувача ви вибрали опцію надсилання коду на пошту, то можете перевірити та оновити свою адресу електронної пошти у розділі «Про мене» на сторінці «Управління обліковим записом» або через клієнт Origin.
• Якщо ви вибрали «Додаток для ідентифікації», ви можете скористатися штрих-кодом або QR-кодом для сканування та пошуку коду між?secret= і &.
• Якщо під час активації підтвердження імені користувача ви вибрали опцію надсилання коду по SMS, то можете перевірити та оновити свій номер телефону в розділі «Безпека» на сторінці керування обліковим записом або через клієнт Origin.
• Створити чи підтвердити секретне запитання та відповідь.

Як тільки ви підтвердите контактні дані, у вас з'явиться можливість увімкнути підтвердження імені користувача для отримання нового коду.

При створенні веб-додатків важливо серйозно ставитися до безпеки, особливо коли доводиться мати справу з отриманням даних від користувачів.

Загальне правило безпеки - не довіряти нікому, тому не можна сподіватися на те, що користувачі завжди будуть вводити у форми правильні значення. Наприклад, замість введення в поле правильної email-адреси, користувач може ввести невірну адресу, або взагалі якісь шкідливі дані.

Коли справа доходить до валідації даних, її можна проводити як на стороні клієнта (у веб-браузері), так і на серверній стороні.

Раніше валідацію на стороні клієнта можна було провести лише за допомогою JavaScript. Але все змінилося (або майже змінилося), тому що за допомогою HTML5 валідацію можна проводити засобами браузера без необхідності писати складні скрипти для валідації на JavaScript.

Валідація форм за допомогою HTML5

HTML5 надає досить надійний механізм, заснований на наступних атрибутах тега : type , pattern та require . Завдяки цим новим атрибутам можна перекласти деякі функції перевірки даних на плечі браузера.

Давайте розглянемо ці атрибути, щоб зрозуміти, як вони можуть допомогти у валідації форм.

Атрибут type

Цей атрибут каже, яке поле введення відображатиме для обробки даних, наприклад, вже знайоме поле типу

Деякі поля введення вже надають стандартні способивалідації без необхідності писати додатковий код. Наприклад, перевіряє поле на те, що введене значення відповідає шаблону правильної адреси електронної пошти. Якщо введено неправильний символ, форму не можна надіслати, доки значення не буде виправлено.

Спробуйте погратися зі значеннями поля email у наведеній нижче демонстрації.

Також існують інші стандартні типи полів, як , і для валідації чисел, URL'ів та телефонних номерів відповідає.

Примітка: формат телефонного номера відрізняється від різних країнчерез невідповідність кількості цифр у телефонних номерах та різниці форматів. Як результат, специфікація не визначає алгоритм перевірки телефонних номерів, тому на час написання статті дана можливістьслабо підтримується браузерами.

На щастя для нас, валідацію телефонних номерів можна провести за допомогою атрибута pattern , який сприймає як аргумент регулярний вираз, який ми розглянемо далі.

Атрибут pattern

Атрибут pattern, швидше за все, змусить багатьох фронтенд-розробників стрибати від радості. Цей атрибут набуває регулярного виразу (аналогічного формату регулярних виразів JavaScript), за яким перевірятиметься коректність введених у поле даних.

Регулярні вирази – це мова, яка використовується для розбору та маніпуляції текстом. Вони часто використовуються для складних операцій пошуку та заміни, а також для перевірки коректності введених даних.

На сьогоднішній день регулярні вирази включені в більшість популярних мов програмування, а також у багато скриптових мов, редакторів, додатків, баз даних, і утиліти командного рядка.

Регулярні вирази (RegEX) є потужним, коротким та гнучким інструментом для зіставлення рядка тексту, на зразок окремих символів, слів або шаблонів символів.

Передавши регулярне вираз як значення атрибуту pattern можна вказати, які значення прийнятні для даного полявведення, а також проінформувавши користувача про помилки.

Давайте подивимося на кілька прикладів використання регулярних виразів для валідації значення полів введення.

Телефонні номери

Як згадувалося раніше, тип поля tel не повністю підтримується браузерами через невідповідність форматів телефонних номерів у різних країнах.

Наприклад, у деяких країнах формат телефонних номерів представляється у вигляді xxxx-xxx-xxxx , і сам номер телефонубуде щось на зразок цього: 0803-555-8205 .

Регулярне вираз, якому відповідає даний шаблон, таке: ^\d(4)-\d(3)-\d(4)$ . У коді це можна записати так:

Phone Number:

Літерно-цифрові значення

Атрибут required

Це атрибут булевого типу, що використовується для вказівки того, що значення цього поля обов'язково заповнити для того, щоб відправити форму. При додаванні цього атрибута полю браузер вимагатиме від користувача заповнити це поле перед надсиланням форми.

Це позбавляє нас реалізації перевірки полів за допомогою JavaScript, що може зберегти трохи часу розробникам.

Наприклад: або (для сумісності з XHTML)

У всіх демках, які ви бачили вище, використовують атрибут required, так що ви можете спробувати його в дії, спробувавши надіслати форму без заповнення полів.

Висновок

Підтримка валідації форм браузерами досить хороша, а для старих браузерів можна використовувати поліфіли.

Слід зазначити, що сподіватися на валідацію тільки на стороні браузера небезпечно, оскільки ці перевірки можуть легко обійтися зловмисниками або ботами.

Не всі браузери підтримують HTML5 і не всі дані, надіслані вашому скрипту, прийдуть з вашої форми. Це означає, що перед тим, як остаточно прийняти дані від користувача, необхідно перевірити їхню коректність на стороні сервера.

Для будь-якого web-розробника поки що немає більш серйозної проблеми, як повна кросбраузерність його продукту. Напевно, це одне з основних завдань хорошого фахівця: добитися того, щоб його сайт завжди правильно відображався у всіх браузерах.

Параметр required, який іноді використовується для введення, не працює в стародавніх IE, що просто не можна так залишити. Користувачі-пенсіонери, які досі користуються IE6, повинні однаково легко працювати з вашим сайтом, поряд з користувачами. Google Chrome останньої версії. Хто, окрім web-розробників, про них може подбати.

Про наболіле, про Internet Explorer

Для звичайних браузерів, до яких можна віднести Firefox, Opera і Google Chrome, це завдання відносно легке. Навіть давні версії цих браузерів однаково добре відображають HTML-код, якщо в ньому звичайно ж не використовуються якісь нові технології. Але щоб добитися подібного у браузерах сімейства Internet Explorer, Потрібні просто титанічні зусилля.

Кожна версія браузера Internet Exlorer має свою унікальну тупість. Що працює в IE6, може як годиться не працювати в IE7 і навпаки. Цей зоопарк компанії Microsoft не вдалося побороти навіть у останній версії свого браузера.

Зрозуміти, чому розробники браузерів не можуть просто взяти відкрити і почитати стандарти W3C для сайтобудування, я не можу.

Тому мені, як web-розробнику, доводиться виступати деяким «прошарком» між примхливими браузерами і відвідувачами сайтів, які вимагають знань і видовищ. І чудово, що web-розробникам поки що це вдається.

Так, як же змусити працювати required у старих версіях IE?

На допомогу нам приходить JS. Раніше я терпіти його не міг, а тепер не бачу подальшого шляху без нього на просторі «правильного» WEB.

Рішення наведене нижче я вигадав не сам, а взяв із буржуазного блогу. Так як я жадібний, а блог буржуйський, я не наводитиму на нього посилання.

За все у нас буде відповідати функція fnCheckFields(). Розмістіть на вашому сайті JS-код:

Зазвичай рекомендують розміщувати його між html-тегами HEADна початку сторінки, але я б рекомендував все ж розміщувати його в самому низу сторінки до тега, що закривається BODY. Таким чином, JS менше впливає на швидкість завантаження сторінки.

Вікно введення, де має вводитися обов'язковий параметр, на html-мові має виглядати так:

Цей скрипт працює дуже просто: після натискання кнопки Відправити, скрипт перевіряє всі інпути на наявність параметра required і якщо знаходить його, відповідно дивиться на введене значення цього поля. Якщо в такий інпут нічого не введено, виводиться попереджувальне вікно про необхідність введення. Дані відповідно нікуди не надсилаються.

Чудово ще й те, що якщо у Вас нормальний браузер, який вже навчився розуміти цей параметр як належить, такого вікна, що попереджає, не спливе і будуть працювати стандартні інструментиобробки параметра required для вашого браузера.

Розповісти в соц. мережах