1. 前端怎麼實現登錄和注冊
登錄注冊設計到數據儲存和讀取,需要後端代碼的支持下才能前端
2. 微信小程序 前端登錄注冊流程圖
小程序登錄
3. web前端開發頁面的注冊怎麼實現
寫個表單,一個提交按鈕,點擊按鈕就調用js的函數用ajax把值傳到後台~
4. 用戶系統設計(上)前端設計和多平台賬號打通
前言
用戶系統是很多產品最基礎的構成之一,但是越是基礎越是開源設計想要完善也更難。在設計用戶系統的時候,首先想到的關鍵詞是注冊和登錄。但並不是有這兩者就足夠了,更加完善用戶系統本身還需要考慮:多平台賬號打通,同平台賬號之間綁定與解綁,賬號安全等及需要怎樣的前端設計才是滿足這個產品本身定位和用戶操作的設計。
用戶系統的實現簡單來說有兩種方式:1、自己構建用戶系統;2、用第三方授權。第三方授權獲得的用戶信息有限且受制於人,而自己構建用戶系統研發及用戶使用成本均不如第三方授權。所以更多的是兩者並存,相互補充。
在定義服務端欄位或需求若有不完善和不專業的地方,希望大家多提意見,共同完善。
一、總結需求
1.用戶系統基本注冊/登錄功能及前端頁面設計
2.多平台賬號打通,即在單一app注冊的用戶,能夠使用此賬號登陸系統內所有app
3.用戶相對獨立,對於單一app來說用戶身份唯一
二、前端設計
登陸注冊主流設計有三種(原型如下)
1. 賬號密碼優先
賬號密碼優先是最常見的一種登錄注冊設計,適用於普遍場景,鼓勵用戶用注冊方式登錄,有利於產品引導用戶完善更多的資料,留存自己的用戶信息。例如知乎是以賬號密碼登錄為最優先,且會隱藏第三方授權登錄。現在的賬號密碼登錄都會以用戶注冊方式代替系統生成的userid作為賬號。純賬號密碼登錄是較為早期的設計,例如早期qq和飛信。
2. 手機號快捷登陸優先
手機號快捷登陸,也叫免密登錄/簡訊驗證碼登錄,適用於用戶不登錄能夠完成大部分行為,只有在某種場景下必須獲得用戶身份時才需要用戶登錄,且此時用戶的想要完成的行為是被要求登錄操作打斷的。常見的如團購類產品,用戶在應用內進行了商品的瀏覽、篩選、添加到購物車,當要進行最後一步付款操作時,發現未登錄。這時繁瑣的注冊或者登錄都有可能導致這筆訂單甚至這個用戶的流失。所以這時獲取用戶身份的方式一定要盡可能便捷。
3. 第三方授權登陸優先
第三方授權登陸,適用於對用戶資料和許可權要求不高快速解約開發成本的產品。建議在應用構建用戶系統的前期可以首先接入第三方,快速的實現登錄功能。但是若想建設自身關系鏈還是需要完善自己的用戶系統。
用戶資料實際也屬於用戶系統等設計的內容。是否要增加此項的判斷原則是根據這個產品對用戶資料的需求程度決定用戶注冊時是否要增加資料填寫頁,資料填寫頁是強制阻斷性的還是可跳過的,必填的資料項有哪些,希望填的有哪些。例如是需要關系鏈的那麼注冊的時候就應該強制用戶去填寫資料設置必要的昵稱和頭像,這樣的用戶對於此類應用來說才屬於有效用戶,不然在app內用戶點進資料頁,全是系統自動生成的垃圾信息,對於建設關系鏈和留存傷害較大。
交互細節上又可以延伸用戶進行注冊或登錄需要幾個步驟?這些步驟是在一個頁面上承載還是一步一個頁面以多頁面去承載?單一頁面承載的優勢是用戶能夠有很清楚的預期,他完成注冊需要進行哪些操作,但是劣勢是一個頁面承載過多信息顯得雜亂,操作的次序也會不明確;多頁面承載的劣勢是用戶對完成注冊的具體行為沒有完整預期,更容易跳出,優勢是頁面整潔並且路徑單一,能引導用戶完全按照通暢的預設路徑進行。我個人更推薦後者,因為用戶預期可以用頁碼/步驟管理用戶預期。
下面是我根據我們產品的定位和需求設計的用戶登錄/注冊系統原型:如上所說,我設計的用戶系統是需要承載多產品的,所以我設計融合賬號密碼登錄和手機號快捷登錄兩種方式,以用戶出發需要登錄的場景去切換展現在用戶面前的是哪一種。
補充一些貼心的小點:
1.申請讀取本機號碼許可權,並幫用戶填寫
2.申請讀寫簡訊許可權,獲取到驗證碼後自動填寫並點擊下一步
3.應該前置到提醒:上次登錄方式,合法的手機號,正確的圖形驗證碼等等
三、服務端設計
很多產品,特別是沒有技術背景的產品不會去接觸和設計服務端需求,實際上我自己日常工作中接觸服務端需求也並不多,並不是說產品要負責設計一個完善的用戶系統服務端,而是要學會以服務端同事能懂的方式表達清楚自己的訴求,兩邊對功能的實現不會有太多的偏差,這是產品設計服務端目的所在。
簡單的用戶系統服務端的基本功能需求為:判斷賬號身份(注冊/未注冊),賬號身份生成(新用戶分配id),賬號密碼驗證;這里要設計的並不滿足於注冊登錄,需要考慮多平台賬號打通的用戶系統並且要和在打通情況下單一平台或多個平台之間,用戶的多個賬號之間綁定於解綁。現在先說一下多平台賬號打通需要考慮哪些問題:
1.用戶系統身份的創建,因為我們是多平台的系統,所以用戶身份只能納入手機號注冊的用戶,若第三方授權注冊的也算用戶系統用戶,在賬號綁定的那一關則會出現混亂;
2.實現多平台賬號打通,要實現多平台賬號打通,即所有接入多平台都能夠查詢到此用戶身份;
3.平台間用戶身份獨立,要實現平台間用戶身份獨立,則需要在用戶系統用戶身份的基礎上創建一個平台的用戶身份;
(一) 用戶系統多平台打通
名詞解釋
1)Appid:接入用戶系統時首先分配,用於區別接入的各個app;
2)Unionid:用戶手機注冊時,由用戶系統根據手機號創建,在用戶系統作為用戶唯一身份標識;
3)Appuserid:用戶注冊時,由app服務端根據union或者第三方授權的openid創建,在app內作為用戶唯一的身份標識;
基本原則
1)手機號作為用戶系統賬號的注冊的唯一途徑,根據手機號在用戶系統服務端創建並保存unionid;app服務端根據unionid創建並保存appuserid,且將unionid對應保存;
2)用戶系統同一unionid可對應不同的appuserid
3)使用第三方openid授權的注冊用戶不計入用戶系統僅存在app服務端作為單app用戶,即unioid為空只生成appuserid;第三方授權包括微博微信,QQ,Facebook,Twitter
1. 主線流程圖
手機號注冊主流程為:
用戶注冊時,用戶系統服務端需要驗證手機號+驗證碼是否為真,此手機號是否已有對應unionid;若有提示已注冊,請登錄;若無創建對應unionid,app服務端根據unionid創建appuserid。至此成功生成了用戶系統身份及當前app用戶身份。
手機號登陸主流程為:
用戶登錄時,用戶系統服務的驗證手機號+密碼是否為真,此手機號是否有對應unionid,若有,則說明此用戶有用戶系統身份。
還需要app服務端需要查詢是否有對應的appuserid,若有說明此用戶有此app身份,直接用其appuserid登錄;若無則說明是用戶系統內其他聯合app注冊用戶根據unionid創建此app的用戶身份,至此登錄成功。
用戶系統是大多數app都會有多構成,單一的用戶系統也並不那麼復雜,但是若要構建產品矩陣進行多平台間的用戶打通,加上帳號綁定與解綁,並不是一時半會能夠想清楚的需求,若大家感興趣為會繼續補充帳號綁定和賬號安全產品應該關心和設計的事情。謝謝:)
5. Java前端登錄後隱藏登錄和注冊按鈕怎麼做
可以使用jquery的hide()方法。舉個例子,<button id="login" class="login">登錄</button>
登錄成功之後,使用$("#login").hide();
6. 前端注冊商標屬於哪一類
前端屬於商標分類第9類0913群組;
經路標網統計,注冊前端的商標達239件。
注冊時怎樣選擇其他小項類:
1.選擇注冊(模擬及數字遠程位置調節器,群組號:0910)類別的商標有1件,注冊佔比率達0.42%
2.選擇注冊(信號分配裝置,群組號:0910)類別的商標有1件,注冊佔比率達0.42%
3.選擇注冊(連接器(數據處理設備),群組號:0901)類別的商標有1件,注冊佔比率達0.42%
4.選擇注冊(反調制器,群組號:0907)類別的商標有1件,注冊佔比率達0.42%
5.選擇注冊(音頻接收器和視頻接收器,群組號:0907)類別的商標有1件,注冊佔比率達0.42%
6.選擇注冊(微波、發光和紅外線屏障,群組號:0910)類別的商標有1件,注冊佔比率達0.42%
7.選擇注冊(科學衛星,群組號:0910)類別的商標有1件,注冊佔比率達0.42%
8.選擇注冊(電氣設備和電子設備外殼、框架和櫃,群組號:0908)類別的商標有1件,注冊佔比率達0.42%
9.選擇注冊(視頻伺服器(視頻信號處理裝置),群組號:0901)類別的商標有1件,注冊佔比率達0.42%
10.選擇注冊(信號遙控電力設備,群組號:0907)類別的商標有1件,注冊佔比率達0.42%
7. 11 | 登錄前端實現
前端任務點,編寫登錄請求函數,和 用戶注冊 類似,前端拿到用戶名和密碼發起 POST 請求。
收到 token 如何持久化存儲,如何讓每次請求都攜帶 token 是這里的點。
用戶登錄的介面詳情可以點 這里 。
這里有可以優化的點,未來可能需要添加驗證碼等附加信息,這個時候就需要添加函數參數,就會比較麻煩,可以將參數數據格式包裝成一個對象。當然,這里還是使用第一種方法了。
這不是重點,重點是登錄成功後,我們要做的事情。
按照介面約定,登錄成功我們可以得到如下信息:
這里我們要用到 token 欄位,是我們現在有 token 了,但一刷新就沒了,所以我們要做一下持久化存儲,你想存哪裡就存哪裡,只要你能找到。這里就存儲 localStorage 中了,在 Chorme86 中你甚至可以存到一個本地的文本文件中,只不過讀取速度比較慢罷了。
除了 token,我們還要將用戶信息存下來,比如首頁展示用的用戶頭像等信息。
關於本地信息的安全性問題,本地保存的用戶信息並不作為數據請求的憑證,僅供展示使用,當用戶更改本地的用戶信息對於登錄的狀態不會有影響,因為後端的判斷依據是 token,token 有效就登錄成功,而不是說本地存儲的用戶信息是誰服務端就認為你是誰,前端是不可信的。這種登錄方式的危險點在於用戶 token 被盜,但這很難避免,最不安全的是人。。。
登錄成功,返回首頁,用戶名或者是用戶頭像並沒有同步更新,這是因為,這里是單頁應用,你在 login 頁面將登錄用戶信息存到 localStorage 中,然後跳轉到了首頁,此時頁面沒有刷新,而 localStorage 中的信息沒有及時更新到 DOM 中,此時的用戶信息還是你沒有進入 login 頁面的用戶信息,自然是無法展示的,怎麼解決呢?很簡單,刷新一下。
當頁面刷新時,用戶信息會從 localStorage 中讀取,顯示的就是現在的登錄用戶了,但。。。
我不想刷新。
也很簡單,搞成響應式數據就好了呀。來人呀,上Vuex。
當你將 token 存在 cookie 中,前端並不需要主動設置,默認就攜帶傳給了服務端,而這里我們存到 Authorization 中,就需要我們設置一下,攔截請求,在請求發送前添加 token。
好的,來捋一捋流程。
用戶訪問 /login,被前端路由處理,指向Login.vue,用戶看到登錄框,填入自己的賬號,當用戶填寫賬號時,name password被實時監聽,同時會對登錄按鈕的可操作產生影響,只有當用戶將賬密輸入完整時,登錄按鈕可用。
前端收集用戶信息,調用 network 中封裝的 longin 請求函數,該請求發送前被攔截,添加 token,可能為空,使用賬密登錄時,token沒實際效用。
後端檢查成功給響應,前端將響應中數據的 token 通過觸發 mutations 更新 Vuex 中 state,同時,將該 token 存到 localStorage,以免用戶關掉頁面導致 token 丟失。
登錄成功跳到應用首頁,用戶頭像等信息通過 Vuex 獲取,因為 Vuex 中的數據是響應式的,此時從 login 跳轉到首頁,用戶頭像等信息也會得到相應的更新。
當用戶新增文章時,只需向伺服器傳文章數據就可以了,而對於文章作者的相關信息則由後端從請求頭中的 token 解析得到,這里需要注意,前端不要將本地的用戶信息作為准確的作者信息,對於用戶可以偽造的信息要做最小化的信任,用戶完全有能力將本地用戶名從張三改為李四,而最終作者是那個則需要由用戶提供的 token 來判定,雖說 token 也有可能被偽造,但難度相對較大,往往是被竊取的可能性更大。
無密碼登錄其實還是需要「密碼」的,只不過是換了一個臨時性的對人不可讀的字元串來代替罷了,並且每次請求幫你填好了。
在不考慮安全性的情況下本質上其實就是你將密碼存到了瀏覽器里,然後你每次訪問網站時讓瀏覽器幫你輸入用戶名和密碼,這個過程你是無感知的,這樣自己就不用像個憨憨一樣每次刷新就要填一遍表單。
填表是一件非常無聊的事。
要學一波 TypeScript 了呀。
8. 前端開發和後端開發有什麼區別
技術棧不同
前端開發視學習JavaScript而後端開發,主要是學Java!
9. 安卓前端注冊用戶發送email和用戶名,後端伺服器怎麼接受
就跟接收郵件一樣的嘛 注冊的話就像QQ號一樣咯
10. 前端 注冊頁面 當輸入框失去滑鼠點擊焦點時,邊框紅框顯示
function checkUsername() {
//1.獲取用戶名值
var username =$("#username").val();
//2.定義正則
var reg_username =/^\w{8,20}$/;
//3.判斷,給出提示信息
var flag =reg_username.test(username);
if(flag){
//用戶名合法
$("#username").css("border","");
}else{
//用戶名非法,加一個紅色邊框
$("#username").css("border","1px solid red");
}
return flag;
$("#username").blur(checkUsername);