ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

  • A+
所屬分類:ivx圖文教程

註冊與登錄(手機註冊登錄)

·註冊

第一步 搭建UI

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

第二步 獲取圖片驗證碼
首先判斷輸入的手機號類型是否為手機,如果類型為手機(11位的數),則包含圖片驗證碼的絕對定位容器可見。接下來再通過用戶數據庫獲取圖片驗證碼,並把圖片驗證碼 ID 和圖片驗證碼圖片保存起來,在獲取短信驗證碼時會用到。

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

第三步 獲取短信驗證碼
在具體應用中,考慮到驗證碼計算結果可能會出錯的情況,可以根據返回的發送結果去執行不同的動作,如果驗證碼錯誤,則需要重新獲取圖片驗證碼。

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

第四步 手機註冊
通過用戶數據庫發起手機註冊,提交用戶已填寫的手機號、短信驗證碼、昵稱及密碼,為保證所提交信息內容合法且非空,可以在發起手機註冊前加上非空判斷。

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

·登錄
通過用戶數據庫發起手機密碼登錄,這裡要考慮登錄成功和登錄失敗兩種情況

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

·保留登錄狀態
第一步 設置cookie
用戶登錄成功之後,服務端會返回用戶信息,同時也會向客戶端設置一個cookie,用來存儲當前用戶的登錄令牌(這個登錄憑證是後台生成的一個隨機字符串,對應當前用戶記錄,但不包含任何用戶信息)。

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

第二步 讀取cookie
在本案例中,我們設置頁面顯示的時候去獲取用戶信息,判斷用戶是否為匿名用戶,如果不是匿名用戶,則 cookie中已存在該用戶的登錄令牌,直接獲取用戶信息發起登錄即可;如果是匿名用戶,則需要發起用戶註冊登錄來獲取令牌。

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

·退出登錄
退出登錄只需要利用用戶數據表的退出登錄功能即可回到登錄頁。退出登錄後用戶下次進入網頁需要重新登錄。

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

註冊與登錄(郵箱註冊登錄)
預覽地址:https://v4pre.h5sys.cn/play/DVp4Gt7P?email=1
郵箱註冊的步驟與手機註冊的步驟基本相同,即獲取圖片驗證碼-->獲取郵箱驗證碼-->註冊
·註冊
第一步 搭建UI

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

第二步 獲取圖片驗證碼
首先判斷輸入的郵箱類型是否為郵箱,如果類型為郵箱,則包含圖片驗證碼的絕對定位容器可見。接下來再通過用戶數據庫獲取圖片驗證碼,並把圖片驗證碼 ID 和圖片驗證碼圖片存起來,在獲取郵箱驗證碼時會用到。

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

第三步 獲取郵箱驗證碼
在具體應用中,考慮到驗證碼計算結果出錯的情況,可以根據返回的發送結果去執行不同的動作,如果驗證碼錯誤,則需要重新獲取圖片驗證碼。

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

下圖是發送至我們郵箱的郵箱驗證碼。

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

第四步 郵箱註冊
通過用戶數據庫發起郵箱註冊,提交用戶已填寫的郵箱號、 郵箱驗證碼、昵稱及密碼,為保證所需提交信息的內容合法且非空,可以在發起郵箱註冊前加上非空判斷。

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

·登錄
通過用戶數據庫發起郵箱登錄,這裡需要考慮登錄成功和登錄失敗兩種情況

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

註冊與登錄(手機驗證碼登錄)
預覽地址:https://v4pre.h5sys.cn/play/DVp4Gt7P?code=1
手機驗證碼登錄與手機登錄、郵箱登錄共同點是仍然需要獲取圖片驗證碼和短信驗證碼;不同之處在於獲取短信驗證碼時的類型應選為“登錄驗證”而不是之前的註冊驗證,另外最後在登錄時,用戶數據庫應發起手機驗證碼登錄。
第一步 搭建UI

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

第二步 獲取圖片驗證碼
首先判斷輸入的手機類型是否為手機,如果類型為手機,則包含圖片驗證碼的絕對定位容器可見。接下來再通過用戶數據庫獲取圖片驗證碼,並把圖片驗證碼 ID 和圖片驗證碼圖片存起來,在獲取短信驗證碼時會用到。

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

第三步 獲取短信驗證碼
在具體應用中,考慮到驗證碼計算結果可能會出錯的情況,可以根據返回的發送結果去執行不同的動作,如果驗證碼錯誤,則需要重新獲取圖片驗證碼。在這裡要注意把獲取短信驗證碼的類型選為登錄驗證。

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

第四步 手機驗證碼登錄
通過用戶數據庫發起手機驗證碼登錄,提交用戶已填寫的手機號、短信驗證碼即可完成手機驗證碼登錄。

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

微信登錄與登錄後綁定手機
預覽地址:https://v4pre.h5sys.cn/play/DVp4Gt7P?wechat=1
·微信登錄
微信登錄只需要通過用戶數據庫發起微信公眾號登錄,登錄成功後即可獲取到用戶的openid,如果還需要獲取到用戶的其他信息,例如頭像、昵稱等,則要在配置中的授權方式一欄選擇獲取大權限。

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

·微信登錄後綁定手機
微信登錄後綁定手機的步驟與手機註冊的步驟基本相同,即獲取圖片驗證碼"獲取短信驗證碼"綁定手機,在獲取短信驗證碼時要注意把獲取短信驗證碼的類型選為綁定手機驗證。
第一步 搭建UI

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

第二步 獲取圖片驗證碼
首先判斷輸入的手機號類型是否為手機,如果類型為手機(11位的數),則包含圖片驗證碼的絕對定位容器可見。接下來再通過用戶數據庫獲取圖片驗證碼,並把圖片驗證碼 ID 和圖片驗證碼圖片保存起來,在獲取短信驗證碼時會用到。

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

第三步 獲取短信驗證碼
在具體應用中,考慮到驗證碼計算結果可能會出錯的情況,可以根據返回的發送結果去執行不同的動作,如果驗證碼錯誤,則需要重新獲取圖片驗證碼。

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

第四步 綁定手機
通過用戶數據庫綁定手機,提交用戶已填寫的手機號、短信驗證碼,即可實現微信登錄後綁定手機的功能。

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

在這裡要注意:微信綁定手機後,用戶的主ID仍然是微信的openid。例如:我們在微信登錄綁定手機後,向新建的測試數據庫提交一條測試數據,提交成功後該數據庫的提交用戶字段依然是微信的openid,而非手機號。

ivx基礎教程 最全面講解ivx中用戶註冊登錄功能ivx基礎教程 最全面講解ivx中用戶註冊登錄功能 ivx基礎教程 最全面講解ivx中用戶註冊登錄功能

注意:微信登錄、登錄後綁定手機均需要在微信中操作。

【附】案例下載鏈接:https://latest.ivx.cn/ih5/app/template/download?id=100

發表評論

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: