iT邦幫忙

2021 iThome 鐵人賽

1
Software Development

用Keycloak學習身份驗證與授權系列 第 35

Day32 - 【實戰篇】Device Code(3)

本系列文之後也會置於個人網站


本文接續device code(2)

現在已經知道了Device Code的登入流程了,那麼實際應用起來是怎麼樣的呢? 本片來實現一個可以使用Device Code Flow登入的應用。

使用者界面設計

首先,與「快速開始」應用相同,同樣需要一個顯式使用者資訊的地方,以及登入與登出的按鈕。

是的非常簡單。但悄悄先回到RCF8628,有一部分描述使用者界面的範本。該界面建議包含:操作說明、登入連接和user_code


            +-----------------------------------------------+
            |                                               |
            |  Using a browser on another device, visit:    |
            |  https://example.com/device                   |
            |                                               |
            |  And enter the code:                          |
            |  WDJB-MJHT                                    |
            |                                               |
            +-----------------------------------------------+

                    Figure 2: Example User Instruction

在使用設備登入的這個模式下,需要登入的應用和用以登入的設備可以存在於不同裝置。以目前來說,具有鏡頭的智慧型手機是一個很好的用以登入設備的裝置。所以可以在登入界面上,在添加一個QR Code。只要智慧型手機可以使用網路,能與身份驗證與授權伺服器通訊,就可以透過QR Code取得需要登入的相關資訊,通常也就是一個URI,可以透過瀏覽器開啓登入頁面。

            +-------------------------------------------------+
            |                                                 |
            |  Scan the QR code or, using     +------------+  |
            |  a browser on another device,   |[_]..  . [_]|  |
            |  visit:                         | .  ..   . .|  |
            |  https://example.com/device     | . .  . ....|  |
            |                                 |.   . . .   |  |
            |  And enter the code:            |[_]. ... .  |  |
            |  WDJB-MJHT                      +------------+  |
            |                                                 |
            +-------------------------------------------------+

      Figure 3: Example User Instruction with QR Code Representation
                     of the Complete Verification URI

就以RCF8628的範例來實現這次應用的登入畫面:

首先有一段描述說明如何登入:

掃描右邊 QR Code
或者使用瀏覽器開啟以下連結:
並輸入代碼登入

在界面上也就還會有QR Code、連接和user_code的位置。這些在之後邏輯實現會填入實際的資料。這個應用也就只有這麼簡單兩個使用者界面,明天會在繼續實現邏輯。

參考資料


上一篇
【雜談】 今天就來點閒聊吧 - 鐵人賽觀察①
下一篇
Day33 - 【實戰篇-預告】Device Code(4)
系列文
用Keycloak學習身份驗證與授權41
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言