바보 보호. 사용자 데이터 보안 6 이름이 필요한 로그인

여러분, 일이 순조롭게 진행되기를 바랍니다. 오늘 우리는 여러분과 함께 매우 유용한 튜토리얼을 설명할 것입니다. 오늘의 튜토리얼에서는 angularJS와 php를 사용하여 간단한 문의 양식을 만들 것입니다.

문의 양식모든 사이트에서 사용할 수 있는 표준 웹 페이지입니다. 이를 통해 사이트 방문자는 사이트 소유자 또는 이 웹사이트 유지 관리를 담당하는 서비스 제공업체에 문의할 수 있습니다. 그래서 우리는 Angularjs와 php를 사용하여 웹 사이트, 독자 및/또는 사용자로부터 메시지를 받는 간단한 문의 양식을 만드는 것이 어떨까 생각합니다.

우리는 프런트 엔드에 Angularjs를 사용하고 서버 측에 php를 사용하고 있습니다. Angular 양식에서 데이터를 가져와 사이트 관리자에게 이메일로 보내는 PHP 코드를 작성할 것입니다. 애플리케이션 웹 디렉토리에 "contact-form"이라는 폴더를 만들고 템플릿을 만듭니다. HTML 페이지– index.html. 이제 아래 코드를 복사하여 index.html 파일에 붙여넣으십시오.

데모 - Angularjs 및 PHP를 사용한 간단한 문의 양식

Angularjs 및 PHP를 사용한 문의 양식

이메일을 보내는 PHP 코드

contact.php 페이지를 만들고 아래 코드를 복사하여 붙여넣습니다. 다음은 각도 형식에서 데이터를 가져와 이메일을 통해 주어진 이메일 주소로 보내는 PHP 코드입니다.

< ?php $post_data = file_get_contents("php://input"); $data = json_decode($post_data); //Just to display the form values echo "Name: " . $data->이름; echo "이메일: " . $데이터->이메일; 에코 "메시지: " . $data->메시지; // 이메일을 sned $to = $data->email; $subject = "angularjs 문의 양식 테스트를 위한 테스트 이메일 사이트"; $메시지 = $데이터->메시지; $headers = "발신자: " . $data->이름 .. "\r\n" .. "\r\n" . "XMailer: PHP/" . php버전(); // 이메일 주소로 이메일을 보내는 PHP 메일 함수 mail($to, $subject, $message, $headers); ?>

이 양식을 설치한 이유

귀하의 웹사이트에서 무차별 대입 공격이 현재 진행 중입니다. 무차별 대입 공격은 암호 추측 공격입니다. 이 경우 사이트의 관리 패널에 대한 비밀번호가 선택됩니다.

귀하의 사이트가 해킹당하는 것을 방지하고 보안을 강화하기 위해 추가 보호 장치를 설치했습니다.

지금 사이트의 관리자 패널에 액세스하려면 어떻게 해야 합니까?

이제 Joomla 또는 WordPress에서 사이트의 관리 패널에 액세스할 때 "제어판 암호를 사용하십시오"라는 문구와 함께 추가 로그인 및 암호 입력 창이 나타납니다. 로그인으로 호스팅 서비스의 로그인을 입력해야 합니다. "u1234567". 암호로 호스팅 서비스의 현재 암호입니다.

기본 HTTP 인증을 통과하면 사이트의 관리자 패널에 표준 인증 필드가 표시됩니다. 이제 사이트 관리자의 사용자 이름과 비밀번호를 입력해야 합니다.

HTTP 기본 인증 작동 방식

기본 인증 창에 로그인 비밀번호를 입력하면 로그인 값과 암호 해시특수 파일의 값과 비교됩니다. ~/등/사용자, 호스팅 제어판에서 사용할 수 있습니다. 파일 내용은 다음과 같습니다. "u1234567:dm48bspxIO3rg". 여기서 "u1234567"은 사용자 이름이고 "dm48bspxIO3rg"는 암호 해시(참고: 암호 자체가 아니라 해시만!). 암호 해시는 특정 알고리즘에 따라 암호를 변환한 결과입니다.

따라서 기본 인증 창에서 사용자 이름과 비밀번호를 입력하면 입력한 비밀번호가 사용됩니다. 해시시파일의 해시 값과 비교 ~/등/사용자. 값이 일치하면 인증됩니다.

