Basic 인증(기본 인증)은 어색했기 때문에 다른 방법을 생각해 보았다.
WEB 디자이너는 전직할 때 포트폴리오를 만들지만, 일로 만든 작품은 과연 일반 공개할 수 없습니다.
그 때 열쇠를 걸어야 하지만 DB를 사용하여 암호를 관리하는 손쉬운 프로그래밍은 무리입니다.
그런 때에 사용되는 주된 방법이 Basic 인증(기본 인증)입니다.
htps : // 아아보우 t. 이. jp/gm/gc/23780/
하지만 난 웹 디자이너.
앱 로그인 화면처럼 HTML로 디자인하고 싶습니다! !
그렇게 생각해, 이번은 Basic 인증(기본 인증)을 사용하지 않고 열쇠를 걸 수 있는 방법을 찾았습니다.
자바 스크립트이지만 들키지 않고 열쇠를 붙이는 방법
RSA 공개키등의 방법도 있습니다만, 라이브러리를 사용하지 않고 가능한 한 간단하게 열쇠를 걸고 싶습니다.
검색한 가운데 내가 좋다고 생각한 방법이 이 사이트에 쓰여졌습니다.
htps : // 아아보우 t. 이. jp/gm/gc/23839/
버튼을 누르면 비밀번호를 입력하는 경고가 표시되고,
문자를 입력하면 입력한 문자 +.html 파일이 표시되는 구조입니다.
이 기능을 사용하여 입력 양식처럼 암호를 입력하는 데 도전했습니다.
※ 꽤 엄중하게 열쇠를 걸고 있습니다만, 절대 괜찮은지는 확실하지 않습니다. 자기 책임으로 부탁드립니다.
로그인 페이지를 만드는 방법
로그인할 페이지를 login.html이라고 합니다.
외형으로서는, 이러한 이미지가 됩니다.
또한 비밀번호를 입력한 후 비밀번호 페이지를 password.html이라고 합니다.
HTML
로그인할 부분의 HTML입니다.
form 태그의 onsubmit="return false;"가 중요한 포인트입니다.
이것을 지정하지 않고 Enter 버튼을 누르면 POST 송신되어 버려, 제대로 페이지 천이를 할 수 없는 경우가 있습니다.
login.html
<body>
<h1>パスワードを入力してください</h1>
<form name="pwform" onsubmit="return false;">
<!-- パスワードを入力する -->
<input type="password" name="txtb" value="">
<!-- 送信したらjavascriptのtbox()の中身が動く -->
<input type="button" value="送信" onclick="tbox()">
<!-- 送信したらjavascriptのclr()の中身が動く -->
<input type="button" value="リセット" onclick="clr()">
</form>
<body>
또한 비밀번호 페이지는 검색 로봇을 연주하는 설정을 작성합니다.
※.htaccess 파일에도 마찬가지로 연주하는 설정을 씁니다만, 100% 연주하는 보증이 없기 때문에, 만일에는 마음을 넣어 중복시켜 쓰고 있습니다.
password.html<meta name="robots" content="noindex">
.htaccess 파일
그런 다음 .htaccess 파일을 편집합니다.
.htaccess를 설치하면 인증, 전송, 제한 등을 볼 때 기능을 설정할 수 있습니다.
여기에서는 검색 봇을 연주하고 로그인 페이지의 외부 액세스 금지를 설정합니다.
.htaccess
<Files ~ "^\.(htaccess|htpasswd)$">
deny from all
</Files>
order deny,allow
# パスワードページ(password.html)の場合
<Files password.html>
# 検索ボットの巡回を弾く設定
SetEnvIf User-Agent "Googlebot" shutout
SetEnvIf User-Agent "Slurp" shutout
# ログインページ(hogehoge.comは、自分のサイトのURLに設定する)
SetEnvIf Referer "^https://hogehoge\.com/login.html" ref_ok
SetEnvIf Referer "^http://hogehoge\.com/login.html" ref_ok
order Deny,Allow
Deny from all
allow from env=ref_ok
</Files>
자바스크립트
마지막으로 javascript를 작성합니다.
login.html // onclick="tbox()" が押されたら
function tbox(){
// <form name="pwform">内の <input name="txtb"> の値を取得
var str = document.pwform.txtb.value;
// もし <input name="txtb"> の値が半角英数字以外だったら、アラートを出す
if( /\W+/g.test(str) ) {
alert("半角英数字のみを入力して下さい。");
}
// もし <input name="txtb"> の値に何かしら入っていたら、入力値.htmlに移動する
else if( str != null ) {
location.href = str + ".html";
}
}
// onclick="clr()" が押されたら、フォームの値を消す
function clr(){
document.pwform.txtb.value="";
}
완성
Javascript인데 들키지 않고, 디자인할 수 있는 로그인 페이지를 만들 수 있었습니다! ! !
Reference
이 문제에 관하여(Basic 인증(기본 인증)은 어색했기 때문에 다른 방법을 생각해 보았다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/ayaoriko/items/0038eb4cc3f294f37850
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
로그인할 페이지를 login.html이라고 합니다.
외형으로서는, 이러한 이미지가 됩니다.
또한 비밀번호를 입력한 후 비밀번호 페이지를 password.html이라고 합니다.
HTML
로그인할 부분의 HTML입니다.
form 태그의
onsubmit="return false;"가 중요한 포인트입니다.이것을 지정하지 않고 Enter 버튼을 누르면 POST 송신되어 버려, 제대로 페이지 천이를 할 수 없는 경우가 있습니다.
login.html
<body>
<h1>パスワードを入力してください</h1>
<form name="pwform" onsubmit="return false;">
<!-- パスワードを入力する -->
<input type="password" name="txtb" value="">
<!-- 送信したらjavascriptのtbox()の中身が動く -->
<input type="button" value="送信" onclick="tbox()">
<!-- 送信したらjavascriptのclr()の中身が動く -->
<input type="button" value="リセット" onclick="clr()">
</form>
<body>
또한 비밀번호 페이지는 검색 로봇을 연주하는 설정을 작성합니다.
※.htaccess 파일에도 마찬가지로 연주하는 설정을 씁니다만, 100% 연주하는 보증이 없기 때문에, 만일에는 마음을 넣어 중복시켜 쓰고 있습니다.
password.html
<meta name="robots" content="noindex">
.htaccess 파일
그런 다음 .htaccess 파일을 편집합니다.
.htaccess를 설치하면 인증, 전송, 제한 등을 볼 때 기능을 설정할 수 있습니다.
여기에서는 검색 봇을 연주하고 로그인 페이지의 외부 액세스 금지를 설정합니다.
.htaccess
<Files ~ "^\.(htaccess|htpasswd)$">
deny from all
</Files>
order deny,allow
# パスワードページ(password.html)の場合
<Files password.html>
# 検索ボットの巡回を弾く設定
SetEnvIf User-Agent "Googlebot" shutout
SetEnvIf User-Agent "Slurp" shutout
# ログインページ(hogehoge.comは、自分のサイトのURLに設定する)
SetEnvIf Referer "^https://hogehoge\.com/login.html" ref_ok
SetEnvIf Referer "^http://hogehoge\.com/login.html" ref_ok
order Deny,Allow
Deny from all
allow from env=ref_ok
</Files>
자바스크립트
마지막으로 javascript를 작성합니다.
login.html
// onclick="tbox()" が押されたら
function tbox(){
// <form name="pwform">内の <input name="txtb"> の値を取得
var str = document.pwform.txtb.value;
// もし <input name="txtb"> の値が半角英数字以外だったら、アラートを出す
if( /\W+/g.test(str) ) {
alert("半角英数字のみを入力して下さい。");
}
// もし <input name="txtb"> の値に何かしら入っていたら、入力値.htmlに移動する
else if( str != null ) {
location.href = str + ".html";
}
}
// onclick="clr()" が押されたら、フォームの値を消す
function clr(){
document.pwform.txtb.value="";
}
완성
Javascript인데 들키지 않고, 디자인할 수 있는 로그인 페이지를 만들 수 있었습니다! ! !
Reference
이 문제에 관하여(Basic 인증(기본 인증)은 어색했기 때문에 다른 방법을 생각해 보았다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/ayaoriko/items/0038eb4cc3f294f37850텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
