πŸ›  Node.js web development

μ›Ήκ°œλ°œ - 4 νŒ¨μŠ€μ›Œλ“œ ν•΄μ‹±/둜그인/λ‘œκ·Έμ•„μ›ƒ

hanwitjus 2021. 11. 10. 17:20

μˆ˜μ •λœ 사항

  • Passport.jsλ₯Ό μ‚¬μš©ν•œ νšŒμ›κ°€μž… 및 둜그인/λ‘œκ·Έμ•„μ›ƒ
  • λΉ„λ°€λ²ˆν˜Έλ₯Ό hash, salt κ°’μœΌλ‘œ μ €μž₯함
  • 둜그인 μ„Έμ…˜ μœ μ§€
  • 둜그인 μƒνƒœ λ„€λΉ„κ²Œμ΄μ…˜ 바에 ν‘œμ‹œ
  • errorPage UI μˆ˜μ •

 

이닀.

 

사싀 Passport.jsλ₯Ό μ‚¬μš©ν•˜λ‹ˆκΉŒ μ„Έμ…˜ μœ μ§€λž‘ λ‘œκ·Έμ•„μ›ƒ κΈ°λŠ₯을 κ΅¬ν˜„ν•˜κΈ°λŠ” μ–΄λ ΅μ§€ μ•Šμ•˜λ‹€.

 

μ•„λ¬΄νŠΌ κ·Έλž˜μ„œ μˆ˜μ •λœ μ½”λ“œλ“€μ€ 이렇닀.

 

registerController.js

 

User λͺ¨λΈμ΄ Passport.jsλ₯Ό ν”ŒλŸ¬κ·ΈμΈμœΌλ‘œ μ‚¬μš©ν•˜κ³  μžˆμ–΄ Passport.jsμ—μ„œ μ œκ³΅ν•˜λŠ” register λ©”μ†Œλ“œλ₯Ό μ‚¬μš©ν•΄μ„œ νšŒμ›κ°€μž… λ‘œμ§μ„ κ΅¬ν˜„ν–ˆλ‹€. (μ—¬κΈ°μ„œ λ­”κ°€ 잘λͺ»λλŠ”μ§€ 잘 μ•ˆλ˜λŠ” 점이 μžˆλŠ”λ° λ°‘μ—μ„œ λ‹€μ‹œ μ„€λͺ…ν•˜κ² μŒ)

 

μ•”νŠΌ μ €λ ‡κ²Œ νšŒμ›κ°€μž…μ„ μ§„ν–‰ν•˜λ©΄, νŒ¨μŠ€μ›Œλ“œ 값에 λŒ€ν•˜μ—¬ μ†”νŠΈμ™€ 해싱값이 μžλ™μœΌλ‘œ μ €μž₯λœλ‹€.

 

μ΄λ ‡κ²Œ

 

 

 

그리고 둜그인/λ‘œκ·Έμ•„μ›ƒ λ‘œμ§μ΄λ‹€.

userController.js

 

μ—¬κΈ°μ„œλ„ Passport.jsλ₯Ό μ‚¬μš©ν•˜μ—¬ 둜그인과 λ‘œκ·Έμ•„μ›ƒμ„ κ°„λ‹¨ν•˜κ²Œ μ½”λ“œ λͺ‡μ€„λ‘œ κ΅¬ν˜„ν–ˆλ‹€.

둜그인 λ‘œκ·Έμ•„μ›ƒ κΈ°λŠ₯은 잘 λœλ‹€.

 

 

그리고 이제 둜그인이 μœ μ§€λ˜κ³  μžˆμŒμ„ 보여주기 μœ„ν•΄μ„œ λ„€λΉ„κ²Œμ΄μ…˜λ°”λ₯Ό μˆ˜μ •ν•˜μ˜€λ‹€.

κ·Έ 전에 ν˜„μž¬ μ„Έμ…˜μ— μžˆλŠ” μ‚¬μš©μž 정보λ₯Ό λ°›μ•„μ˜€κΈ° μœ„ν•΄μ„œ main.js의 미듀웨어 ν•¨μˆ˜μ— λ³€μˆ˜λ₯Ό μ •μ˜ν•œλ‹€.

 

main.js