기본 인증을 통과할 수 없습니다.

잘못된 암호를 입력했을 수 있습니다. 설치하다 새 비밀번호기본 인증:

기본 인증을 통과했지만 Joomla 또는 WordPress 사이트 관리자 패널에 직접 로그인할 수 없는 경우 다음 도움말을 사용하십시오.

Brute-force 공격으로부터 사이트 보호를 강화하는 방법은 무엇입니까?

사이트 보안을 개선하려면:

수퍼유저 로그인을 더 고유한 것으로 변경하십시오. 짧은 이름을 사용하지 마십시오. 성과 함께 이름을 사용하는 것이 좋습니다. 인터넷에는 가장 인기 있는 로그인이 수집되는 많은 리소스가 있습니다. 그것들을 숙지하고 절대 사용하지 마십시오.
복잡한 사이트 관리자 암호를 설정하십시오. 복잡한 비밀번호대문자와 소문자, 숫자 및 "* - _ # :" 등의 추가 문자를 포함해야 합니다. 암호 길이는 6자 이상이어야 합니다. 바람직하게는 10 이상.

HTTP 기본 인증 양식을 제거하는 방법은 무엇입니까?

HTTP 기본 인증 양식을 제거하려면:

AuthType 기본 AuthName "제어판 암호를 사용하십시오" AuthUserFile .../users 유효한 사용자 필요

줄을 주석 처리하려면 다음과 같이 줄 시작 부분에 파운드 기호("#")를 입력합니다.

다음 페이지가 필요합니다.

등록 양식이 있는 등록 페이지
계정 활성화 페이지
비밀번호 복구 페이지
비밀번호 재설정 페이지

사이트 로그인 양식은 사이트의 모든 페이지(예: 헤더)에 배치됩니다.

이것은 우리가 얻고자 하는 등록 페이지입니다.

여기에 입력 계정사용자를 등록할 그룹을 결정합니다. 또한 식별(사용자 이름)을 위한 필드는 이메일이 됩니다.

페이지에 스니펫 호출 추가 등록하다:

[[!등록하다? &submitVar=`register-btn` &activationResourceId=`27` &activationEmailTpl=`Email.Activation` &activationEmailSubject=`example.com에 등록되었습니다` &placeholderPrefix=`reg.` &successMsg=`

등록해 주셔서 감사합니다. 이메일로 [[!+reg.이메일]]계정을 활성화할 수 있는 링크가 포함된 이메일이 전송되었습니다. 이 링크를 따라 등록을 완료하십시오.

` &usernameField=`email` &usergroupsField=`reg_type` &customValidators=`valueIn` &validate=`username:blank, reg_type:valueIn=^Readers;Writers;Idlers ^, fullname:required:minLength=^6^, password:required:minLength =^6^, password_confirm:password_confirm=^password^, email:required:email` ]] [[!+error.message:default=`[[!$Register.Form]]`]]

모든 등록 태그가 필요합니다. 반드시캐시되지 않은 전화. FormIt 스니펫으로 양식을 처리할 때도 동일한 규칙이 적용됩니다.

호출 매개변수를 분석해 보겠습니다.

&submitVar=`등록-btn`- 태그의 이름 속성을 지정합니다. 입력. 즉, 스니펫은 양식이 특정 이름의 버튼과 함께 제출된 경우에만 작동합니다.

&activationResourceId=`42`- 앞으로 42는 사용자를 활성화할 페이지의 ID입니다.

&activationEmailTpl='이메일.활성화'- 활성화 문자가 있는 청크, 나중에 자세히 설명합니다.

&placeholderPrefix=`등록.`- 드문 예외(나중에 자세히 설명)를 제외하고 이 스니펫에서 생성된 모든 자리 표시자는 "reg."로 시작해야 함을 나타냅니다.

&successMsg- 양식이 성공적으로 제출되었을 때 표시될 메시지입니다. 양식 및 기타 태그의 값을 포함할 수 있습니다. 이 메시지는 자리 표시자에 기록됩니다. [[!+오류.메시지]].다소 이상한 이름이며 현재 문서에 오류가 있습니다. 거기에 쓰여있다 [[!+reg.error.message]],그러나 이것이 사실이 아니라는 것은 구성 요소 코드에서 따릅니다.

