12 TIL 정리(해시함수,JWT)

Bulma  ( https://bulma.io/documentation/ )

앞서 배웠던 부트 스트랩과 동일하게 보면 됨. 무료 CSS프레임 워크

-부트스트랩과의 차이

Bootstrap은 jQuery를 써서 웹사이트에서의 상호작용을 쉽게 구현할 수 있지만 Bulma는 순수한 CSS 프레임워크이기 때문에 기능을 직접 구현해야 한다. 대신 자유로운 커스터마이징이 가능

Bootstrap은 커뮤니티가 커서 테마나 플러그인 등이 개발이 많이 되어있고 질문에 대한 답이나 예시 등을 찾기 쉽다.

Bulma는 문법이 직관적이고  Flexbox등 최신 기술이 더 많다

-Bulma 링크 임포트 

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">

페이지에 사용한 CSS를 파일로 분리 할 때 Bulma의 클래스들을 커스터 마이징 해서 사용했다면 Bulma의 링크보다 아래에 넣어야한다.

해시함수

알고리즘의 한 종류로 임의의 데이터를 받아 항상 고정된 길이의 임의 값으로 변환해주는 함수

수업에선 SHA256을 사용 했는데 어떤 길이의 입력값을 넣어도 항상 256바이트의 결과값이 나오며 동일한 입력값은 항상 같은 결과 값이 나온다.

예시)

@app.route('/sign_in', methods=['POST'])
def sign_in():
    # 로그인
    username_receive = request.form['username_give'] #유저네임 값 받기
    password_receive = request.form['password_give'] #유저비번 값 받기

    pw_hash = hashlib.sha256(password_receive.encode('utf-8')).hexdigest()#비번을 해쉬함수로 변경
    result = db.users.find_one({'username': username_receive, 'password': pw_hash})
    #변경한 비번을 이용해 찾기

 

JWT  ( 도움 블로그 https://tansfil.tistory.com/58?category=255594 )

JSON Web Token의 줄입말로, JSON 객체를 사용해 정보를 안정성 있게 전달하는 웹 표준

ex) 로그인 시 서버에서 회원임을 인증하는 토큰을 넘겨줌으로써 회원만 접근 할 수 있는 서비스 영역에서 신분을 확인하는데 사용 가능

-Flask에서 로그인 기능

로그인 요청 시 비밀번호를 회원 가입시 했던 같은 방법으로 암호화 한 후, DB에서 해당 아이디와 비밀번호를 갖는 회원이 있는지 찾는다. 이후 회원 정보가 없는 경우 실패 메세지를 보내고 , 찾은 경우 아이디와 토큰 만료 시간을 저장하는 토큰을 만들어 넘겨준다.

로그인 성공 메세지를 맏으면 건네받은 토큰을 쿠키로 저장하여 만료되기 전가지 갖고 있으며, API 요청을 보낼 때마다 회원임을 확인 받는다

로그아웃 시 해당 토큰 삭제

※쿠키 = 브라우저에 저장하는 데이터

 

프로젝트중 새로 배운 것

is-hidden  //bulma 클래스로 요소를 숨길 수 있다.

.is-hidden {
    display: none!important;
} /*css에서의 정의*/

toggleClass() // jQuery로 선택한 요소에 클래스값을 넣었다 뺏다 할 수 있다. 없으면 추가 있으면 제거

function toggle_sign_up() {  
    $("#sign-up-box").toggleClass("is-hidden")
} //sign-up-box에 is-hidden이라는 클래스가 있으면 삭제하고 없으면 추가

아이디와 비밀번호 정규 표현식

 

function is_nickname(asValue) {
    var regExp = /^(?=.*[a-zA-Z])[-a-zA-Z0-9_.]{2,10}$/;
//앞()안의 a-zA-Z는 꼭 있어야 된다는 의미 뒤 []부터는 일반적 소문자a부터 소문자 z
//대문자 A부터 Z 숫자 0부터9 -_. 포함 2자에서 10자 사이!
    return regExp.test(asValue); // 
}

function is_password(asValue) {
    var regExp = /^(?=.*\d)(?=.*[a-zA-Z])[0-9a-zA-Z!@#$%^&*]{8,20}$/;
    return regExp.test(asValue);
}// 위와 나머지 모두 같고 일반적 포함에서 특수문자가 더 많고 8자에서 20자 사이!

 

bool

풀네임은 불리언(boolean) 불리언 자료형은 논리 자료형으로 참(True)와 거짓(False)를 나타 내는데 쓰임

bool자료형은 2가지 값만 가지는데 True와 False