project/miniCode

나홀로 js// localStorage를 이용한 로그인(보안ㅆㄺ)

부엉이사장 2022. 6. 22. 09:59

콜백함수, 클래스 복습겸 로컬스토리지도 관심이 있어서 로그인 기능을 구현(흉내)해보았다 ㅋㅋ

로컬스토리지는 사용자의 브라우저내에서 정보를 영원히 forever저장한다 ㅋㅋ 용량도 5mb라는데

야동 1초동안 받는 용량보다 작지만 단순히 텍스트로만 넣는다면 큰 용량이다 !

 

사실 관심을 가지기 시작한게 ajax없이 장바구니기능을 구현하려고 했는데 추천받은거다

 

암튼 로칼스토리지로 로그인구현이라니 개소린가 싶지만 그냥 써보고 싶어서 해본거니까 ㅎㅎ

당연 브라우저 관리자도구로 데이터를 볼 수 있으니 완~전 보안 쓰레기라고 볼수 있다

 

 

시작!

먼저 html파일부터 대충 만들어주자.

input값을 사용해야하니 form태그로 만들고 css는 안만졌다

 

<body>
    <p>register</p>
    <form name="register" method="post">
        new id <input id="newid"><br>
        new password <input id="newpwd"><br>
        <input type="button" value="회원가입" onclick="registerr();">
    </form>
    <p>----------------------</p>

    <p>logIn</p>
    <form name="login" method="post">
        id <input id="id"><br>
        password <input id="pwd"><br>
        <input type="button" value="로그인" onclick="loginn();">
    </form>
</body>

브라우저창에서는 

이렇게 나온다. 코드에서 중요한건 register폼에서는 버튼을 누르면 registerr()함수가 실행되게 하였다

login폼에서는 버튼을 누르면 loginn함수가 실행되게하였다.

그냥 login(), register()으로 헀는데 안되길래 걍 r과 n을 더 붙였다 ㅋㅋ 이유는 귀찮아서 안찾음!

 

 

암튼 이렇게 프론트를 만들어줬고

백엔드를 만들차례(자바스크립트로 로칼스토리지를 만진거라 이것도 뭐 프론트긴 하지만 ㅋㅋ)

 

 

 

1. register 회원가입 기능

function registerr() {
  let newid = document.getElementById("newid").value;
  let newpwd = document.getElementById("newpwd").value;

  if (localStorage.getItem(newid)) {
    alert("이미 가입된 회원인디요?");
  } else {
    localStorage.setItem(
      "howMany",
      Number(localStorage.getItem("howMany")) + 1
    );
    localStorage.setItem(newid, newpwd);
    alert(`${newid}님 반가워용 회원가입완료`);
  }
}

- 가입된 회원 거르기

먼저 브라우저쪽 인풋창값을 각각 newid, newpwd로 변수지정을 해준다.

조건 if가 로컬스토리지의 키 newid로 value를 가져오는것인데 

만약 newid에 해당되는 value가 존재하면 괄호안은 true가 될것이고 존재안하면 null이 될것이다.

존재하면 alert로 이미 가입됬다고 알려줬다.

 

- 만약에 가입된회원이 아니라면 else문이 실행된다.

setItem으로 howMany를 수정해줄건데 이건 가입된 회원수다. 이걸로 사실 아이디당 넘버를 부여해주려했는데

로컬스토리지는 키,벨류쌍으로 들어가고 객체? 가 안들어가더라. 제이슨으로 넣을수 있으면 몰라도..

암튼 귀찮아서 편의기능으로만 만들었다.

다시 정리해서 가입된회원이아니면 howMany+=1을 해주고

새로 newid, newpwd로 회원을 하나 생성한다.

그리고 마무리는 alert로 반갑다고 인사해주기!

 

 

실전으로 해보면 

회원가입을 jacob/1234로 해주면

이렇게 알러트창이 뜨게되고 개발자도구의 어플리케이션탭에

