简单实现移动端 APP 扫码登录 PC 客户端

编程小白狼

发布于 2024-12-31 08:27:43

12500

代码可运行

文章被收录于专栏：编程小白狼编程小白狼

运行总次数：0

代码可运行

简单实现移动端 APP 扫码登录 PC 客户端

在当今数字化时代，扫码登录已经成为一种极为便捷且安全的用户身份验证方式，广泛应用于各种应用场景中。本文将详细介绍如何简单实现移动端 APP 扫码登录 PC 客户端的技术流程与原理，帮助开发者快速搭建起这一功能。

一、整体流程概述

移动端 APP 扫码登录 PC 客户端的基本流程如下：

PC 客户端生成唯一的登录二维码，该二维码包含特定的登录信息或标识。
移动端 APP 开启扫码功能，扫描 PC 客户端展示的二维码。
移动端 APP 解析二维码获取相关信息，并将自身的用户认证信息（如账号、登录令牌等）发送至服务器进行验证。
服务器验证移动端 APP 发送的信息无误后，通知 PC 客户端登录成功，建立相应的会话连接，完成登录流程。

二、技术实现细节

（一）生成二维码

在 PC 客户端，可以使用一些开源的二维码生成库，例如 Python 中的 pyzbar 库或者 JavaScript 中的 qrcode.js 库。以 qrcode.js 为例，在 HTML 页面中引入该库后，可以通过以下代码生成包含特定信息（如登录请求的唯一标识 login_request_id）的二维码：

var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: "login_request_id=123456",
    width: 128,
    height: 128
});

这里的 login_request_id 是一个在 PC 客户端生成并与当前登录请求唯一对应的标识符，用于后续移动端与服务器交互时的关联验证。

（二）移动端扫码与信息发送

在移动端 APP 开发中，无论是 iOS 还是 Android，都提供了扫码的 API。例如在 Android 中，可以使用 ZXing 库来实现扫码功能。当扫码成功后，解析二维码获取其中的 login_request_id 信息，然后将移动端用户的登录凭证（如账号 user_account 和登录令牌 login_token）以及 login_request_id 一起发送到服务器。使用 OkHttp 库发送 POST 请求的示例代码如下：

OkHttpClient client = new OkHttpClient();

RequestBody formBody = new FormBody.Builder()
      .add("login_request_id", "123456")
      .add("user_account", "user@example.com")
      .add("login_token", "abcdefg")
      .build();

Request request = new Request.Builder()
      .url("http://your_server_api/login")
      .post(formBody)
      .build();

Response response = client.newCall(request).execute();

（三）服务器验证与登录处理

服务器端接收到移动端发送的请求后，首先验证 login_token 的有效性，确保用户身份合法。然后根据 login_request_id 找到对应的 PC 客户端登录请求记录，确认信息匹配后，标记该 PC 客户端登录成功，并建立与该客户端的会话连接。服务器可以使用数据库来存储登录请求记录和会话信息，例如在 MySQL 数据库中创建相关表：

CREATE TABLE login_requests (
    id INT AUTO_INCREMENT PRIMARY KEY,
    login_request_id VARCHAR(255) NOT NULL,
    user_account VARCHAR(255),
    status ENUM('pending', 'success', 'failed') NOT NULL DEFAULT 'pending'
);

CREATE TABLE user_sessions (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user_account VARCHAR(255),
    session_token VARCHAR(255)
);

在服务器端的验证代码（以 Node.js 为例）可能如下：

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));

app.post('/login', (req, res) => {
    const { login_request_id, user_account, login_token } = req.body;

    // 验证 login_token 的有效性
    if (validateLoginToken(login_token)) {
        // 查询登录请求记录
        const loginRequest = findLoginRequestById(login_request_id);
        if (loginRequest && loginRequest.user_account === user_account) {
            // 更新登录请求状态为成功
            updateLoginRequestStatus(login_request_id,'success');
            // 创建用户会话
            const sessionToken = createUserSession(user_account);
            // 通知 PC 客户端登录成功
            notifyPCLoginSuccess(login_request_id, sessionToken);
            res.send('Login successful');
        } else {
            res.status(401).send('Invalid login request');
        }
    } else {
        res.status(401).send('Invalid login token');
    }
});