如何以与供应商无关的方式从移动应用程序实现二维码交叉登录作为网站或 web 应用程序的身份验证方法？

Question

我正在为我的 web 应用程序使用 Django 2.2。

而且我一直在寻找适合使用移动应用程序通过二维码交叉登录到 webapp 的教程。

基本上工作流程是这样的：

预期工作流程

1. 用户通过桌面访问网站
2. 选择用户名/密码或二维码登录（我们假设用户已注册）
3. 用户选择二维码登录
4. 提示用户安装移动应用程序（可以是 android 或 iOS）
5. 用户安装移动应用程序并使用用户名/密码登录。
6. 在移动应用程序上，用户然后同意使用二维码作为替代登录（这是一次完成）
7. 此后，在以后的登录中，当用户按照步骤 3 选择二维码登录时，他们使用移动应用程序扫描网站登录页面上生成的二维码。
8. 然后移动应用程序使用 FaceID 或 FingerPrint ID（假设为 iOS）来允许登录。用户按下移动应用程序上的“是”按钮以确认登录。
9. 以某种方式动态通知 web 应用程序并允许在桌面浏览器上登录。

我不太明白后端的移动和网络应用程序如何相互协作以无缝实现这一目标。

我发现了什么

我确实找到了这个似乎不再维护的库https://github.com/aruseni/django-qrauth。但是我仍然不太明白移动应用程序和 webapp 后端之间的流程是如何工作的。

我还发现这个https://medium.com/@ksarthak4ever/django-two-factor-authentication-2ece42748610似乎将手机用作 2FA 设备。除非我误解了，否则不完全是我正在寻找的用例。

我确实找到了这篇文章https://backendless.com/how-to-implement-mobile-to-web-cross-login-using-a-qr-code/这就是给我“交叉登录”这个词的原因。然而，这篇文章严重倾向于这个特定的供应商。

我正在寻找对概念的“理解”，而不依赖于供应商实现的细节。

我不是在寻找什么

如果我的问题措辞不当并被误解，我将本节包含在内以明确我不寻找的内容。

我不是在寻找二维码作为身份验证器应用程序的 2FA 确认的用例。

我还没有查看代码示例。我只想首先清楚地了解移动和网络应用程序之间的工作方式。尽管我在猜测，但我相信 JWT 是必需的。

工作流比实际代码更受欢迎，因为我想首先了解它是如何工作的。

Answer 1

关键概念是当用户和浏览器匹配时就会发生登录。用户是指已经被服务器识别（认证）的用户（或用户设备）。

1. 用户的PC浏览器请求二维码登录服务器（没有任何帐户信息）
2. 服务器生成登录请求密钥并将密钥发送到用户的浏览器。密钥显示为二维码。（这个键的作用是识别浏览器）
3. 用户已登录的设备（user）读取密钥（QR）并使用密钥向服务器发送登录接受请求。
4. 此时，服务器就知道用户和浏览器是谁了。
5. 服务器允许浏览器以用户身份登录。

• 识别浏览器的关键可以是会话或网络套接字通道或任何其他形式的信息。
• 服务器必须存储密钥，直到登录过程完成。
• 如果收到有效的登录接受请求，服务器应提示浏览器登录。（服务器->客户端，推送）。有多种技术可以实现这一点。（通过 AJAX、Web 套接字、推送通知服务等进行轮询。）

我将用 Django-channels Web 套接字框架来解释它。（在这种情况下，登录请求密钥和频道名称相同。但不同的密钥和频道名称也可以。）

1. browser：用户选择二维码登录。（没有任何账户信息）
2. 后端：建立了Web套接字通道。频道名称是安全随机生成的字符串（FOO）。key(FOO) 存储在 Redis 中，作为Django-channels[redis]名为该字符串(FOO) 的通道。将密钥（FOO）发送到用户的浏览器。
3. browser : 获取密钥(=通道名称=FOO)并打开Web套接字通道(FOO)。并显示二维码（FOO）。
4. 用户（智能手机）：用户启动智能手机应用程序（已登录）。并扫描二维码（FOO）。用户智能手机应用程序向服务器发送带有二维码信息（FOO）的登录接受请求
5. 后端：服务器通过 Web 套接字通道 (FOO) 发送安全生成的登录密钥 (BAR)。
6. browser : 通过 Web 套接字通道（名称为 FOO）获取登录密钥（BAR）并使用登录密钥（BAR）重定向到登录 url。
7. 服务器：获取登录密钥（BAR）并让浏览器以用户身份登录

登录请求密钥（FOO）可以是 JWT（包含密钥、url、过期等）或只是安全字符串（根据场景而变化）。它不包含帐户信息，服务器必须存储它。

登录密钥（BAR）通常是 JWT。使用 JWT，它包含帐户信息，服务器不必存储密钥。（无状态）

Answer 2

我想你想做一些像 WhatsApp\xe2\x80\x99s web 这样的事情，用户通过 QR 码登录到网络应用程序，如果我正在做这样的实现，我\xe2\x80\x99ll 会按如下方式执行。

\n

\n
1. 当用户到达登录页面时，我们使用随机令牌创建一个 logInSession 并将其保存到数据库中。
\n
2. 我们将该随机令牌发送到浏览器，浏览器将根据随机令牌呈现二维码。我们启动 \xe2\x80\x98log_me_in\xe2\x80\x99 视图的池化来检查用户是否扫描了条形码。
\n
3. 用户转到移动应用程序并选择登录浏览器活动，这将启动相机。
\n
4. 在手机上读取 QR 后，使用扫描的令牌向后端发出请求，并使用用户名更新 logInSession。
\n
5. 下次调用 \xe2\x80\x98log_me_in\xe2\x80\x99 视图时，根据用户名登录用户并告诉 js 重定向到主页。
\n

\n

希望这足够清楚。

\n