0이었던 howMany가 1이되고 jacob/1234라는 회원이 생성되었다.

howMany는 키값 못찾는거 피할라고

if (localStorage.getItem("howMany") === null) {
  localStorage.setItem("howMany", 0);
}

이렇게 따로 쳐줬따.

 

 

 

이제 로그인 기능!! (콜백체험)

이건 클래스로 만들어졌따. 사실 강의 코드를 따왔는데 좀 내가 만졌다.

아 참고로 이 기능에대한 클래스는 loginn(){}함수안에 넣어줘야한다.

브라우저 클릭이벤트로 실행이 되어야하니까.

 

 

암튼 loginn()함수안에는 클래스가 하나 있다.

 

  class UserStorage {
    loginUser(id, password, onSuccess, onError) {
      setTimeout(() => {
        if (
          localStorage.getItem(id) == password
        ) {
          onSuccess(id);
          console.log(`${id}로 로그인됬어용`);
        } else {
          onError(new Error("가입안됬어용"));
        }
      }, 2000);
    }

    getRoles(user, onSuccess, onError) {
      setTimeout(() => {
        if (user === "dori") {
          onSuccess({ name: "dori", role: "admin" });
        } else {
          onSuccess({
            name: user,
            role: "client",
          });
        }
      }, 1000);
    }
  }

이 클래스에는 두가지 메서드가 있는데 

하나는 loginUser, 또하나는 getRoles두가지다.

로그인유저는 로그인관리, 겟롤스는 이 회원이 일반회원인지 관리자인지 판별하는거다.

 

1. loginUser()

id password, onSuccess, onError네가지 파라미터를 넣은 함수를 만들어준다.

셋타임아웃은 로그인시간 걸리듯 걍 해본거. 안해도된다. 

 

암튼 만약 로그인인풋에 입력된값(id)을 키로한 value값이 

password와 일치하면 onSuccess(id)라는 함수로 넘겨준다. onSuccess는 파라미터함수로

넘겨준다. onSuccess함수는 좀따가 userStorage객체 만들때 만들어줄거다.

그리고 콘솔창에 로그인됐다고 알려준다.

만약 아니면 error생성자로 가입안됬어용 이라는 메세지를 넘겨줄거다.

 

 

2. getRoles()

로그인된 유저의 권한을 알려주는 메서드다. 권한이라야 client랑 admin 두가지다

만약 user파라미터로 받은 값이 dori라면 onSuccess라는 파라미터 함수로 객체를 파라미터로 전해준다.

이 객체에는 role admin이 추가된다.

 

만약 dori가 아니라면 name은 걍 user로 갖다쓰고 role은 client로 부여해준다.

 

 

자 이제 클래스를 만들었따. 콜백함수를 동기적으로 처리하게 하기위해

login()함수안에서 getRoles()함수가 실행되어야한다는걸 기억하자.

 

  const userStorage = new UserStorage();
  const id = document.getElementById("id").value;
  const password = document.getElementById("pwd").value;
 

먼저 userStorage라는 객체를 새로운 클래스 생성자로 만들어줄거다.

id 는 로그인 인풋값의 아이디부분, password는 로그인인풋값의 비번부분을 변수지정해줬다.

 

  userStorage.loginUser(
    id,
    password,
    (user) => {
      userStorage.getRoles(
        user,
        (userWithRole) => {
          console.log(
            `안녕하세요 ${userWithRole.name}님, ${userWithRole.role}이시군요!`
          );
        },
        (error) => {
          console.log(error);
        }
      );
    },
    (error) => {
      console.log(error);
    }
  );

그럼 userStorage라는 객체가 만들어지고 실행되는 순서를 차근차근 읊어보면

- userStorage에 만들어진 loginUser이라는 메서드를 실행한다. 이 메서드에는 네가지 파라미터가 들어간다.

id, password, onSuccess, onError인데 석세스랑 에러는 함수다.

너무 장황해서 조금 복잡하지만 뭐 나만볼거라 써보면

