App Inventor 2 注册登录功能教程 - 网络微数据库实现用户系统

概述
方案一：网络微数据库实现注册登录
方案二：Firebase Authentication
密码安全
- 简单加密方案
- 使用WebView进行SHA256加密（推荐）
网络微数据库搭建
- 使用LeanDB（推荐）
- 自建后端
常见问题
总结

概述

用户注册登录是很多App的基础功能。本文介绍在App Inventor 2中实现注册登录的几种方案：

方案	后端	难度	适合场景
Firebase Authentication	Google Firebase	⭐⭐	生产级应用
网络微数据库（TinyWebDB）	自建/第三方	⭐⭐	中小型应用
Firebase Realtime DB	Google Firebase	⭐⭐	需要实时同步
自建Web API	自己搭建	⭐⭐⭐	完全定制

方案一：网络微数据库实现注册登录

原理

使用网络微数据库（TinyWebDB或其变种）存储用户信息：

数据存储结构

键：user_张三
值：{"password": "加密后的密码", "nickname": "张三", "email": "zhangsan@example.com", "createdAt": "2026-05-18"}

界面设计

注册页面（Screen_Register）：

输入框_用户名
输入框_密码
输入框_确认密码
输入框_邮箱（可选）
按钮_注册
标签_提示

登录页面（Screen_Login）：

输入框_用户名
输入框_密码
按钮_登录
复选框_记住密码
标签_提示

注册功能积木块

设 注册中 = false

当 按钮_注册.被点击
  设 用户名 = 输入框_用户名.文本
  设 密码 = 输入框_密码.文本
  设 确认密码 = 输入框_确认密码.文本
  
  ' 输入验证
  如果 用户名 = "" 或 密码 = ""
    标签_提示.文本 = "❌ 用户名和密码不能为空"
    返回
  如果 列表长度(文本分割(用户名, "")) < 3
    标签_提示.文本 = "❌ 用户名至少3个字符"
    返回
  如果 密码 ≠ 确认密码
    标签_提示.文本 = "❌ 两次密码不一致"
    返回
  如果 列表长度(文本分割(密码, "")) < 6
    标签_提示.文本 = "❌ 密码至少6位"
    返回
  
  设 注册中 = true
  标签_提示.文本 = "注册中..."
  
  ' 先检查用户名是否已存在
  调用 TinyWebDB1.获取值("user_" & 用户名)

当 TinyWebDB1.收到值(标签, 值)
  如果 注册中
    设 注册中 = false
    如果 值 = "NO_DATA"
      ' 用户名不存在，可以注册
      设 用户数据 = 创建字典(
        "password" → 密码,  ' 生产环境应该加密！
        "nickname" → 输入框_用户名.文本,
        "createdAt" → Clock1.格式化日期时间(Clock1.当前时间(), "yyyy-MM-dd")
      )
      调用 TinyWebDB1.存储值("user_" & 输入框_用户名.文本, 用户数据)
      标签_提示.文本 = "✅ 注册成功！"
      ' 保存登录状态
      设 TinyDB1.标签 = "currentUser"
      调用 TinyDB1.存储值("currentUser", 输入框_用户名.文本)
      调用 打开另一个屏幕("Screen_Main")
    否则
      标签_提示.文本 = "❌ 用户名已存在"

登录功能积木块

设 登录中 = false

当 按钮_登录.被点击
  设 用户名 = 输入框_用户名.文本
  设 密码 = 输入框_密码.文本
  
  如果 用户名 = "" 或 密码 = ""
    标签_提示.文本 = "❌ 请输入用户名和密码"
    返回
  
  设 登录中 = true
  标签_提示.文本 = "登录中..."
  调用 TinyWebDB1.获取值("user_" & 用户名)

当 TinyWebDB1.收到值(标签, 值)
  如果 登录中
    设 登录中 = false
    如果 值 = "NO_DATA"
      标签_提示.文本 = "❌ 用户名不存在"
    否则
      设 存储密码 = 从字典 值 获取 "password"
      如果 存储密码 = 密码
        标签_提示.文本 = "✅ 登录成功！"
        ' 保存登录状态
        调用 TinyDB1.存储值("currentUser", 输入框_用户名.文本)
        如果 复选框_记住密码.选中
          调用 TinyDB1.存储值("savedPassword", 密码)
        调用 打开另一个屏幕("Screen_Main")
      否则
        标签_提示.文本 = "❌ 密码错误"

自动登录

当 Screen_Login.初始化
  设 保存的用户 = TinyDB1.获取值("currentUser", "")
  如果 保存的用户 ≠ ""
    ' 已登录，直接跳转
    调用 打开另一个屏幕("Screen_Main")
  否则
    ' 检查是否有保存的密码
    设 保存的密码 = TinyDB1.获取值("savedPassword", "")
    如果 保存的密码 ≠ ""
      设 输入框_密码.文本 = 保存的密码
      设 复选框_记住密码.选中 = true

退出登录

当 按钮_退出.被点击
  调用 TinyDB1.清除标签("currentUser")
  调用 TinyDB1.清除标签("savedPassword")
  调用 打开另一个屏幕("Screen_Login")

