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

本文接續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的位置。這些在之後邏輯實現會填入實際的資料。這個應用也就只有這麼簡單兩個使用者界面，明天會在繼續實現邏輯。

參考資料

• RCF8628