loginUser로 아이디 비번을 전해주면 로컬스토리지와 대조해서 '있으면' 로그인됬따고 알러트를 띄워줬다.

그럼 onSuccess(id)가 실행되는데 여기에 바로 getRoles를 전해줬따.

onsuccess함수는 파라미터를 user로 받고(클래스생성은 id로 해놓음) userStorage의 getRoles로 전해준다.

그리고 여기서 아까 클래스생성할때 getRoles메서드에서 파라미터부분에 객체를 전해줬따.

함수의 파라미터를 userWithRole이라고 해줬고 여기에 이 객체가 전해질거다.

이 객체의 name이 dori면 role은 admin이 되고 나머지는 client가 된다.

그리고 콘솔창에 로그인됬네용 당신은 누굽니다~ 이러고 뜰거다.

 

 

 

실행

 

어플리케이션에 이렇게 howMany(회원수) 2명이있다는 정보와

jacob, dori라는 회원이 있다. 오른쪽은 비밀번호고..

 

그럼 이제 jacob으로 로그인을 해보면

밑에 콘솔에 client라고 떠준다.

그럼 dori로 로그인해보면?

 

로그인했더니 dori는 admin이라네용

 

 

사실 우리 도리는 머리가 안좋아서 관리자자격은 없다. 맨날 무찌한테 털리고.. 간식뺏기고..

엄청 이쁜앤데 내가 직접 미용을 해주고나서 들판에서 뛰노는애처럼 변해버렸기도하고..

 

 

 

#####################전체코드

 

//회원가입 --------------------------------
function registerr() {
  let newid = document.getElementById("newid").value;
  let newpwd = document.getElementById("newpwd").value;

  if (localStorage.getItem(newid)) {
    alert("이미 가입된 회원인디요?");
  } else {
    localStorage.setItem(
      "howMany",
      Number(localStorage.getItem("howMany")) + 1
    );
    localStorage.setItem(newid, newpwd);
    alert(`${newid}님 반가워용 회원가입완료`);
  }
}

//howmany관리------------------------------
if (localStorage.getItem("howMany") === null) {
  localStorage.setItem("howMany", 0);
}
//---------------콜백 로그인-------------

function loginn() {
  class UserStorage {
    loginUser(id, password, onSuccess, onError) {
      setTimeout(() => {
        if (
          localStorage.getItem(id) == password
        ) {
          onSuccess(id);
          console.log(`${id}로 로그인됬어용`);
        } else {
          onError(new Error("가입안됬어용"));
        }
      }, 2000);
    }

    getRoles(user, onSuccess, onError) {
      setTimeout(() => {
        if (user === "dori") {
          onSuccess({ name: "dori", role: "admin" });
        } else {
          onSuccess({
            name: user,
            role: "client",
          });
        }
      }, 1000);
    }
  }

  const userStorage = new UserStorage();
  const id = document.getElementById("id").value;
  const password = document.getElementById("pwd").value;

  userStorage.loginUser(
    id,
    password,
    (user) => {
      userStorage.getRoles(
        user,
        (userWithRole) => {
          console.log(
            `안녕하세요 ${userWithRole.name}님, ${userWithRole.role}이시군요!`
          );
        },
        (error) => {
          console.log(error);
        }
      );
    },
    (error) => {
      console.log(error);
    }
  );
}

'project > miniCode' 카테고리의 다른 글

글자수 용량 알아보기  (0) 2022.07.30
현재위치 구하기 (위도,경도)  (0) 2022.07.29
브라우저에서 복사버튼 만들기.  (0) 2022.07.29
axios데이터 & 헤더값 포함  (0) 2022.07.16
nodejs // http서버와 axios를 이용한 크롤러  (0) 2022.06.30

'project/miniCode'의 다른글

  • 현재글나홀로 js// localStorage를 이용한 로그인(보안ㅆㄺ)

관련글

댓글

티스토리툴바