方案二：Firebase Authentication

Firebase提供了完整的认证服务，支持邮箱/密码、手机号、Google登录等。

配置步骤

前往 Firebase Console 创建项目
启用 Authentication → Sign-in method → Email/Password
获取Firebase配置信息
在App Inventor中添加 Firebase Authentication 组件

注册积木块

当 按钮_注册.被点击
  调用 FirebaseAuthentication1.注册用户(输入框_邮箱.文本, 输入框_密码.文本)

当 FirebaseAuthentication1.注册成功(用户)
  标签_提示.文本 = "✅ 注册成功！"
  调用 打开另一个屏幕("Screen_Main")

当 FirebaseAuthentication1.注册失败(错误信息)
  标签_提示.文本 = "❌ " & 错误信息

登录积木块

当 按钮_登录.被点击
  调用 FirebaseAuthentication1.登录用户(输入框_邮箱.文本, 输入框_密码.文本)

当 FirebaseAuthentication1.登录成功(用户)
  标签_提示.文本 = "✅ 欢迎回来！"
  调用 打开另一个屏幕("Screen_Main")

当 FirebaseAuthentication1.登录失败(错误信息)
  标签_提示.文本 = "❌ " & 错误信息

密码安全

简单加密方案

明文存储密码不安全，至少要做简单的加密处理：

定义 简单加密(原始文本) 返回 加密结果
  ' 使用 WebView 执行 MD5 或 SHA256
  ' 或者简单的字符偏移
  设 结果 = ""
  设 i = 1
  当 i ≤ 文本长度(原始文本)
    设 字符 = 文本第i个字符(原始文本)
    设 字符码 = 文本转ASCII码(字符)
    设 加密码 = 字符码 + 7  ' 简单偏移
    设 结果 = 结果 & ASCII码转文本(加密码)
    设 i = i + 1
  返回 结果

使用WebView进行SHA256加密（推荐）

<!-- crypto.html -->
<script>
function sha256(str) {
  var encoder = new TextEncoder();
  var data = encoder.encode(str);
  return crypto.subtle.digest('SHA-256', data).then(function(hash) {
    var hex = Array.from(new Uint8Array(hash)).map(function(b) {
      return b.toString(16).padStart(2, '0');
    }).join('');
    window.AppInventor.setWebViewString(hex);
  });
}
</script>

当 按钮_注册.被点击
  ' 用WebView加密密码
  调用 WebView1.运行JavaScript("sha256('" & 输入框_密码.文本 & "')")

当 WebView1.WebView字符串改变(值)
  如果 注册步骤 = "加密密码"
    设 加密密码 = 值
    ' 存储加密后的密码
    调用 TinyWebDB1.存储值("user_" & 用户名, 创建字典("password" → 加密密码))

网络微数据库搭建

使用LeanDB（推荐）

LeanDB 是专为App Inventor设计的网络数据库：

访问 https://kevinkun.cn/leandb/
创建应用，获取API Key
在App Inventor中配置TinyWebDB的ServiceURL

自建后端

如果需要完全控制，可以用Python Flask搭建简单的后端：

# server.py (简易示例)
from flask import Flask, request, jsonify
import json, hashlib

app = Flask(__name__)
users = {}

@app.route('/getvalue', methods=['GET'])
def get_value():
    tag = request.args.get('tag')
    if tag in users:
        return jsonify([tag, users[tag]])
    return jsonify([tag, "NO_DATA"])

@app.route('/storevalue', methods=['POST'])
def store_value():
    data = request.json
    tag = data.get('tag')
    value = data.get('value')
    users[tag] = value
    return jsonify({"status": "OK"})

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

常见问题

Q1: 注册登录安全性如何保障？

密码必须加密存储（至少SHA256）
使用HTTPS传输
服务端做输入验证
App Inventor方案适合学习和小型应用，大型应用建议用Firebase

Q2: 多设备同时登录怎么办？

使用TinyWebDB的在线数据库，数据存在服务端，所有设备共享。登录状态可以用Firebase的Token机制管理。

Q3: 忘记密码怎么处理？

当 按钮_忘记密码.被点击
  设 邮箱 = 输入框_邮箱.文本
  ' Firebase方案：发送重置邮件
  调用 FirebaseAuthentication1.发送密码重置邮件(邮箱)
  
  ' TinyWebDB方案：需要自建后端发邮件或重置

Q4: 网络微数据库保姆级用法

选择服务：推荐LeanDB或Firebase
创建应用：注册账号，创建应用获取密钥
配置组件：在App Inventor中设置TinyWebDB的ServiceURL
存储数据：TinyWebDB1.StoreValue(tag, value)
读取数据：TinyWebDB1.GetValue(tag)，在GotValue事件中处理结果

总结

方案	推荐度	适合场景
Firebase Auth	⭐⭐⭐⭐⭐	生产应用、需要安全认证
TinyWebDB + 加密	⭐⭐⭐	学习、小型应用
自建API	⭐⭐⭐⭐	需要完全控制

版权声明：MIT App Inventor 官方文档采用 CC BY-SA 4.0 授权，本文档由 ai2claw 🐝 整理。