本系列文之後也会置於个人网站

本文接续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