&usernameField=`이메일`- 이메일 필드가 사용자 이름으로 사용됨을 나타냅니다.

&usergroupsField=`reg_type`- 새 사용자가 추가될 그룹을 설정하는 필드를 정의합니다.

&customValidators=`valueIn`- 수동으로 생성할 추가 유효성 검사기를 나타냅니다.

&확인- 유효성 검사기는 각 필드에 대해 쉼표로 구분하여 지정하며, 하나의 필드에 여러 유효성 검사기가 필요한 경우에도 콜론으로 구분됩니다. 별도로 분석해 보겠습니다.

사용자 이름:공백- 스팸에 대한 간단한 함정으로, 사용자 이름 필드가 비어 있어야 함을 의미합니다.

reg_type:valueIn=^Readers;Writers;Idlers^- 가능한 그룹을 표시된 세 개로 제한합니다. 원래 배포판에는 그런 것이 없으며 악의적인 해커는 예를 들어 Administrator 그룹 아래에 등록할 수 있습니다(이름을 변경하지 않은 경우).

전체 이름:필수:최소 길이=^6^- 전체 이름 필드는 비어 있지 않아야 하며 최소 6자를 포함해야 합니다.

암호:필수:최소 길이=^6^- 비밀번호와 유사합니다.

password_confirm:password_confirm=^비밀번호^- 비밀번호가 일치해야합니다.

이메일:필수:이메일– 이메일은 비어 있지 않아야 하며 실제 메일이어야 합니다.

설계 [[!+error.message:default=`[[!$Register.Form]]`]]방금 페이지에 들어왔거나 잘못 입력한 경우 양식의 성공적인 제출 또는 양식 청크에 대한 메시지를 표시합니다.

위의 유효성 검사기를 만들어 봅시다. 값 입력. 이렇게 하려면 다음 이름으로 스니펫을 만듭니다. 값 입력그리고 다음 코드:

$valueIn = 폭발(";", $param); return in_array($value, $valueIn);

이제 청크를 만들어야 합니다. 등록.양식 . 이 경우 다음과 같습니다(Bootstrap 3 사용).

이 양식에서 저는 MODX에 대한 몇 가지 사항을 언급할 것입니다.

– 양식은 표시된 페이지와 동일한 페이지에서 처리됩니다.

실패할 경우 사용자가 모든 것을 다시 입력할 필요가 없도록 양식에서 받은 값을 설정합니다.
[[!+reg.error.email:notempty=`[[!+reg.error.email]]`]]- 다시 실패하면 필드 아래에 오류 메시지가 표시됩니다.

– 이전에 속성을 설정한 경우 버튼 이름을 지정해야 합니다. &submitVar.

이제 청크를 만드는 일이 남아 있습니다. 이메일.활성화 사이트에서 사용자에게 보내는 이메일:

등록해주셔서 감사합니다! 계정을 활성화하려면 아래 링크를 따르십시오.

Example.Com에서 계정 활성화

활성화되면 이메일과 비밀번호로 로그인할 수 있습니다.

로그인:[[+이메일]]

비밀번호:[[+비밀번호]]

여기에서 양식 필드 이름과 함께 자리 표시자를 사용할 수 있습니다. 이미 "reg." 없이 작성되어 있습니다. 자리 표시자도 추가 [[+확인 URL]], 활성화 링크가 이미 생성된 경우 아무 작업도 수행할 필요가 없습니다.

구성 요소를 사용하여 새 계정을 등록하는 기술의 마지막 터치 로그인활성화 페이지를 생성합니다. 이 페이지에는 빈 템플릿을 사용하며 페이지 콘텐츠에서는 태그 호출만 지정하면 됩니다.
[[!확인등록? &redirectTo=`1`]]
여기서 1은 활성화에 성공한 경우 사용자가 이동할 페이지의 식별자입니다. 이 경우 이미 로그인되어 있습니다.

사용자 프로필 로그인 설정을 시작하겠습니다. 승인 양식은 간단합니다.