μ΄λ ‡κ²Œ Passport.jsμ—μ„œ μ œκ³΅ν•˜λŠ” isAuthenticated() λ©”μ†Œλ“œλ₯Ό μ΄μš©ν•˜μ—¬ 둜그인이 λ˜μ–΄μžˆλŠ”μ§€ μ•„λ‹Œμ§€ true/false값을 loggedIn λ³€μˆ˜μ— μ €μž₯ν•˜κ³ , 둜그인이 λ˜μ–΄μžˆλ‹€λ©΄ 둜그인 된 μ‚¬μš©μžμ˜ 정보λ₯Ό currentUser λ³€μˆ˜μ— μ €μž₯ν•œλ‹€.

 

그리고 이건 이제 flashMessages 처럼 λ·°μ—μ„œ κ°–λ‹€μ“Έ 수 있게 λœλ‹€.

κ·Έλž˜μ„œ layout.ejsλ₯Ό μ•„λž˜μ™€ 같이 μˆ˜μ •ν•΄μ„œ 둜그인이 μ•ˆλ˜μ–΄μžˆμ„ λ•ŒλŠ” login / register κ°€ 뜨게 ν•˜κ³ ,

둜그인이 λ˜μ–΄μžˆμœΌλ©΄ ν˜„μž¬ 둜그인 된 μ‚¬μš©μžμ˜ 이름을 보여주고 λ‘œκ·Έμ•„μ›ƒν•  수 μžˆλ„λ‘ 메뉴λ₯Ό λ„μ›Œμ€€λ‹€.

 

layout.ejs

 

 

그리고 μˆ˜μ •λœ μ—λŸ¬νŽ˜μ΄μ§€λŠ” μ΄λ ‡κ²Œ 생겼닀.

 

 

 

 

 

μˆ˜μ • 및 κ΅¬ν˜„ν•œ κΈ°λŠ₯의 μ‹€ν–‰μ˜μƒμ΄λ‹€.

 

 

 

 

그리고 이제 κ³ μΉ˜μ§€ λͺ»ν•œ λ¬Έμ œλŠ”, νšŒμ›κ°€μž…μ„ ν• λ•Œ DB에 μ‚¬μš©μžκ°€ μž…λ ₯된 값은 μ €μž₯이 λ˜λŠ”λ°

νšŒμ›κ°€μž…μ΄ μ™„λ£Œλ˜κ³  λ‚˜μ„œ index νŽ˜μ΄μ§€λ‘œ λ¦¬λ‹€μ΄λ ‰μ…˜μ΄ 이뀄지지 μ•ŠλŠ”λ‹€. κ·Έλž˜μ„œ ifλ¬Έκ³Ό elseλ¬Έ 각각에 μ½”λ“œμ— μ½˜μ†” 둜그λ₯Ό μ°μ–΄λ΄€λŠ”λ°

 

 

λ³΄λ‹€μ‹œν”Ό ifλ¬Έκ³Ό elseλ¬Έ λ‘˜λ‹€μ— λ“€μ–΄κ°€λŠ” 것 κ°™λ‹€. μ™œ μ΄λŸ¬λŠ”μ§€ λͺ¨λ₯΄κ² λ‹€. 이거 고치고, Validatorκ°€ μž‘λ™ν•˜κ²Œ ν•˜λ©΄ 

νšŒμ›κ°€μž…/둜그인/λ‘œκ·Έμ•„μ›ƒ κΈ°λŠ₯은 μ™„λ²½ν•˜κ²Œ κ΅¬ν˜„μ΄ λλ‚œλ‹€. ν›„...

 

 

 

(+ 2021.11.10 17:30 μˆ˜μ •)

 

생각보닀 ν°λ¬Έμ œκ°€ μ•„λ…”λ‹€...γ…‹ μ—­μ‹œ 맨날 μ½”λ”©ν•  땐 μžμž˜ν•œ μ‹€μˆ˜ λ•Œλ¬Έμ— μ΄λ ‡κ²Œ λœλ‹€.

μ•”νŠΌ λ¬Έμ œλŠ” 걍 main.js μ—μ„œ register에 λ§€ν•‘ν• λ•Œ redirectView μ•‘μ…˜κΉŒμ§€ 맀핑을 μ•ˆν•΄μ€˜μ„œ κ·ΈλŸ°κ±°μ˜€λ‹€...^^

 

 

μ΄λ ‡κ²Œ μΆ”κ°€ν•΄μ£Όκ³  νšŒμ›κ°€μž… λ‹€μ‹œ μ§„ν–‰ν•΄λ³΄λ‹ˆκΉŒ

 

μž˜λœλ‹€γ…‹γ…‹γ…‹

 

이제 Validator만 ν•˜λ©΄ λœλ‹€!!

 

 

 

LIST