欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

java編程之基于SpringBoot框架實現(xiàn)掃碼登錄

 更新時間:2021年09月23日 15:18:34   作者:莊周de蝴蝶  
本文將介紹基于SpringBoot + Vue + Android實現(xiàn)的掃碼登錄demo的總體思路,文中附含詳細示例代碼,有需要的朋友可以借鑒參考下,希望能夠有所幫助

完整代碼已上傳到GitHub。

Web端體驗地址:http://47.116.72.33/(只剩一個月有效期)

apk下載地址:https://github.com/zhangjiwei1221/qrscan/releases/tag/0.0.1。

用戶名:非空即可,密碼:123456,效果見文末,整體實現(xiàn)如有不妥之處,歡迎交流討論

實現(xiàn)部分參考二維碼掃碼登錄是什么原理。

項目簡介

后端:SpringBoot,Redis
前端:Vue,Vue RouterVueX、Axios、vue-qr、ElemntUI。
安卓:ZXing、XUI、YHttp。

實現(xiàn)思路

總體的掃碼登錄和OAuth2.0的驗證邏輯相似,如下所示:

image-20210921205657426

用戶選擇掃碼登錄可以看作是A:前端發(fā)授權(quán)請求,等待app掃碼。
用戶使用app進行掃碼可以看作是B:掃碼進行授權(quán),返回一個臨時Token供二次認證。
用戶在app進行確認登錄可以看作是C:進行登錄確認,授權(quán)用戶在Web端登錄。
后端在用戶確認登錄后返回一個正式Token即可看作是步驟D。
后續(xù)前端根據(jù)正式Token訪問后臺接口,正式在Web端進行操作即可看作是EF。

二次認證的原因

之所以在用戶掃碼之后還需要進行再一次的確認登錄,而不是直接就登錄的原因,則是為了用戶安全考慮,避免用戶掃了其他人需要登錄的二維碼,在未經(jīng)確認就直接登錄了,導(dǎo)致他人可能會在我們不知道的情況下訪問我們的信息。

實現(xiàn)步驟

用戶訪問網(wǎng)頁端,選擇掃碼登錄

用戶在選擇掃碼登錄時,會向后端發(fā)送一個二維碼的生成請求,后端生成UUID,并保存到Redis(固定有效時間),狀態(tài)設(shè)置為UNUSED(未使用)狀態(tài),如果Redis緩存過期,則為EXPIRE(過期)狀態(tài),前端根據(jù)后端返回的內(nèi)容生成二維碼,并設(shè)置一個定時器,每隔一段時間根據(jù)二維碼的內(nèi)容中的UUID,向后端發(fā)送請求,獲取二維碼的狀態(tài),更新界面展示的內(nèi)容。

生成二維碼后端接口:

/**
 * 生成二維碼內(nèi)容
 *
 * @return 結(jié)果
 */
@GetMapping("/generate")
public BaseResult generate() {
    String code = IdUtil.simpleUUID();
    redisCache.setCacheObject(code, CodeUtils.getUnusedCodeInfo(), 
                              DEFAULT_QR_EXPIRE_SECONDS, TimeUnit.SECONDS);
    return BaseResult.success(GENERATE_SUCCESS, code);
}

前端獲取內(nèi)容,生成二維碼:

getToken() {
    this.codeStatus = 'EMPTY'
    this.tip = '正在獲取登錄碼,請稍等'
    // 有效時間 60 秒
    this.effectiveSeconds = 60
    clearInterval(this.timer)
    request({
        method: 'get',
        url: '/code/generate'
    }).then((response) => {
        // 請求成功, 設(shè)置二維碼內(nèi)容, 并更新相關(guān)信息
        this.code = `${HOST}/code/scan?code=${response.data}`
        this.codeStatus = 'UNUSED'
        this.tip = '請使用手機掃碼登錄'
        this.timer = setInterval(this.getTokenInfo, 2000)
    }).catch(() => {
        this.getToken()
    })
}

后端返回二維碼狀態(tài)信息的接口:

/**
 * 獲取二維碼狀態(tài)信息
 *
 * @param code 二維碼
 * @return 結(jié)果
 */
@GetMapping("/info")
public BaseResult info(String code) {
    CodeVO codeVO = redisCache.getCacheObject(code);
    if (codeVO == null) {
        return BaseResult.success(INVALID_CODE, StringUtils.EMPTY);
    }
    return BaseResult.success(GET_SUCCESS, codeVO);
}