올바른 위치에서 호출하여 추가해 보겠습니다.
[[!로그인? &loginTpl=`Auth.Login` &logoutTpl=`Auth.Logout` &errTpl=`Auth.Login.Error` &actionKey=`action` &loginKey=`login` &redirectToPrior=`1` &logoutResourceId=`1`]]
여기에서 위에서 그린 로그인 양식으로 청크를 지정합니다( &loginTpl=`Auth.Login`), 인증된 사용자에게 표시되는 코드가 있는 청크( &logoutTpl=`인증.로그아웃`), 로그인 오류 출력이 있는 작은 청크( &errTpl=`Auth.Login.Error`). 옵션은 다음과 같습니다.

&actionKey=`액션`그리고 &loginKey=`로그인`- 요청 처리를 위한 주요 식별자. 첫 번째는 POST 요청의 매개변수 이름을 의미하고 두 번째는 해당 값을 의미합니다. 즉, 스니펫이 로그인처리했습니다.

&redirectToPrior=`1`- 로그인 후 입력한 페이지로 리디렉션됨을 의미합니다.

&logoutResourceId=`1`- 프로필 탈퇴 시 아이디 1번 페이지로 이동합니다.

청크 인증 로그인 :

로그인
등록

비밀번호
비밀번호를 잊어 버렸습니까?

입구

[[!+오류]]
양식은 동일한 페이지에서 처리됩니다. 오류가 발생하면 자리 표시자의 양식 아래에 표시됩니다. [[!+오류]].또한 등록 및 암호 복구를 통해 리소스에 대한 링크를 기억해야 합니다. 이메일 이름 = "사용자 이름" 필드에서 스니펫이 메일을 복제한 필드입니다. 등록하다, 사용자에게 고유합니다.

