[React + Flask] 간단한 탑스터 SNS 페이지 (2)

[211011]

 

10월에 처음으로 무언가를 만들어보면서 간략하게 적었던 기록들이다. 티스토리 블로그를 개설하면서 그대로 옮긴 글. 이때도 열심히 좀 쓸걸 그랬다.

 

---

 

코드를 디자인한 방법이 정석적인 방법인지는 모르겠지만 어찌 됐든 돌아가기는 한다.

만들어진 탑스터를 이미지로 변환해서 파일로 다운받을 수 있고, 서버에 업로드해서 볼 수 있다. sns 피드처럼 만들고 싶어서 회원가입과 로그인도 간단히 구현했다.

 

회원가입

입력한 정보를 그냥 json 형식으로 보냈다. 이미 있는 id면 그냥 리턴하고 새 id인 경우에 회원가입을 진행한다. bcrypt 라이브러리를 이용해서 암호화를 해서 db에 저장한다. 자꾸 오류가 나는데 바이너리 형식으로 나오나해서 str으로 디코딩해서 보내니까 오류는 안난다.

 @app.route('/api/join', methods=['POST'])
def post_join():
    data = request.get_json()
    findID = db.user.find_one({"join_id":data['join_id']})
    if findID:
        return jsonify({'msg':"invalid"})

    password = data['join_password']
    bpw = bcrypt.hashpw(password.encode('utf-8'), bcrypt.gensalt())
    str_bpw = bpw.decode('utf-8')
    data['join_password'] = str_bpw
    print(data)
    db.user.insert_one(data)
    return jsonify({'msg':"registered"})

로그인

@app.route('/api/login', methods=['POST'])
def post_login():
    data = request.get_json()
    password = data['login_password']

    findID = db.user.find_one({"join_id":data['login_id']},{'_id': False})
    if findID:
        db_bpw = findID['join_password']
        db_id = findID["join_id"]
        checkpw = bcrypt.checkpw(password.encode('utf-8'), db_bpw.encode('utf-8'))
        print(checkpw)
        if checkpw:
            jwt_token = jwt.encode({"id":db_id, 'exp':datetime.utcnow() + timedelta(weeks=5)}, app.config['JWT_SECRET_KEY'], algorithm)
            str_jwt = jwt_token.decode('utf-8')
            db.user.update({'join_id':db_id}, {'$set':{'jwt':str_jwt}})
            return jsonify({'msg':"allowed", "name":db_id,"access_token":str_jwt })
    print(data)
    return jsonify({'msg':"tryagain"})

받아온 데이터의 비밀번호와 db에 있는 비밀번호를 비교한다. db에 있는 값은 암호화된 값. checkpw가 true라면 로그인 과정을 진행한다. jwt 토큰을 발급해서 다시 클라이언트로 보내주자. 토큰의 payload에는 유저 id가 담겨있고, 유효기간은 5주로 일단 해 놓았다. 어세스 토큰과 리프레쉬 토큰에 대해서 조금 더 공부해 보아야겠다.

 

if (msg == "allowed") {
        context.setUser({
          name: response.data.name,
          id: details.id,
        });
        const access_token = response.data.access_token;
        cookies.set("jwt", access_token, {
          path: "/",
          maxAge: 60 * 60 * 24 * 30, //httponly 옵션을 없애니까 된다,,
        });
} else if (msg == "tryagain") {
        setError("ID와 비밀번호를 정확히 입력해 주세요. ");
}

클라이언트에서는 받아온 jwt 토큰을 쿠키에 저장했다. universal-cookie 라는 패키지를 이용했음. httpOnly 옵션을 넣었더니 쿠키가 생성이 안됐다. 혹시 몰라서 뺐더니 되더라. 왜그럴까 찾아봤더니 도메인이 .com 같은 류가 아니면 막는단다..

 

html-to-image

dom 요소를 이미지로 변환할 수 있다. 다양한 형태의 이미지파일을 얻을 수 있다.

const onSave = useCallback(() => {
    console.log(canvas.current.firstChild.style.width);
    if (canvas.current === null) {
      return;
    }
    toPng(canvas.current.firstChild, {
      cacheBust: true,
    })
      .then((dataUrl) => {
        console.log(dataUrl);
        const link = document.createElement("a");
        link.download = "my-topster.png";
        link.href = dataUrl;
        link.click();
      })
      .catch((err) => {
        console.log(err);
      });
  }, [canvas]);

useRef 훅으로 해당 dom을 가져와서 toPng 함수에 매개변수로 넘겼다. 이미지를 dataUrl 형식으로 반환하는데 그대로 이미지 파일로 저장이 되더라. data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAk0AAAIpC... 대충 이런 형태이다.