前端輪詢獲取二維碼狀態(tài):

getTokenInfo() {
    this.effectiveSeconds--
    // 二維碼過期
    if (this.effectiveSeconds <= 0) {
        this.codeStatus = 'EXPIRE'
        this.tip = '二維碼已過期,請刷新'
        return
    }
    // 輪詢查詢二維碼狀態(tài)
    request({
        method: 'get',
        url: '/code/info',
        params: {
            code: this.code.substr(this.code.indexOf('=') + 1)
        }
    }).then(response => {
        const codeVO = response.data
        // 二維碼過期
        if (!codeVO || !codeVO.codeStatus) {
            this.codeStatus = 'EXPIRE'
            this.tip = '二維碼已過期,請刷新'
            return
        }
        // 二維碼狀態(tài)為為正在登錄
        if (codeVO.codeStatus === 'CONFIRMING') {
            this.username = codeVO.username
            this.avatar = codeVO.avatar
            this.codeStatus = 'CONFIRMING'
            this.tip = '掃碼成功,請在手機上確認'
            return
        }
        // 二維碼狀態(tài)為確認登錄
        if (codeVO.codeStatus === 'CONFIRMED') {
            clearInterval(this.timer)
            const token = codeVO.token
            store.commit('setToken', token)
            this.$router.push('/home')
            Message.success('登錄成功')
            return
        }
    })
}

使用手機掃碼,二維碼狀態(tài)改變

當(dāng)用戶使用手機掃碼時(已登錄并且為正確的app,否則掃碼會跳轉(zhuǎn)到自定義的宣傳頁),會更新二維碼的狀態(tài)為CONFIRMING(待確認)狀態(tài),并在Redis緩存中新增用戶名及頭像信息的保存供前端使用展示,此外還會返回用戶的登錄信息(登錄地址、瀏覽器、操作系統(tǒng))給app展示,同時生成一個臨時Tokenapp(固定有效時間)。

用戶掃碼時的后臺處理:

/**
 * 處理未使用狀態(tài)的二維碼
 *
 * @param code 二維碼
 * @param token token
 * @return 結(jié)果
 */
private BaseResult handleUnusedQr(String code, String token) {
    // 校驗 app 端訪問傳遞的 token
    boolean isLegal = JwtUtils.verify(token);
    if (!isLegal) {
        return BaseResult.error(AUTHENTICATION_FAILED);
    }
    // 保存用戶名、頭像信息, 供前端展示
    String username = JwtUtils.getUsername(token);
    CodeVO codeVO = CodeUtils.getConfirmingCodeInfo(username, DEFAULT_AVATAR_URL);
    redisCache.setCacheObject(code, codeVO, DEFAULT_QR_EXPIRE_SECONDS, TimeUnit.SECONDS);
    // 返回登錄地址、瀏覽器、操作系統(tǒng)以及一個臨時 token 給 app
    String address = HttpUtils.getRealAddressByIp();
    String browser = HttpUtils.getBrowserName();
    String os = HttpUtils.getOsName();
    String tmpToken = JwtUtils.sign(username);
    // 將臨時 token 作為鍵, 用戶名為內(nèi)容存儲在 redis 中
    redisCache.setCacheObject(tmpToken, username, DEFAULT_TEMP_TOKEN_EXPIRE_MINUTES, TimeUnit.MINUTES);
    LoginInfoVO loginInfoVO = new LoginInfoVO(address, browser, os, tmpToken);
    return BaseResult.success(SCAN_SUCCESS, loginInfoVO);
}

手機確認登錄

當(dāng)用戶在app中點擊確認登錄時,就會攜帶生成的臨時Token發(fā)送更新狀態(tài)的請求,二維碼的狀態(tài)會被更新為CONFIRMED(已確認登錄)狀態(tài),同時后端會生成一個正式Token保存在Redis中,前端在輪詢更新狀態(tài)時獲取這個Token,然后使用這個Token進行登錄。

后端處理確認登錄的代碼:

/**
 * 處理未待確認狀態(tài)的二維碼
 *
 * @param code 二維碼
 * @param token token
 * @return 結(jié)果
 */