청크 인증.로그아웃:
[]` &tpl=`User.HeaderBadge` &innerJoin=`("modUserGroupMember":("alias":"modUserGroupMember","on":"modUser.id = modUserGroupMember.member"), "modUserGroup":("alias" :"modUserGroup", "on":"modUserGroupMember.user_group = modUserGroup.id"))` &select=`("modUserGroup":("group_name": "modUserGroup.name"))` ]]

프로필 종료

모든 사용자가 동일한 그룹에 있는 경우 이 부분은 선택 사항입니다. 그러나 사용자 그룹을 표시하기 위해서는 로그인 구성 요소에 포함된 스니펫의 표준 기능으로는 충분하지 않습니다. 간단한 스니펫을 작성하여 그룹 이름을 얻을 수 있습니다. xPDO또는 기성 스니펫을 사용할 수 있습니다. pdoUsers패키지에 포함 pdo도구. 이 스니펫에 지정된 매개변수:

&users=`[[+modx.user.id]]`- 현재 인증된 사용자만 선택합니다.

&tpl=`User.HeaderBadge`- 사용자에 대한 간략한 정보를 표시할 청크.

&inner조인– 사용자 그룹 테이블 조인이 포함된 JSON, 설명은 기사 범위를 벗어납니다. 가장 중요한 것은 J가 작동한다는 것입니다.

&선택하다– group_name 별칭이 있는 modUserGroup.name 필드를 선택 항목에 추가하는 JSON.

사용자 배지 User.HeaderBadge가 있는 청크 :

다음으로 로그인했습니다. [[+그룹_이름]][[+전체 이름]] 개인 계정

사용자 그룹이 필요하지 않은 경우 이 청크의 내용을 청크에 직접 삽입할 수 있습니다. 인증 로그아웃 . 여기에서 modUser 및 modUserProfile 필드와 다음을 사용하여 자리 표시자를 표시할 수 있습니다. pdoUsers추가된 필드 그룹 이름.

청크에서 인증.로그인.오류 간단한 오류 출력:

[[+메시지]]

로그인이 완료되었습니다. 이 시점에서 사용자는 성공적으로 등록하고 로그인할 수 있습니다. 하지만 비밀번호를 잊어버리면 어떻게 될까요? 이 경우 그는 "비밀번호를 잊으셨습니까?" 링크를 클릭합니다. 비밀번호 복구 페이지로 이동합니다. 이 페이지는 미리 만들어서 거기에 전화를 겁니다.
[[!비밀번호를 잊으 셨나요? &tpl=`Auth.ForgotPass.Form` &submitVar=`forgotpass` &errTpl=`Auth.Login.Error` &sentTpl=`Auth.ForgotPass.Sent` &emailTpl=`Email.ForgotPass` &emailSubject=`예제에서 계정에 대한 액세스 복원. Com` &resetResourceId=`29`]]
이 호출의 매개변수를 분석해 보겠습니다.

&tpl=`Auth.ForgotPass.Form`- 사용자가 자신의 이메일을 입력할 양식의 청크.

&submitVar=`패스를 잊어버렸습니다`- ForgotPassword 스니펫의 경우 비어 있지 않은 값에 관계없이 동일한 이름의 매개변수가 서버에 전달되는 것으로 충분합니다.

&errTpl=`Auth.Login.Error` - 로그인 스니펫과 유사한 오류 출력

&sentTpl=`Auth.ForgotPass.Sent`- 이 청크에는 비밀번호 변경을 위한 이메일 전송에 성공했을 때 표시될 내용이 포함되어 있습니다.

&emailTpl=`이메일.비밀번호`- 실제 편지는 여기에 포함되어 있습니다.

&메일 제목=`Example.Com 사이트의 계정에 대한 액세스 복원` - 문자 헤더.

&resetResourceId=`29`- 암호가 새 암호로 재설정될 리소스의 식별자입니다.

큰 덩어리 Auth.ForgotPass.Form:

이메일 [[+loginfp.오류]]

버튼을 클릭하면 선택한 이메일 주소로 비밀번호 복구 이메일이 전송됩니다.

새로운 기능은 자리 표시자에 오류를 표시하는 또 다른 방법입니다. [[+loginfp.오류]]그리고 암호를 재설정하는 것이 이 형식이라는 매개 변수를 전달합니다. .

Auth.ForgotPass.Sent:
계정 복구 정보가 지정된 이메일 주소로 전송되었습니다. [[+이메일]]. 여기에서 위 양식의 데이터를 사용할 수 있습니다. 이메일.비밀번호 분실: [[+이름]], 새 암호를 활성화하려면 아래 링크를 따르십시오. 새 비밀번호를 원합니다 모든 것이 잘 되었다면 다음 데이터를 사용하여 프로필에 로그인할 수 있습니다. 로그인:[[+사용자 이름]] 비밀번호:[[+비밀번호]] 감사합니다, 사이트 관리 Example.Com 모든 것이 활성화 문자 청크와 매우 유사하며 여기의 암호만 스니펫에서 생성됩니다. 마지막 터치는 사용자가 암호를 업데이트하기 위해 이메일에서 이동할 리소스를 만드는 것입니다. 이 리소스에서는 호출이 필요합니다. [[!ResetPassword:empty=` 비밀번호 재설정을 요청하지 않았습니다. 아마도 당신은 잘못된 주소를 가지고 있습니다. 사이트 메인 페이지로 이동하시거나 상단 메뉴를 이용하시면 됩니다. `? &tpl=`Auth.ForgotPass.Reset`]] 이 코드는 누군가가 갑자기 이 페이지를 다시 방황하거나 실수로 방황하는 경우 메시지를 표시합니다. 비밀번호 재설정에 성공하면 청크에서 메시지가 표시됩니다. Auth.ForgotPass.Reset: 비밀번호가 이메일에 지정된 비밀번호로 성공적으로 재설정되었습니다. 이제 이 비밀번호로 로그인할 수 있습니다. 프로필에서 변경하는 것을 잊지 마십시오. 이제 완전히 작동하는 사용자 인증 및 등록 시스템이 있습니다. 승인된 사용자의 프로필을 변경하는 것은 이 문서의 범위를 벗어납니다. 1. 등록 페이지를 만들고 여기에 스니펫 호출을 추가합니다. 등록하다. 2. 등록 양식으로 청크 생성 등록.양식 및 활성화 편지 이메일.활성화. 3. 등록 확인 페이지를 만들고 스니펫 호출을 합니다. 확인등록. 4. 스니펫 호출 추가 로그인인증된 사용자의 로그인 양식과 배지를 배치할 위치로 이동합니다. 5. 로그인 폼으로 청크 생성 인증.로그인 , 인증된 사용자에 대한 정보가 있는 청크 인증 로그아웃 , 오류 메시지가 있는 청크 인증.로그인.오류 . 6. 암호 복구 페이지를 만들고 스니펫 호출을 합니다. 비밀번호를 잊으 셨나요. 7. 청크 생성 Auth.ForgotPass.Form 암호 복구 양식, 청크 포함 Auth.ForgotPass.Sent 편지, 청크의 성공적인 전송에 대한 메시지와 함께 이메일.ForgotPass 비밀번호 재설정 이메일로. 8. 최종 비밀번호가 재설정된 리소스를 생성하고 스니펫 호출을 배치합니다. 암호를 재설정. 9. 청크 생성 Auth.ForgotPass.Reset 성공적인 비밀번호 재설정에 대한 메시지와 함께. 그게 다야. 추가 사항과 의견에 대해 기쁘게 생각합니다. 모든 웹 개발자에게 제품의 완전한 브라우저 간 호환성보다 더 심각한 문제는 아직 없습니다. 이것은 아마도 훌륭한 전문가의 주요 작업 중 하나일 것입니다. 자신의 사이트가 모든 브라우저에서 항상 올바르게 표시되도록 하는 것입니다. 모수 필수의때때로 입력에 사용되는 는 고대 IE에서 작동하지 않으므로 그대로 둘 수 없습니다. 여전히 IE6를 사용하는 은퇴한 사용자는 최신 버전의 Google 크롬 사용자와 동일한 사용 편의성을 누릴 수 있습니다. 웹 개발자가 아닌 다른 사람이 관리할 수 있습니다. 아픈 정보, Internet Explorer 정보 Firefox, Opera 및 Google Chrome을 포함하는 일반 브라우저의 경우 이 작업은 비교적 쉽습니다. 물론 일부 새로운 기술이 사용되지 않는 한 이러한 브라우저의 이전 버전도 html 코드를 똑같이 잘 표시합니다. 그러나 Internet Explorer 제품군의 브라우저에서 이를 달성하려면 막대한 노력이 필요합니다. Internet Explorer의 각 버전에는 고유한 어리석음이 있습니다. IE6에서 작동하는 것이 IE7에서 제대로 작동하지 않을 수 있으며 그 반대의 경우도 마찬가지입니다. 이 동물원 회사 Microsoft는 최신 버전의 브라우저에서도 극복할 수 없었습니다. 브라우저 개발자가 그냥 열어서 사이트 구축을 위한 W3C 표준을 읽을 수 없는 이유를 이해할 수 없습니다. 따라서 웹 개발자로서 변덕스러운 브라우저와 지식과 볼거리가 필요한 사이트 방문자 사이에서 일종의 "계층" 역할을 해야 합니다. 그리고 지금까지 웹 개발자가 성공하고 있다는 것은 대단한 일입니다. 그렇다면 이전 버전의 IE에서 작업하려면 어떻게 해야 할까요? JS가 구조하러 온다. 나는 그것을 싫어했지만 이제는 "올바른"WEB의 공간에서 그것 없이는 앞으로 나아갈 길이 보이지 않습니다. 아래에서 솔루션을 발명한 것이 아니라 부르주아 블로그에서 가져왔습니다. 나는 욕심이 많고 블로그가 부르주아이기 때문에 링크하지 않겠습니다. 기능은 모든 것을 책임질 것입니다. fnCheckFields(). 사이트에 JS 코드를 배치합니다. 일반적으로 html 태그 사이에 배치하는 것이 좋습니다. 머리페이지 상단에 있지만 여전히 페이지 하단의 닫는 태그 앞에 배치하는 것이 좋습니다. 몸. 따라서 JS는 페이지 로딩 속도에 미치는 영향이 적습니다. 필수 매개변수를 입력해야 하는 입력 창은 html 언어로 다음과 같이 표시되어야 합니다. 이 스크립트는 매우 간단하게 작동합니다. 버튼을 누른 후 보내다, 스크립트는 필요한 매개변수가 있는지 모든 입력을 확인하고, 찾은 경우 그에 따라 이 필드에 입력된 값을 확인합니다. 이러한 입력에 아무 것도 입력하지 않으면 입력이 필요하다는 경고 창이 표시됩니다. 데이터는 어디에도 전송되지 않습니다. 예상대로 이 매개변수를 이해하는 법을 이미 학습한 일반 브라우저가 있는 경우 이러한 경고 창이 팝업되지 않고 브라우저에 필요한 매개변수를 처리하기 위한 표준 도구가 작동한다는 것도 좋습니다. 소셜에 알리기 네트워크