隨手扎
【用Keycloak學習身份驗證與授權32】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的位置。這些在之後邏輯實現會填入實際的資料。這個應用也就只有這麼簡單兩個使用者界面，明天會在繼續實現邏輯。