Vanilla Javascript를 사용한 로그인 확인 및 인증
36152 단어 saasvscodehtmljavascript
Bootstrap, jQuery 또는 다른 프레임은 사용하지 않습니다.이런 방법은 모두 전방 코드이기 때문에 로컬 브라우저, 웹 응용 프로그램, 심지어 서버에서 사용할 수 있다.
유튜브에서 시청
폴더 구조
4
무례하다
나는 이미 게시 스타일의 환경을 설정했다.css와 스타일.min.css 내 css 폴더에 자동으로 들어갑니다.나의 언행/풍격에 대한 어떠한 변화도scss 파일은 자동으로 이 폴더에 들어가서 자신을 축소합니다.
로그인 페이지
로그인 페이지에 대해 색인을 사용할 것입니다.html, 왜냐하면 이것은 우리 방문자가 사이트를 방문할 때 방문하는 첫 번째 페이지이기 때문이다.이것은 반드시 당신이 그것을 설정하는 방식은 아니지만, 만약 그들이 로그인하지 않았다면, 우리는 JS를 만들어서 방향을 바꿀 필요가 없습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<link rel="stylesheet" href="/css/style.min.css">
<script defer src="/js/login.js"></script>
</head>
<body class="login">
<div class="container">
<h2 class="text-center">Login</h2>
<br>
<form action="/dashboard.html" class="loginForm">
<div class="input-group">
<label for="username" class="label">Username</label>
<input type="text" id="username" class="input">
<span class="error-message"></span>
</div>
<br>
<div class="input-group">
<label for="password" class="label">Password</label>
<input type="password" id="password" class="input">
<span class="error-message"></span>
</div>
<br>
<button class="button" type="submit">Login</button>
</form>
</div>
</body>
</html>
JavaScript에 로그인
js 폴더에 login이라는 파일을 추가합니다.js.이것은 이 페이지의 로그인 기능을 제어하고 HTML의 스크립트 태그에서 참조합니다.
로그인 클래스
이 스크립트를 호출할 수 있는 새로운 종류를 만들 것입니다.나중에 더 쉽게 사용할 수 있도록 모든 함수가 이 클래스에 들어갈 것이다.JS 클래스에서 사용하는 이름 규약에 주의하십시오.
class Login {
// everything will go here
}
건조사
우리의 구조 함수는 클래스에서 우리가 필요로 하는 변수를 미리 채우는 데 도움을 주어야 한다.클래스를 호출할 때 스크립트에 폼과 필요한 필드를 보낼 것입니다. 따라서 함수가 실행되기 전에 전달하고 설정해야 합니다.이것을 위의 괄호 안에 놓아라.
constructor(form, fields) {
this.form = form;
this.fields = fields;
this.validateonSubmit();
}
커밋 시 기능 확인
구조 함수에서 ValidateonSubmit () 라는 함수를 호출합니다.이 함수는 스크립트의 기본 기능을 처리하고 필요할 때 다른 함수를 호출합니다.이 함수는 구조 함수 아래에 직접 추가할 수 있다.
validateonSubmit() {
let self = this; // setup calls to the "this" values of the class described in the constructor
// add a "submit" event listener to the form
this.form.addEventListener("submit", (e) => {
// remove default functionality
e.preventDefault();
var error = 0;
// loop through the fields and check them against a function for validation
self.fields.forEach((field) => {
const input = document.querySelector(`#${field}`);
if (self.validateFields(input) == false) {
// if a field does not validate, auto-increment our error integer
error++;
}
});
// if everything validates, error will be 0 and can continue
if (error == 0) {
//do login api here or in this case, just submit the form and set a localStorage item
localStorage.setItem("auth", 1);
this.form.submit();
}
});
}
검증 함수
앞의 함수에서validateFields()라는 클래스를 호출했는데 이 함수는 필드 변수를 자신에게 전달합니다.이 필드는 정의된 그룹의 위치와 스크립트의 현재 형식을 기반으로 합니다.
validateFields(field) {
// remove any whitespace and check to see if the field is blank, if so return false
if (field.value.trim() === "") {
// set the status based on the field, the field label, and if it is an error message
this.setStatus(
field,
`${field.previousElementSibling.innerText} cannot be blank`,
"error"
);
return false;
} else {
// if the field is not blank, check to see if it is password
if (field.type == "password") {
// if it is a password, check to see if it meets our minimum character requirement
if (field.value.length < 8) {
// set the status based on the field, the field label, and if it is an error message
this.setStatus(
field,
`${field.previousElementSibling.innerText} must be at least 8 characters`,
"error"
);
return false;
} else {
// set the status based on the field without text and return a success message
this.setStatus(field, null, "success");
return true;
}
} else {
// set the status based on the field without text and return a success message
this.setStatus(field, null, "success");
return true;
}
}
}
상태 함수
이전 함수에서 호출된 상태 함수는 입력 필드의 css를 수정하고 오류 메시지를 표시하는 데 사용됩니다.코드는 상대적으로 간단하여 표의 모든 필드에 적용된다.
setStatus(field, message, status) {
// create variable to hold message
const errorMessage = field.parentElement.querySelector(".error-message");
// if success, remove messages and error classes
if (status == "success") {
if (errorMessage) {
errorMessage.innerText = "";
}
field.classList.remove("input-error");
}
// if error, add messages and add error classes
if (status == "error") {
errorMessage.innerText = message;
field.classList.add("input-error");
}
}
로그인 클래스 호출
사용하기 편리하도록, 클래스를 만드는 파일 밑에 Login 클래스 호출을 추가했습니다.보통 프로그램에 추가할 수 있습니다.js 또는 ini.js 파일입니다. 하지만 여기서도 작용했습니다.
// create a variable for the login form
const form = document.querySelector(".loginForm");
// if the form exists, run the class
if (form) {
// setup the fields we want to validate, we only have two but you can add others
const fields = ["username", "password"];
// run the class
const validator = new Login(form, fields);
}
대시보드 페이지
이 페이지는 프레젠테이션 목적으로만 사용됩니다.이것은 성공적으로 방향을 바꾸는 방법과 프로그램을 취소하는 방법만 보여 줍니다.바디에는 클래스가 없습니다. 헤드에서 두 개의 스크립트가 호출되었습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dashboard</title>
<link rel="stylesheet" href="/css/style.min.css">
<script defer src="/js/auth.js"></script>
<script defer src="/init.js"></script>
</head>
<body>
<div class="container">
<h1 class="text-center">Welcome to the Dashboard</h1>
<p class="text-center"><a href="#" class="logout">Log Out</a></p>
</div>
</body>
</html>
인증 클래스
이 간단한 클래스는 본질적으로localStorage 항목이 존재하는지 확인하고 로그아웃 함수를 만들 뿐입니다.
class Auth {
// setup the class and hide the body by default
constructor() {
document.querySelector("body").style.display = "none";
const auth = localStorage.getItem("auth");
this.validateAuth(auth);
}
// check to see if the localStorage item passed to the function is valid and set
validateAuth(auth) {
if (auth != 1) {
window.location.replace("/");
} else {
document.querySelector("body").style.display = "block";
}
}
// will remove the localStorage item and redirect to login screen
logOut() {
localStorage.removeItem("auth");
window.location.replace("/");
}
}
페이지마다 Auth 클래스 호출
우리의auth클래스가 모든auth가 필요한 페이지를 처리할 수 있도록 init에 추가하기만 하면 됩니다.js 파일.이것은 페이지를 불러올 때마다Auth 클래스를 호출하기 때문에, 함수를 다시 쓸 필요가 없이 보호할 페이지를 보호할 수 있습니다.다음 내용을 init에 추가합니다.js 파일.
const auth = new Auth();
document.querySelector(".logout").addEventListener("click", (e) => {
auth.logOut();
});
무례하다
이 자습서에는 중요하지 않으므로 SASS 파일을 자세히 설명하지는 않겠지만, 변경하고 싶으면 통독할 수 있습니다.
$primary: rgb(0, 132, 255);
$error: red;
@import url("https://fonts.googleapis.com/css2?family=Open+Sans&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Open Sans", sans-serif;
background-color: $primary;
font-size: 16px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
padding: 0;
margin: 0;
}
.container {
max-width: 98vw;
margin: 0 auto;
padding: 1rem;
background-color: #fff;
}
.text-center {
text-align: center;
}
.login {
.container {
max-width: 460px;
margin: 3rem auto;
padding: 2rem;
border: 1px solid #ddd;
border-radius: 0.25rem;
background-color: #fff;
}
}
.input {
appearance: none;
display: block;
width: 100%;
color: #333;
border: 1px solid rbg(180, 180, 180);
background-color: white;
padding: 1rem;
border-radius: 0.25rem;
&.input-error {
border: 1px solid $error;
&:focus {
border: 1px solid $error;
}
}
&:focus {
outline: none;
border: 1px solid $primary;
background-clip: padding-box;
}
}
.error-message {
font-size: 0.85rem;
color: $error;
}
.button {
background-color: $primary;
padding: 1rem;
border: none;
color: #fff;
font-weight: bold;
display: block;
width: 100%;
text-align: center;
cursor: pointer;
font-size: 1rem;
&:hover {
filter: brightness(110%);
}
}
결론
이것은 나의 다음 몇 개의 강좌의 첫 단계다.로그인, 인증 및 내부 보안 페이지가 있는 일반 JavaScript 응용 프로그램 구축에 대한 자세한 내용은 계속해서 확인하십시오.내 다음 튜토리얼 + 비디오에서 나는 PHP와 MySQL을 이용하여 간단한 JSON API를 구축하여 이를 결합시킬 것이다.만약 네가 동영상 개봉 때 보고 싶다면 잊지 마라.
Reference
이 문제에 관하여(Vanilla Javascript를 사용한 로그인 확인 및 인증), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/thedevdrawer/login-validation-authentication-using-vanilla-javascript-4i45텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