private BaseResult handleConfirmingQr(String code, String token) {
    // 使用臨時 token 獲取用戶名, 并從 redis 中刪除臨時 token
    String username = redisCache.getCacheObject(token);
    if (StringUtils.isBlank(username)) {
        return BaseResult.error(AUTHENTICATION_FAILED);
    }
    redisCache.deleteObject(token);
    // 根據(jù)用戶名生成正式 token并保存在 redis 中供前端使用
    String formalToken = JwtUtils.sign(username);
    CodeVO codeVO = CodeUtils.getConfirmedCodeInfo(username, DEFAULT_AVATAR_URL, formalToken);
    redisCache.setCacheObject(code, codeVO, DEFAULT_QR_EXPIRE_SECONDS, TimeUnit.SECONDS);
    return BaseResult.success(CONFIRM_SUCCESS);
}

效果演示

在這里插入圖片描述

在這里插入圖片描述

以上就是java編程基于SpringBoot框架實現(xiàn)掃碼登錄的詳細內(nèi)容,更多關(guān)于java編程SpringBoot框架實現(xiàn)掃碼登錄的資料請關(guān)注腳本之家其它相關(guān)文章!

相關(guān)文章

  • 推薦幾款非常實用的IDEA插件小結(jié)

    推薦幾款非常實用的IDEA插件小結(jié)

    這篇文章主要介紹了推薦幾款非常實用的IDEA插件小結(jié),解決你開發(fā)中可望而又不好找的插件,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2019-01-01
  • 關(guān)于Java中@SuppressWarnings的正確使用方法

    關(guān)于Java中@SuppressWarnings的正確使用方法

    這篇文章主要介紹了關(guān)于Java中@SuppressWarnings的正確使用方法,@SuppressWarnings注解主要用在取消一些編譯器產(chǎn)生的警告對代碼左側(cè)行列的遮擋,有時候這會擋住我們斷點調(diào)試時打的斷點,需要的朋友可以參考下
    2023-05-05
  • Window搭建部署RocketMQ步驟詳解

    Window搭建部署RocketMQ步驟詳解

    這篇文章主要介紹了Window搭建部署RocketMQ步驟詳解,RocketMq是一個由阿里巴巴開源的消息中間件,脫胎去阿里每部使用的MetaQ,在設(shè)計上借鑒了Kafka。,需要的朋友可以參考下
    2019-06-06
  • java應(yīng)用占用內(nèi)存過高排查的解決方案

    java應(yīng)用占用內(nèi)存過高排查的解決方案

    這篇文章主要介紹了java應(yīng)用占用內(nèi)存過高排查的解決方案,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2021-03-03
  • java web實現(xiàn)簡單聊天室

    java web實現(xiàn)簡單聊天室

    這篇文章主要為大家詳細介紹了java-web實現(xiàn)簡單聊天室,含拍一拍功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-11-11
  • Spring-IOC容器-Bean管理-基于XML方式超詳解

    Spring-IOC容器-Bean管理-基于XML方式超詳解

    這篇文章主要介紹了Spring為IOC容器Bean的管理,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2021-08-08
  • Java 實現(xiàn)攔截器Interceptor的攔截功能方式

    Java 實現(xiàn)攔截器Interceptor的攔截功能方式

    這篇文章主要介紹了Java 實現(xiàn)攔截器Interceptor的攔截功能方式,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2021-10-10
  • java 對象數(shù)組排序

    java 對象數(shù)組排序

    當(dāng)遇到數(shù)組排序時,我們經(jīng)常會使用學(xué)過的幾種排序方法,而java 本身提供了Arrays.sort,在數(shù)據(jù)元素較少或者對效率要求不是抬高時,直接使用Arrays.sort來的更容易。查看一下源碼后Arrays.sort 本身采用的是快速排序。
    2015-04-04
  • 如何使用XPath提取xml文檔數(shù)據(jù)

    如何使用XPath提取xml文檔數(shù)據(jù)

    這篇文章主要介紹了如何使用XPath提取xml文檔數(shù)據(jù),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-08-08
  • Sentinel中實現(xiàn)限流的兩種方法

    Sentinel中實現(xiàn)限流的兩種方法

    本文給大家介紹了Sentinel中實現(xiàn)限流的兩種方法,限流是一種通過控制系統(tǒng)對外提供的資源、服務(wù)或接口的訪問數(shù)量或速率,以保護系統(tǒng)免受過載的一種策略,需要的朋友可以參考下
    2024-02-02

最新評論