windsuzu/Google-and-Local-Login-System

Login system using Google OAuth and local email/password.

Google and Local Login System

Login system using Google OAuth and local email/password.
Explore the docs »

View Demo · Report Bug · Request Feature

Table of Contents

• About
• Features
• Preview
• Roadmap
• License
• Contact
• Acknowledgements

---

About

Google and Local Login System (GaLLS) 是一個展示 Google 及 Local 帳號登入的網站。GaLLS 使用 node.js 與 express.js 框架建立後端系統 (back-end)，以及使用 ejs 和 bootstrap 5 建立前端頁面 (front-end)。網站架設於 Heroku 上。 GaLLS 使用 passport.js 來控制 Google 登入 (passport-google-oauth20)，以及透過伺服器資料庫帳號登入 (passport-local)。 Google 登入功能透過使用 Google Cloud Platform (GCP) 中的 OAuth 2.0 用戶端登入。 伺服器登入功能透過連接 MongoDB Atlas 建立 MongoDB 資料庫，並實作 bcrypt 加密用戶密碼，最後使用 passport-local 來驗證用戶登入。 關於 GCP、MongoDB Atlas 的建立流程與 passport.js 的核心概念可以參考以下的文件: GCP OAuth 流程 MongoDB Atlas 流程 passport.js 概念與實作 上架 Heroku 前需要知道的事 其他的網站特色與功能，還有相關程式碼請參考 Features 😊 Built With: Bootstrap 5 Node.js, Express.js, Express-Session, bcrypt ejs (Embedded Javascript) Google Cloud Platform MongoDB Atlas, mongoose passport.js, passport-google-oauth20, passport-local Heroku

---

Features

• 建立 MongoDB Schemas
  • 用戶資料 (User)
  • 發文 (Post)
• 將資料寫入 MongoDB
  • 註冊 (Signup)
  • 發文 (Post)
• 使用 Flash 來回傳伺服器訊息
  • 設定 flash
  • 呼叫 flash
  • [展示 flash 1] [展示 flash 2]
• 使用 passport.js 的 strategy 來進行登入
  • Google
    • Strategy, callback
    • Authenticate, redirect
  • Local
    • Strategy, callback
    • Authenticate, redirect
• 使用 passport-session 和 AuthCheck 來判斷用戶是否已經登入
  • [Passport Session] [Serialize / Deserialize]
  • 利用 session 判斷是否能進入主頁
  • 利用 session 判斷並渲染導航列的項目 (在 render 前需要傳入 user)
  • 利用 originalUrl 在登入後導向正確的網址
    • [主頁] [登入導向] [登出刪除 session]

Preview

Web-size

Phone-size

Roadmap

1. User Interface (ejs)
   • Home
   • Navbar
   • Login
   • SignUp
   • Profile
   • Post
   • Flash
2. Environment
   • Mongodb Atlas
   • Google Cloud Platform (OAuth)
   • Passport.js
3. Back-end
   • Express / Express-Router
   • DotEnv
   • Mongoose
   • Passport.js / GoogleStrategy / LocalStrategy
   • AuthCheck
   • Cookie-Session
   • Add Post
4. Front-End
   • Login Function (Google, Local)
   • SignUp Function (Local)
   • Conditional Navbar
   • Post Function
   • Logout Function
5. Deployment
   • Heroku

---

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Reach out to the maintainer at one of the following places:

• GitHub discussions
• The email which is located in GitHub profile

Acknowledgements

• Wilson Ren