iT邦幫忙

鐵人檔案

第 12 屆 iThome 鐵人賽
回列表
Modern Web

30天Vue出Google SSO 系列

前端使用最熱門前端框架[Vue]搭配[Vuetify]套件實作,後端使用[Nodejs]與[MongoDB]資料庫實作,完美複製Google的單一登入入口(Single Sign-On)..............................................簡易版xD

參賽天數 9 天 | 共 30 篇文章 | 20 人訂閱 訂閱系列文 RSS系列文
DAY 1

Day 01. 前言

#為什麼選這個主題? Google SSO是在我上完六角學院的Vue課程之後做的第一個專案,會做這個專案的原因是由於公司的需要整合所有系統的登入入口,剛好就這...

2020-09-14 ‧ 由 餅乾 分享
DAY 2

Day 02. 專案規劃

在一個專案啟動前,都會先有一個專案規劃書或規格書通常第一版會漏很多資訊,或是不合理的條件,然後慢慢的去修定版本內容基本上會包含: 概述 專案簡介 目標 系統...

2020-09-15 ‧ 由 餅乾 分享
DAY 3

Day 03. F2E-建立專案

今天目標是建立前端的專案以及介紹資料夾結構至於過程中會使用到的如: Vue、Vuetify、Vue Cli會稍微帶過,但就不詳細介紹了但會附上連結,怕看不懂的...

2020-09-16 ‧ 由 餅乾 分享
DAY 4

Day 04. F2E-專案結構

今天這篇會來認識一個剛創建完的專案的資料夾結構認識專案結構很重要,認識後才知道如何整理分類檔案,才不會亂亂塞 #專案結構 在創建完專案之後,專案資料夾裡面會...

2020-09-17 ‧ 由 餅乾 分享
DAY 5

Day 05. F2E-首頁開發

今天要來實作首頁的部分應該會有人覺得很奇怪,為什麼SSO會需要首頁? 做登入頁就好了吧? 需要首頁的原因是這樣的 你就做的跟Google一樣就好了!! 而...

2020-09-18 ‧ 由 餅乾 分享
DAY 6

Day 06. F2E-登入頁開發

#頁面分析 應該9成9以上的人都有做過Google登入的動作吧? (沒有的趕快去試試看~)在Google登入時,會有輸入帳號、輸入密碼、或是驗證等等頁面,在導...

2020-09-19 ‧ 由 餅乾 分享
DAY 7

Day 07. F2E-輸入帳號

回顧一下,昨天有分析登入頁會有4個子頁: 輸入帳號 選擇帳號 輸入密碼 驗證身分 後面幾天會分別來把四個子頁的畫面做出來~那我們就開始吧!...

2020-09-20 ‧ 由 餅乾 分享
DAY 8

Day 08. F2E-選擇帳號

昨天漏個一個小地方沒有改到,就是我們卡片的 cardTitle 和 cardSubTitle它還是寫死的xD 趕快來補一下作業~ #Step 1 打開 /vi...

2020-09-21 ‧ 由 餅乾 分享
DAY 9

Day 09. F2E-輸入密碼

今天進度目標要完成登入頁的 輸入密碼 頁~ #輸入密碼開發 其實 輸入密碼 頁,跟 輸入帳號 頁幾乎一樣參考Google畫面 所以第一步... ctrl+c...

2020-09-22 ‧ 由 餅乾 分享
DAY 9

Day 10. F2E-表單驗證

到昨天為止,基本的畫面已經完成了~ 今天會著重在程式邏輯,要來做 [輸入帳號] 及 [輸入密碼] 的表單驗證部分因為還沒做到串接後端,所以都先使用假資料來驗證...

2020-09-24 ‧ 由 餅乾 分享