Skip to content

Latest commit

 

History

History
206 lines (159 loc) · 5.26 KB

README.md

File metadata and controls

206 lines (159 loc) · 5.26 KB
Raw

GrpcGate - 基于 gRPC-Web 的登录系统荷花版本1.0

这是一个使用 gRPC-Web、Go 和 JavaScript 实现的简单登录系统。项目展示了如何在浏览器中使用 gRPC 与后端服务进行通信，实现了一个安全、高效的身份验证门户。 演示环境：http://107.150.106.94:8080/

项目架构

项目架构 前端页面

项目结构

.
├── proto/              # Protocol Buffer 定义文件
│   ├── auth.proto     # 服务和消息定义
│   ├── auth.pb.go     # 生成的 Go 代码
│   ├── auth_grpc.pb.go # 生成的 Go gRPC 代码
│   └── auth_pb.js     # 生成的 JavaScript 代码
├── server/            # Go 服务器实现
│   └── main.go       # 服务器入口
├── static/           # 前端文件
│   ├── client.js     # 前端 JavaScript 代码
│   ├── index.html    # HTML 模板
│   └── dist/         # 编译后的前端资源
├── go.mod            # Go 模块定义
├── package.json      # Node.js 依赖
└── webpack.config.js # Webpack 配置

环境要求

  • Go 1.21 或更高版本
  • Node.js 18 或更高版本
  • Protocol Buffers 编译器 (protoc)
  • protoc-gen-go 插件
  • protoc-gen-grpc-web 插件

安装步骤

  1. 安装 Go：
# 下载 Go 1.21.5
curl -O https://dl.google.com/go/go1.21.5.linux-amd64.tar.gz

# 解压到 /usr/local
sudo rm -rf /usr/local/go
sudo tar -C /usr/local -xzf go1.21.5.linux-amd64.tar.gz

# 设置环境变量
export PATH=$PATH:/usr/local/go/bin
export GOPATH=$HOME/go
export PATH=$PATH:$GOPATH/bin
  1. 安装 Node.js：
# 下载 NodeSource 安装脚本
curl -fsSL https://rpm.nodesource.com/setup_18.x | sudo bash -

# 安装 Node.js
sudo yum install -y nodejs
  1. 安装 Protocol Buffers 工具：
# 安装 protoc
sudo yum install -y protobuf-compiler

# 安装 Go protobuf 插件
go install google.golang.org/protobuf/cmd/[email protected]
go install google.golang.org/grpc/cmd/[email protected]

# 安装 grpc-web 插件
curl -LO https://github.com/grpc/grpc-web/releases/download/1.5.0/protoc-gen-grpc-web-1.5.0-linux-x86_64
chmod +x protoc-gen-grpc-web-1.5.0-linux-x86_64
sudo mv protoc-gen-grpc-web-1.5.0-linux-x86_64 /usr/local/bin/protoc-gen-grpc-web

项目设置

  1. 克隆项目后，首先安装依赖：
# 安装 Go 依赖
go mod tidy

# 安装 Node.js 依赖
npm install
  1. 生成 Protocol Buffers 代码：
# 生成 Go 代码
protoc -I=. \
  --go_out=. --go_opt=paths=source_relative \
  --go-grpc_out=. --go-grpc_opt=paths=source_relative \
  proto/auth.proto

# 生成 JavaScript 代码
protoc -I=. \
  --js_out=import_style=commonjs,binary:. \
  --grpc-web_out=import_style=commonjs,mode=grpcwebtext:. \
  proto/auth.proto
  1. 构建前端代码：
npm run build

运行项目

  1. 启动服务器：
go run server/main.go
  1. 访问网页：
    • 打开浏览器访问：http://localhost:8080
    • 使用以下测试账号登录：
      • 用户名：admin
      • 密码：password

登录功能说明

系统提供了一个美观的登录界面，具有以下特点：

  1. 用户界面

    • 简洁现代的设计风格
    • 响应式布局，适配不同屏幕尺寸
    • 清晰的表单验证和错误提示

  2. 登录功能

    • 支持用户名和密码验证
    • 实时反馈登录状态
    • 登录成功后显示欢迎信息

  3. 测试账号

    • 用户名：admin
    • 密码：admin

  4. 安全特性

    • 使用 gRPC-Web 进行安全通信
    • 密码在传输过程中加密
    • 登录失败时提供友好的错误提示

项目原理

  1. 前端（Browser）：

    • 使用 gRPC-Web 客户端库发送请求
    • 请求会被自动序列化为 Protocol Buffers 格式

  2. 后端（Server）：

    • 使用 grpcweb.WrapServer 包装 gRPC 服务
    • 支持 HTTP/1.1 和跨域请求
    • 自动处理请求/响应的转换

  3. 通信流程：

    • 浏览器发送 HTTP POST 请求
    • 请求被转换为 gRPC 调用
    • 服务处理请求并返回响应
    • 响应被转换回 HTTP 格式
    • 前端解析响应并更新界面

开发说明

  1. 修改 Protocol Buffers 定义：

    • 编辑 proto/auth.proto 文件
    • 重新生成代码
    • 更新相关的前端和后端实现

  2. 修改前端代码：

    • 编辑 static/client.js
    • 运行 npm run build 重新构建

  3. 修改后端代码：

    • 编辑 server/main.go
    • 重启服务器

注意事项

  1. CORS 配置：

    • 开发环境允许所有源
    • 生产环境应该限制允许的源

  2. 安全性：

    • 示例使用了简单的用户名密码验证
    • 生产环境应使用更安全的认证方式

  3. 错误处理：

    • 前端添加了完整的错误处理
    • 服务器端应该添加更多的错误检查

故障排除

  1. 如果遇到 "protoc-gen-go: program not found" 错误：

    • 确认 GOPATH/bin 在 PATH 中
    • 重新安装 protoc-gen-go

  2. 如果遇到跨域问题：

    • 检查服务器的 CORS 配置
    • 确认客户端请求的地址正确

  3. 如果前端构建失败：

    • 检查 Node.js 版本
    • 清理并重新安装依赖