Egyszerű kapcsolatfelvételi űrlap készítése Angularjs és php segítségével. Hogyan lehet elérni, hogy a bevitelhez szükséges attribútum működjön az IE régebbi verzióiban? 6 névvel bejelentkezés szükséges
Sziasztok srácok remélem jól mennek a dolgok, ma egy nagyon hasznos oktatóanyagot fogunk elmagyarázni veletek. A mai oktatóanyagban egy egyszerű kapcsolatfelvételi űrlapot fogunk létrehozni angularJS és php használatával.
A kapcsolatfelvételi űrlap egy szabványos weboldal, amely minden webhelyen elérhető. Ez lehetővé teszi a webhely látogatói számára, hogy kapcsolatba léphessenek a webhely tulajdonosaival vagy szolgáltatóival, akik felelősek a webhely karbantartásáért. Ezért arra gondoltunk, miért ne hoznánk létre egy egyszerű kapcsolatfelvételi űrlapot Angularjs használatávalés php, hogy üzeneteket fogadhasson weboldalaktól, olvasóktól és/vagy felhasználóktól.
A kezelőfelülethez Angularjs-t, szerver oldalon pedig php-t használunk. Kódot írunk php-ban, amely egy Angular űrlapból veszi az adatokat, és e-mailben elküldi az oldal adminisztrátorának. Hozzon létre egy „kapcsolatfelvételi űrlap” nevű mappát a webalkalmazás címtárában, és hozzon létre egy mintát HTML oldalak– index.html. Most másolja ki és illessze be az alábbi kódot az index.html fájlba.
Demo - Egyszerű kapcsolatfelvételi űrlap Angularjs és php használatával Kapcsolatfelvételi űrlap angularjs és PHP használatával Az Ön neve E-mail Üzenet Küldés
Php kód küldeni EmailHozzon létre egy contact.php oldalt, és másolja be az alábbi kódot. Lent található a php kód, amely lekéri az adatokat a szögletes formáról, és elküldi e-mailben a megadott e-mail címre.
< ?php $post_data = file_get_contents("php://input"); $data = json_decode($post_data); //Just to display the form values echo "Name: " . $data->név; echo "E-mail: " . $adat->e-mail; echo "Üzenet: " . $adat->üzenet; // e-mailt küldött $to = $data->email; $subject = "Tesztlevél oldal az angularjs kapcsolatfelvételi űrlap teszteléséhez"; $üzenet = $adat->üzenet; $headers = "Feladó: " . $adat->név .. "\r\n" .. "\r\n" . "X-Mailer: PHP/" . phpversion(); //funkció PHP mail e-mailt küldeni e-mail címre mail($címzett, $tárgy, $üzenet, $fejlécek); ?>
Miért kaptam ezt az űrlapot?Jelenleg brute force támadás folyik webhelyén. A brute-force támadás jelszó kitaláló támadás. Ebben az esetben a rendszer egy jelszót választ ki a webhely adminisztrációs paneljéhez.
Webhelye feltörésének megakadályozása és biztonságának növelése érdekében további védelmet telepítettünk.
Hogyan férhetek hozzá a webhely adminisztrációs paneljéhez?Most, amikor belép a webhelye adminisztrációs paneljébe (Joomla vagy WordPress rendszeren), megjelenik egy további ablak a bejelentkezési nevének és jelszavának megadásához a „kérem, használja a vezérlőpult jelszavát” felirattal. Bejelentkezésként meg kell adnia tárhelyszolgáltatásának bejelentkezési adatait, ez így néz ki: „u1234567”. A jelszó a tárhelyszolgáltatás jelenlegi jelszava.
Az alapvető HTTP-hitelesítés átadása után egy szabványos bejelentkezési mező jelenik meg webhelye adminisztrációs panelén. Most meg kell adnia a webhely rendszergazdájának bejelentkezési nevét és jelszavát.
Hogyan működik a HTTP alapszintű hitelesítés
Amikor megadja bejelentkezési jelszavát az alap hitelesítési ablakban, a bejelentkezési és a jelszó hash értékei összehasonlításra kerülnek a speciális fájl~/etc/users , elérhető a tárhely vezérlőpultján. A fájl tartalma valahogy így néz ki: „u1234567:dm48bspxIO3rg” . Ahol az „u1234567” a bejelentkezés, a „dm48bspxIO3rg” pedig a jelszókivonat (megjegyzés: csak a hash, magát a jelszót nem!). A jelszókivonat a jelszó egy adott algoritmussal történő átalakításának eredménye.
Így amikor megadja felhasználónevét és jelszavát az alap hitelesítési ablakban, a rendszer a beírt jelszó kivonatát veszi, és összehasonlítja a ~/etc/users fájl hash értékével. Ha az értékek egyeznek, Ön hitelesítve van.
Nem tudom átadni az alapvető hitelesítést
Valószínűleg rossz jelszót ad meg. Telepítés új jelszó alap hitelesítéshez:
Ha átment az alapszintű hitelesítésen, de nem tud közvetlenül bejelentkezni Joomla vagy WordPress webhelye adminisztrációs paneljére, használja a súgót:
A webhely biztonságának növelése érdekében:
- módosítsa a szuperfelhasználói bejelentkezést egy egyedibbre. Ne használjon rövid neveket, jobb, ha az utónevet a vezetéknévvel együtt használja. Az interneten számos forrás található, ahol a legnépszerűbb bejelentkezési adatokat gyűjtik össze. Ismerkedjen meg velük, és soha ne használja őket;
- Állítson be egy összetett webhely rendszergazdai jelszót. Az összetett jelszónak tartalmaznia kell kis- és nagybetűket, számokat és további szimbólumokat, például „* - _ # :” stb. A jelszó hossza legalább 6 karakter. Lehetőleg 10 és több.
A HTTP alapszintű hitelesítési űrlap eltávolítása:
AuthType Basic AuthName "kérjük, használja a vezérlőpult jelszavát" AuthUserFile .../users Valid-user szükséges
Egy sor megjegyzéséhez tegyen egy hash szimbólumot („#”) a sor elejére, így.
Feladás dátuma: október 23., 23:15.
Felhasználónév-ellenőrzés használata a fiók biztonságának növelésére
További biztonsági intézkedésként egy felhasználónév-ellenőrző rendszert biztosítunk a fiók biztonságának fokozása érdekében bizonyos EA-oldalakon, beleértve az Ön EA-fiókját is.
- FIFA játékosok figyelmébe: ezt a funkciót szükséges a FIFA Ultimate Team szervereinek és partneralkalmazásainak eléréséhez.
Ennek a biztonsági intézkedésnek az a célja, hogy megakadályozza, hogy az emberek jelszó és felhasználónév ellenőrzése nélkül ismeretlen eszközökről bejelentkezzenek EA-fiókjába. Az értesítéseket az Ön által választott mobiltelefonjára vagy e-mail címére küldjük. A felhasználónév-ellenőrzési folyamat mindegyikhez ideiglenes digitális hozzáférési kódokat hoz létre konkrét felhasználó szükséges a fiókjába való bejelentkezéshez ismeretlen eszköz.
Felhasználónév-ellenőrzés engedélyezése
1. Nyissa meg az ea.com webhelyet, és jelentkezzen be.
2. Kattintson a felhasználónevére, majd válassza a "Fiókom" lehetőséget.
3. Válassza a Biztonság fület, ahol a Felhasználónév ellenőrzése részt találja.
4. Kattintson az Engedélyezés lehetőségre a felhasználónév-ellenőrzés engedélyezéséhez, írja be a biztonsági kérdést, és válasszon a lehetőségek közül: e-mail, személyazonossági alkalmazás vagy SMS az ellenőrző kód fogadásához.
- Ha az "E-mail" lehetőséget választja az SMS helyett, győződjön meg arról, hogy a fiókjához megadott e-mail cím egy érvényes és működő cím, amelyet rendszeresen ellenőrzi az új üzenetek után.
- A táblagépekhez és mobiltelefonokhoz készült azonosító alkalmazás lehetővé teszi, hogy ellenőrző kódokat generáljon ezeken az eszközökön a fiókjába való bejelentkezéshez.
- Válassza ki az eszköz típusát a legördülő listából, és töltse le a Google Authenticator alkalmazást Apple és Android készülékekhez, vagy Authenticator alkalmazást használó eszközökhöz operációs rendszer Ablakok.
- A PlayStation 3 és Xbox 360 rendszeren futó FIFA 15 játékosoknak nem kell további biztonsági intézkedéseket tenniük, amikor a hitelesítő alkalmazással igazolják felhasználónevüket.
5. Mostantól kap egy ellenőrző kódot, amikor ismeretlen eszközről próbál bejelentkezni. 90 naponta kap egy ellenőrző kódot, amikor megbízható eszközökről jelentkezik be fiókjába. Tehát csak te tudsz segíteni egyedi kód hozzáférhet az EA-fiókjához.
Ha szükséges, a felhasználónév megerősítése letiltható, ehhez térjen vissza a kezelőoldalra fiókotés válassza a "Letiltás" lehetőséget.*
jegyzet
- *Ne tiltsa le a felhasználónév ellenőrzését, ha FIFA Ultimate Team-et játszik, különben megtagadják a hozzáférést.
- Győződjön meg arról, hogy Ön is létrehozta és megerősítette titkos kérdésés a válasz a FIFA Ultimate Team játékhoz.
Állítsa be az azonosító alkalmazást
Azonosító alkalmazás a leginkább gyors út biztonságosan igazolja személyazonosságát. Állítson be egy azonosítási alkalmazást az Ön készülékén mobil eszköz hogy az általa generált kóddal jelentkezzen be a kétlépcsős azonosításhoz.
1. Nyissa meg a Biztonság lapot a Fiókom oldalon, és keresse meg a Felhasználónév ellenőrzése részt.
2. Kattintson az Engedélyezés gombra a felhasználónév-ellenőrzés engedélyezéséhez, válaszoljon a biztonsági kérdésre, válassza az Identity Application lehetőséget, majd kattintson a Folytatás gombra.
3. Válassza ki a kívánt telefon operációs rendszert a legördülő listából, és olvassa be a QR-kódot egy vonalkód-olvasó alkalmazással, vagy keressen a telefon alkalmazásboltjában hitelesítőt a megfelelő alkalmazáshoz: Google Authenticator Android és iOS rendszeren vagy Authenticator Windows rendszeren Telefon.
4. Nyissa meg az azonosítási alkalmazást, és válassza ki a fiók manuális hozzáadásának lehetőségét.
5. Olvassa be a QR-kódot, vagy írja be titkos kód hogy összekapcsolja személyazonossági alkalmazását EA-fiókjával.
6. Fejezze be az azonosító alkalmazás beállítását úgy, hogy beírja az Electronic Arts-fiókjához generált kódot, majd kattintson a „Felhasználónév-ellenőrzés engedélyezése” lehetőségre.
Amikor a jövőben igazolnia kell felhasználónevét:
1. Nyissa meg az azonosító alkalmazást.
2. Adja meg Electronic Arts fiókjának hatjegyű kódját.
A generált kód korlátozott ideig érvényes. Ha az aktuális kód már lejár, várjon, amíg az alkalmazás generál új kód hogy legyen elég ideje belépni.
Mit tegyek, ha nem tudom használni? mobiltelefon vagy e-mailt, ha kódra van szükségem? Lehetséges súgókódokat generálni?
Ha telefonod, személyi igazolványod ill email nem elérhetők, az egyetlen módja annak, hogy ismeretlen számítógépről bejelentkezzen EA-fiókjába, a súgókódok használatával. Ügyeljen arra, hogy biztonságos és elérhető helyen tárolja őket. Ezeket a kódokat megtekintheti és frissítheti EA-fiókjában az Origin kliens Adatvédelmi beállításai alatt vagy online.
- Kattintson a „Biztonság”, majd a „Nézet” és a „Súgókódok” elemre.*
- Használhatja az „Új kód kérése a FIFA Ultimate Teambe való bejelentkezés után” funkciót is.
*Ha kifogy a támogatási kódokból, a Fiókkezelés oldalon hozhat létre újakat.
megerősít Elérhetőség hogy megbizonyosodjon a kód helyességéről.
Ha problémába ütközik a felhasználónév-ellenőrző kóddal, ellenőrizze, hogy helyesen adta-e meg e-mail címét vagy telefonszámát. Ha azonosítót használ, győződjön meg arról, hogy a program megfelelően van telepítve.
- Ha úgy döntött, hogy kódot küld az e-mail-címére, amikor aktiválta a felhasználónév-ellenőrzést, ellenőrizheti és frissítheti e-mail címét a Fiókkezelés oldal Névjegy szakaszában vagy az Origin kliensen keresztül.
- Ha az Identity App lehetőséget választja, vonalkód vagy QR-kód segítségével szkennelheti és keresheti a kódot a ?titkos= és & között.
- Ha a felhasználónév-ellenőrzés aktiválásakor azt a lehetőséget választotta, hogy SMS-ben küldjön kódot, akkor a fiókkezelési oldal Biztonság részében vagy az Origin kliensen keresztül ellenőrizheti és frissítheti telefonszámát.
- Hozzon létre vagy erősítsen meg egy biztonsági kérdést és válaszoljon rá.
Miután megerősítette kapcsolatfelvételi adatait, lehetősége lesz a felhasználónév-ellenőrzés engedélyezésére új kód fogadásához.
A webalkalmazások készítésekor fontos komolyan venni a biztonságot, különösen akkor, ha a felhasználóktól származó adatok beszerzésével kell foglalkoznia.
Általános biztonsági szabály, hogy ne bízz senkiben, így nem bízhatsz abban, hogy a felhasználók mindig a megfelelő értékeket írják be az űrlapokba. Például ahelyett, hogy a megfelelő e-mail címet írná be a mezőbe, a felhasználó helytelen címet írhat be, vagy akár rosszindulatú adatokat is megadhat.
Amikor a felhasználói adatok érvényesítéséről van szó, azt akár a kliens oldalon (a webböngészőben), akár a szerver oldalon lehet elvégezni.
Korábban az ügyféloldali érvényesítést csak a következővel lehetett elvégezni JavaScript használatával. De minden megváltozott (vagy majdnem megváltozott), hiszen a HTML5 segítségével az érvényesítés a böngészőben is elvégezhető, anélkül, hogy JavaScriptben kellene bonyolult validációs szkripteket írni.
Űrlapérvényesítés HTML5 használatávalA HTML5 meglehetősen robusztus mechanizmust biztosít a következő címkeattribútumok alapján: típus, minta és követelmény. Ezekkel az új attribútumokkal az adatellenőrzési funkciók egy részét átrakhatja a böngészőbe.
Nézzük meg ezeket az attribútumokat, hogy megértsük, hogyan segíthetnek az űrlap érvényesítésében.
típusú attribútumEz az attribútum megmondja, hogy melyik beviteli mezőt kell megjeleníteni az adatfeldolgozáshoz, például az ismert mezőt
Néhány beviteli mező már megadja szabványos módszerekérvényesítés anélkül, hogy további kódot kellene írnia. Például ellenőriz egy mezőt, hogy megbizonyosodjon arról, hogy a megadott érték megegyezik egy érvényes e-mail cím sablonjával. Ha helytelen karaktert írnak be egy mezőbe, az űrlapot nem lehet elküldeni az érték javításáig.
Próbáljon meg játszani az e-mail mező értékeivel az alábbi demóban.
Vannak más szabványos mezőtípusok is, például a számok, URL-ek és telefonszámok érvényesítésére.
Megjegyzés: A telefonszám formátuma eltérő lehet különböző országok a telefonszámok számjegyeinek eltérése és a formátumbeli eltérések miatt. Ennek eredményeként a specifikáció nem határoz meg algoritmust a telefonszámok ellenőrzésére, így a cikk írásakor ez a lehetőség a böngészők rosszul támogatják.
Szerencsére a telefonszám-ellenőrzés elvégezhető a minta attribútum használatával, amely egy reguláris kifejezést vesz argumentumként, amelyet a következőkben nézünk meg.
minta attribútumA minta attribútum valószínűleg sok front-end fejlesztőt ugrál majd örömében. Ez az attribútum reguláris kifejezést fogad el (hasonlóan a formátumhoz reguláris kifejezések JavaScript), amely ellenőrzi a mezőben megadott adatok helyességét.
A reguláris kifejezések a szöveg elemzésére és manipulálására használt nyelvek. Gyakran használják összetett keresési és csere műveletekhez, valamint a bevitt adatok helyességének ellenőrzésére.
Manapság a reguláris kifejezések megtalálhatók a legnépszerűbb programozási nyelvekben, valamint számos szkriptnyelvben, szerkesztőben, alkalmazásban, adatbázisban és parancssori segédprogramban.
A reguláris kifejezések (RegEX) egy hatékony, tömör és rugalmas eszköz a szövegsorozatok, például az egyes karakterek, szavak vagy karakterminták egyeztetésére.
Ha egy reguláris kifejezést ad át a minta attribútumának értékeként, megadhatja, hogy mely értékek elfogadhatók ezen a területen bevitel, valamint a felhasználó tájékoztatása a hibákról.
Nézzünk meg néhány példát a reguláris kifejezések használatára a beviteli mezők értékének ellenőrzésére.
TelefonszámokAmint azt korábban említettük, a tel mező típusát a böngészők nem támogatják teljes mértékben a telefonszám-formátumok különböző országokban tapasztalható következetlenségei miatt.
Például egyes országokban a telefonszámok formátuma xxxx-xxx-xxxx , és a telefonszám ez valami ilyesmi lesz: 0803-555-8205.
A reguláris kifejezés, amelyre ez a minta illeszkedik: ^\d(4)-\d(3)-\d(4)$ . A kódban ez így írható:
Telefonszám:
Alfanumerikus értékek Az attribútum kötelezőEz egy logikai attribútum, amely azt jelzi, hogy egy adott mező értékét ki kell tölteni az űrlap elküldéséhez. Amikor hozzáadja ezt az attribútumot egy mezőhöz, a böngésző megköveteli a felhasználótól, hogy töltse ki ezt a mezőt az űrlap elküldése előtt.
Ezzel megkímél minket attól, hogy a JavaScript használatával végrehajtsuk a mezőellenőrzést, ami némi időt takaríthat meg a fejlesztőknek.
Például: vagy (XHTML-kompatibilitásért)
A fent látott demók mindegyike használja a kötelező attribútumot, így kipróbálhatja úgy, hogy megpróbálja elküldeni az űrlapot mezők kitöltése nélkül.
KövetkeztetésA böngésző támogatása az űrlapérvényesítéshez elég jó, a régebbi böngészőkhöz pedig polifilleket is használhat.
Érdemes megjegyezni, hogy önmagában a böngészőoldali érvényesítésre hagyatkozni veszélyes, mivel ezeket az ellenőrzéseket a támadók vagy a botok könnyen megkerülhetik.
Nem minden böngésző támogatja a HTML5-öt, és nem minden, a szkriptbe küldött adat származik az űrlapról. Ez azt jelenti, hogy mielőtt véglegesen elfogadnánk az adatokat a felhasználótól, ellenőrizni kell azok helyességét a szerver oldalon.
Bármely webfejlesztő számára jelenleg nincs komolyabb probléma, mint a termékének teljes böngésző-kompatibilitása. Valószínűleg ez az egyik fő feladata egy jó szakembernek: annak biztosítása, hogy weboldala mindig minden böngészőben helyesen jelenjen meg.
A szükséges paraméter, amelyet néha bevitelre használnak, nem működik az ősi IE-ben, amit egyszerűen nem lehet így hagyni. A még IE6-ot használó nyugdíjas felhasználóknak ugyanolyan egyszerű használatot kell biztosítaniuk, mint a webhely felhasználóinak Google Chrome legújabb verzió. Akik a webfejlesztők mellett vigyázhatnak rájuk.
A fájdalmas dolgokról, oh internet böngészőNormál böngészők esetében, köztük Firefox, Opera és Google Chrome, ez a feladat viszonylag egyszerű. Ezeknek a böngészőknek a régebbi verziói is ugyanolyan jól jelenítik meg a HTML-kódot, hacsak természetesen nem használnak új technológiákat. De ennek eléréséhez az Internet Explorer család böngészőiben egyszerűen herkulesi erőfeszítésekre van szükség.
Az Internet Explorer böngésző minden verziójának megvan a maga egyedi hülyesége. Ami az IE6-ban működik, előfordulhat, hogy nem működik megfelelően az IE7-ben és fordítva. A Microsoft még böngészője legújabb verziójában sem tudta legyőzni ezt az állatkertet.
Nem értem, hogy a böngészőfejlesztők miért nem tudják megnyitni és elolvasni a W3C weboldal-építési szabványokat.
Ezért webfejlesztőként egyfajta „rétegként” kell fellépnem a szeszélyes böngészők és a tudást, látványt igénylő oldallátogatók között. És nagyszerű, hogy a webfejlesztőknek ez eddig sikerült.
Tehát hogyan lehet kötelezni az IE régebbi verzióiban való munkát?JS a segítségünkre van. Korábban nem bírtam elviselni, most viszont nem látok enélkül további utat a „helyes” WEB kiterjedésében.
Az alábbi megoldást nem magam találtam ki, hanem egy polgári blogról vettem. Mivel kapzsi vagyok és polgári a blog, ezért nem adok hozzá linket.
Mindenért az fnCheckFields() függvény lesz felelős. Helyezze el a JS-kódot webhelyén:
function fnCheckFields(form_obj)( var error_msg = "Kérjük, töltse ki az összes kötelező mezőt."; var is_error = false; for (var i = 0; form_obj_elem = form_obj.elements[i]; i++) if (form_obj_elem.type "input" || form_obj_elem.type "text") if (form_obj_elem.getAttribute("kötelező") && !form_obj_elem.value) is_error = true; if (is_error) alert(error_msg); return !is_error; )
Általában az oldal elején a HEAD html címkék közé javasolt elhelyezni, de továbbra is azt javaslom, hogy az oldal aljára, a záró BODY címke elé. Így a JS kevésbé befolyásolja az oldal betöltési sebességét.
A beviteli ablaknak, ahová a szükséges paramétert be kell írni, így kell kinéznie html-ben:
Ez a szkript nagyon egyszerűen működik: a Submit gombra kattintás után a szkript minden bemenetben ellenőrzi a szükséges paraméter meglétét, és ha megtalálja, ennek megfelelően megnézi a mező beírt értékét. Ha nem ír be semmit egy ilyen bevitelbe, egy figyelmeztető ablak jelenik meg a bevitel szükségességéről. Ennek megfelelően az adatokat nem küldik sehova.
Az is nagyszerű, hogy ha egy normál böngészővel rendelkezik, amely már megtanulta megérteni ezt a paramétert a várt módon, akkor egy ilyen figyelmeztető ablak nem jelenik meg, és működik. szabványos szerszámok a böngészőhöz szükséges paraméter feldolgozása.
Oszd meg a közösségi médiában hálózatok