자신의 암호 생성기 만들기: 단계별 가이드🤖
12047 단어 beginnerscodenewbiecssjavascript
이것이 바로 나의 암호 생성기의 작용이다.
다음은 사양입니다.
경고 한마디.이 알고리즘은 암호화 방면에서 안전하지 않다.만약 누군가가 2단계에서 당신의 비밀번호를 알게 된다면, 그들은 당신의 비밀번호를 다시 만들 수 있을 것입니다.따라서 임무의 관건과 민감한 분야에서 이런 비밀번호를 사용하는 것은 현명하지 않다.그러나 그것은 여전히 개발을 시도할 가치가 있다.
MD5 해시
저희 알고리즘의 핵심은 MD5 해시 엔진입니다. (3단계에서 보실 수 있습니다.)해시는 텍스트를 32자 문자열로 바꾸는 알고리즘으로 디지털 지문이다.
예를 들어 구글을 인코딩하면com, 당신은 항상 해시
1d5920f4b44b27a802bd77c4f0536f5a를 얻을 수 있습니다.문자열이 https://google.com 이면 해시 값은 항상
99999ebcfdb78df077ad2727fd00969f 입니다.다음은 알아야 할 중요한 내용입니다.
해시 (또는 디지털 지문) 는 원본 문자열을 표시하기 위해 역방향으로 공정할 수 없습니다.
D5로 같은 문자열을 인코딩하면 항상 같은 해시를 만들 수 있습니다.
따라서 가능한 원본 텍스트와 복호화할 대상 해시가 있다면, 원본 텍스트에서 해시를 하고 대상 해시와 비교할 수 있습니다.이것은 누설 암호 데이터베이스를 해독하는 흔한 방법이다.
이 알고리즘은 이미 널리 알려졌고 충분히 연구되었다.
암호학은 깨뜨릴 수 없는 것이 없다.MD5 해시는 100% 안전하지 않습니다.생활 속에서 진실은 아무것도 없다.
D5를 더욱 안전하게 하는 일반적인 방법 중 하나는 소금을 첨가하는 것이다.Salt는 암호화된 문자열에 추가된 비밀 단어나 문자로 아무도 모른다.salt를 사용하면 예비 해시 비밀번호를 반대로 맞추기가 더욱 어려워집니다.
다음은 하나의 예이다
예를 들어, 문자열'메일'을 산열하고 싶습니다.구글com'.이 문자열은 항상 해시
be5cab0695415d9363d18ad1345c73eb 를 제공합니다.해커는 이 암호의 출처와 의미를 모르는 상황에서 이 암호를 차단했다.알고 싶어서요.그는 해시 연산을 위해 가능한 문자열 테이블을 만들고 그 결과를 해시와 일치시킵니다.
단, 원본 문자열이 "mail"이라면구글comJacko,'Jacko'어디예요?이런 상황에서 당신의 해시는
397ea03e8e23b5b0127dffc6db629eab 될 것입니다. 해커가 왠지 모르게 당신의 소금을 알아맞히지 않으면, 그는 이 해시와 반대로 일치할 수 없습니다.그래서 이 모든 것은 해커가 당신의 소금이 무엇인지, 그리고 당신이 그것을 어디에 두었는지 아는 데 귀결된다.
인터페이스
나는 몇 가지 기본 인터페이스부터 시작할 것이다.수첩에 텍스트 문서를 만들어 붙여넣고 HTML로 저장합니다.만약 당신이 발생한 일에 대해 아는 것이 매우 적다면, 안의 평론을 읽어 보세요.
<html>
<!-- service area -->
<head>
<title>Password generator</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- next line loads the MD5 hashing function -->
<script src="https://thecode.media/wp-content/uploads/2019/05/js-md5.js"></script>
<style type="text/css">
/*Adding some basic design*/
body{ text-align: center; margin: 10;
font-family: Verdana, Arial, sans-serif;
font-size: 16px;}
input{ display: inline-block; margin: 20px auto;
border: 2px solid #eee; padding: 10px 20px;
font-family:Verdana, Arial, sans-serif;
font-size: 16px;}
</style>
</head>
<body>
<!-- Our page will be here -->
<div class="container" "margin: auto;">
<h2 class="todo__caption">Password generator</h2>
<br>
<!-- Interface begins -->
<input type="text" id="site_url" size="50" placeholder="Where do you need this password? Paste the address">
<br>
<input type="text" id="keyword" size="50" placeholder="Some key word here">
<br> <br>
<!-- Main button -->
<button style="font-size: 100%; padding:5px 10px 10px 10px" onclick="generate()">Generate password</button>
<p>Your password is:</p>
<div id = "pass_text" style="font-weight: bold"></div>
</div>
<script>
<!-- Your main script -->
</script>
</body>
</html>
다음은 브라우저에서 실행될 스크립트를 작성하고 모든 암호화 마법이 발생했는지 확인합니다.다음 절차를 따르십시오.
0단계: 내무 관리
코드를 깔끔하게 유지하고 싶어서 우선 변수를 설명하고 함수를 설정합니다. 이 함수는 나중에 단추로 터치됩니다.이 코드는 아직 어떤 일도 할 수 없지만, 나는 실제 유용한 코드를 정확하게 운행하기 위해 그것을 필요로 한다.이 모든 것은 이전 문서의 끝에 있는 블록에 있습니다.
// setting up variables
var site, salt;
var text, password;
// The function to run all the useful code
function generate(){
// Some useful code
}
1단계.사이트에서 주소 가져오기
브라우저에서 실행되며 웹 페이지의 모든 내용을 직접 액세스할 수 있도록 Javascript로 작성되었습니다.페이지에 입력 필드가 있습니다.이 필드에서 데이터를 읽는 데는 한 줄만 필요합니다.
site = document.getElementById('site_url').value;
이 줄은 유용한 코드 아래에 있다.
단계 2.이 비밀을 받아들이다
마찬가지로 나는 이 비밀의 단어를 읽었다.
salt = document.getElementById('keyword').value;
3단계.그것들을 으깨뜨리다
지금 나는'사이트'와'salt'의 내용을 결합시켜야 한다.나는 또 약간의 추가 물건을 넣어서 함도를 증가시킬 수 있다.Javascript에서 두 텍스트를 연결하려면 다음과 같이 하십시오.
text = site + salt + 'Practicum Rules';
4단계.암호화
제가 MD5 스크립트를 불러왔기 때문에 지금 제가 해야 할 일은 그것을 사용하는 것입니다.
password = md5(text);
단계 5.출력 암호
JavaScript를 사용하면 페이지로 내보내기가 쉽습니다.
document.getElementById('pass_text').innerHTML=password;
실행 코드
현재 나는 모든 유용한 코드가'generate'라는 함수에 있는지 확인하고 이 함수를 페이지의 단추에 비추어야 한다.봤습니다. 굵은 부분을 보십시오.
<button style="font-size: 100%; padding:5px 10px 10px 10px" onclick="generate()">Generate password</button>
이게 마지막 코드예요.
<html>
<!-- service area -->
<head>
<title>Password generator</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- next line loads the MD5 hashing function -->
<script src="https://thecode.media/wp-content/uploads/2019/05/js-md5.js"></script>
<style type="text/css">
/*This will be some basic design*/
body{ text-align: center; margin: 10; font-family: Verdana, Arial, sans-serif; font-size: 16px;}
input{ display: inline-block;
margin: 20px auto; border: 2px solid #eee;
padding: 10px 20px;
font-family:Verdana, Arial, sans-serif;
font-size: 16px;}
</style>
</head>
<body>
<!-- Our page will be here -->
<div class="container" margin: auto;">
<h2 class="todo__caption">Password generator</h2>
<br>
<!-- interface begins -->
<input type="text" id="site_url" size="50" placeholder="Where do you need this password? Paste the address">
<br>
<input type="text" id="keyword" size="50" placeholder="Some key word here">
<br> <br>
<!-- Main button -->
<button style="font-size: 100%; padding:5px 10px 10px 10px" onclick="generate()">Generate password</button>
<p>Your password is:</p>
<div id = "pass_text" style="font-weight: bold"></div>
</div>
<script>
// setting up variables
var site, salt;
var text, password;
// The function to run all the useful code
function generate(){
//Step 1
site = document.getElementById('site_url').value;
//Step 2
salt = document.getElementById('keyword').value;
//Step 3
text = site + salt + 'Practicum Rules';
//Step 4
password = md5(text);
//Step 5
document.getElementById('pass_text').innerHTML=password;
}
</script>
</body>
</html>
다음은 무엇입니까?
유사한 내용을 더 알고 싶으면 Practicum 에서 웹 개발 과정을 보십시오.그것은 20시간의 무료 수업이 있다🚀 그 밖에 저는 테스트판 테스트 인원을 찾고 있습니다. 그래서 관심이 있으면 저에게 이메일을 보내주세요!
Reference
이 문제에 관하여(자신의 암호 생성기 만들기: 단계별 가이드🤖), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/andrewu/make-your-own-password-generator-step-by-step-guide-3fdc텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
