iT邦幫忙

鐵人檔案

第 12 屆 iT 邦幫忙鐵人賽
回列表
Modern Web

30天Vue出Google SSO 系列

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

參賽天數 9 天 | 共 30 篇文章 | 8 人訂閱 訂閱系列文 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 打開 /v...

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

Day 09. F2E-輸入密碼

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

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

Day 10. F2E-表單驗證

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

2020-09-24 ‧ 由 餅乾 分享