[DAY6]해커톤_flask 이용하여 로그인 기능 구현하기

app.py

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

from pymongo import MongoClient
import certifi
import jwt
import hashlib
import datetime

ca = certifi.where()
client = MongoClient('mongodb+srv://test:sparta@cluster0.0x2me9v.mongodb.net/?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta

SECRET_KEY ='login'


@app.route('/')
def home():
    return render_template('index.html')


# 로그인 성공시 이동 화면 등록

@app.route('/signup')
def signup():
    return render_template('signup.html')

@app.route('/findpw')
def findpw():
    return render_template('passwordcheck.html')

@app.route('/detail')
def detail():
    return render_template('detail.html')

#회원가입
@app.route('/api/signup', methods=['POST'])
def api_signup():
    id_receive = request.form['id_give']
    pw_receive = request.form['pw_give']
    pw_pw_receive = request.form['pw_pw_give']
    nickname_receive = request.form['nickname_give']

    check = db.login.find_one({'id': id_receive})
    
    if check is not None :
        return jsonify({'msg':'이미 존재하는 아이디입니다 !'})
    elif pw_receive != pw_pw_receive:
        return jsonify({'msg':'패스워드가 일치하지 않습니다 !'})
    else:
        pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()
        db.login.insert_one({'id': id_receive, 'pw': pw_hash, 'nick': nickname_receive})

        return jsonify({'result': 'success', 'msg':'회원가입 완료!'})


#일치 여부 확인하기

# [로그인 API]
# id, pw를 받아서 맞춰보고, 토큰을 만들어 발급합니다.
@app.route('/api/login', methods=['POST'])
def api_login():
    id_receive = request.form['id_give']
    pw_receive = request.form['pw_give']

    # 회원가입 때와 같은 방법으로 pw를 암호화합니다.
    pw_hash = hashlib.sha256(pw_receive.encode('utf-8')).hexdigest()

    # id, 암호화된pw을 가지고 해당 유저를 찾습니다.
    result = db.login.find_one({'id': id_receive, 'pw': pw_hash})

    # 찾으면 JWT 토큰을 만들어 발급합니다.
    if result is not None:
        # JWT 토큰에는, payload와 시크릿키가 필요합니다.
        # 시크릿키가 있어야 토큰을 디코딩(=풀기) 해서 payload 값을 볼 수 있습니다.
        # 아래에선 id와 exp를 담았습니다. 즉, JWT 토큰을 풀면 유저ID 값을 알 수 있습니다.
        # exp에는 만료시간을 넣어줍니다. 만료시간이 지나면, 시크릿키로 토큰을 풀 때 만료되었다고 에러가 납니다.
        payload = {
            'id': id_receive,
            'exp': datetime.datetime.utcnow() + datetime.timedelta(seconds=100)
        }
        token = jwt.encode(payload, SECRET_KEY, algorithm='HS256')

        # token을 줍니다.
        return jsonify({'result': 'success', 'token': token})
    # 찾지 못하면
    else:
        return jsonify({'result': 'fail', 'msg': '아이디/비밀번호가 일치하지 않습니다.'})


if __name__ == '__main__':
    app.run('0.0.0.0', port=5004, debug=True)

login.js

//아이디 비밀번호 입력 여부 확인하기
const loginId = document.getElementById('LOGIN_ID');
const loginPw = document.getElementById('LOGIN_PW');
const loginBtn = document.getElementById('LOGIN_BTN');

function color() {
    if(loginId.value.length>0/* && loginId.value.indexOf("@")!==-1*/
        && loginPw.value.length>=5){
        loginBtn.style.backgroundColor = "#0095F6";
        loginBtn.disabled = false;
    }else{
        loginBtn.style.backgroundColor = "#C0DFFD";
        loginBtn.disabled = true;
    }
}


loginId.addEventListener('keyup', color);
loginPw.addEventListener('keyup', color);


//로그인 클릭시 회원 정보 확인
function open_site() {
    $.ajax({
        type: "POST",
        url: '/api/login',
        data: {
            id_give: $('#LOGIN_ID').val(),
            pw_give: $('#LOGIN_PW').val()
        },
        success: function (response) {
            if (response['result'] == 'success') {
                $.cookie('mytoken', response['token']);
                alert('로그인 완료')
                window.location.href = '/detail'
            } else {
                alert(response["msg"])
            }
        }
    });
}


function signup() {
    window.location.href = '/signup'
}

function signup() {
    window.location.href = '/findpw'
}

signup.js

function signup() {
    $.ajax({
        type: "POST",
        url: "/api/signup",
        data: {
            id_give: $('#input-id').val(),
            pw_give: $('#input-password').val(),
            pw_pw_give: $('#input-password2').val(),
            nickname_give: $('#input-nickname').val()
        },
        success: function (response) {
            if (response['result'] == 'success') {
                alert('회원가입이 완료되었습니다.')
                window.location.href = '/detail'
            } else {
                alert(response['msg'])
            }
        }
    })
}