基于 HCompass 框架的聚合登录功能包,提供华为账号一键登录、微信登录、支付宝登录、QQ 登录及短信验证码登录能力。开箱即用,遵循框架 MVVM 多模块架构规范,可作为功能包开发的参考模板。
- 华为账号一键登录(已实现)
- 微信 OAuth 授权登录(已实现)
- 支付宝授权登录(已实现)
- QQ 授权登录(待实现)
- 短信验证码登录(UI 已完成,根据业务逻辑接入)
- 认证路由守卫(未登录自动拦截跳转)
- 国际化支持(中文 / 英文)
packages/login/
├── Index.ets # 模块导出入口
├── AFServiceSDK.har # 支付宝登录 SDK
├── oh-package.json5 # 模块依赖配置
├── src/main/
│ ├── ets/
│ │ ├── LoginModule.ets # 模块注册、生命周期(服务、路由、守卫)
│ │ ├── view/
│ │ │ ├── LoginPage.ets # 主登录页
│ │ │ └── SmsLoginPage.ets # 短信验证码登录页
│ │ ├── viewmodel/
│ │ │ ├── LoginViewModel.ets # 登录页 ViewModel
│ │ │ └── SmsLoginViewModel.ets # 短信登录 ViewModel
│ │ ├── components/
│ │ │ ├── AnimatedAuthPage.ets # 认证页面基础布局
│ │ │ ├── LogoIcon.ets # Logo 图标
│ │ │ ├── UserAgreement.ets # 用户协议
│ │ │ ├── PhoneInputField.ets # 手机号输入
│ │ │ ├── VerificationCodeField.ets # 验证码输入
│ │ │ ├── BottomNavigationRow.ets # 底部导航
│ │ │ └── FocusableDivider.ets # 可聚焦分割线
│ │ ├── navigation/
│ │ │ ├── LoginNav.ets # 登录页导航构建器
│ │ │ └── SmsLoginNav.ets # 短信登录页导航构建器
│ │ ├── services/
│ │ │ └── AuthNavSvcImpl.ets # 导航服务实现
│ │ └── models/
│ │ └── Constant.ets # 常量与第三方 APP_ID 配置
│ └── resources/ # 国际化资源与媒体文件
本功能包依赖 HCompass 框架的以下核心模块:
| 模块 | 说明 |
|---|---|
@core/di |
依赖注入容器 |
@core/module |
模块注册机制(FeatureModule) |
@core/navigation |
路由导航与守卫 |
@core/designsystem |
基础布局组件(RowBase / ColumnBase 等) |
@core/components |
跨模块通用组件 |
@core/base |
框架基础能力 |
@core/util |
工具函数 |
@core/layoutstate |
布局状态管理 |
@core/ibestui |
IBest-UI-V2 组件库封装 |
@shared/contracts |
共享契约层(路由、服务接口定义) |
@shared/state |
共享状态管理 |
第三方 SDK 依赖:
| 依赖 | 版本 | 说明 |
|---|---|---|
@tencent/wechat_open_sdk |
1.0.16 | 微信开放平台 SDK |
@tencent/qq-open-sdk |
1.0.4 | QQ 互联 SDK |
@zyl/wxcommonlibhar |
1.1.7 | 微信登录辅助库 |
@alipay/afservicesdk |
本地 HAR | 支付宝授权 SDK |
将 login 目录拷贝到项目的 packages/ 目录下。
在项目根目录的 build-profile.json5 中新增模块声明:
{
"name": "login",
"srcPath": "./packages/login"
}在 shared/contracts 中新增以下文件:
shared/contracts/src/main/ets/IAuthNavSvc/AuthRoutes.ets
/**
* @file 认证模块路由定义
* @author JunBin.Yang
*/
export class AuthRoutes {
/** 登录路由 */
static Login = "auth/login";
/** 短信验证码登录路由 */
static SmsLogin = "auth/sms-login";
}shared/contracts/src/main/ets/IAuthNavSvc/IAuthNavSvc.ets
/**
* @file 认证模块导航服务定义
* @author JunBin.Yang
*/
/** 跨功能包共享的 DI 服务键 */
export const AUTH_NAV_SVC_KEY: string = "authNavService";
/** 导航服务接口,功能包内实现 */
export interface IAuthNavSvc {
/** 跳转到登录页面 */
toLogin(): void;
/** 跳转到短信登录页面 */
toSmsLogin(): void;
}并在 shared/contracts 的导出文件中统一导出上述内容。
在 EntryAbility 的框架初始化流程中注册登录模块:
import { createLoginModule } from '@package/login';
// 在 InitializerFramework 中注册
module.register(createLoginModule());在 EntryAbility 的 onNewWant 生命周期中处理第三方登录回调:
import { handleAggregatedLoginCallback } from '@package/login';
onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void {
handleAggregatedLoginCallback(want);
}如需使用第三方登录,还需完成以下配置:
在 module 节点下添加:
{
"querySchemes": [
"apmqpdispatch",
"weixin",
"wxopensdk",
"qqopenapi",
"https"
],
"metadata": [
{
"name": "client_id",
"value": "your_agc_client_id" // 从 AGC 获取的 Client ID
}
]
}在 abilities 的 skills 中添加 URI 回调配置:
{
"entities": [
"entity.system.home",
"entity.system.browsable"
],
"actions": [
"ohos.want.action.home",
"wxentity.action.open",
"ohos.want.action.viewData"
],
"uris": [
{
"scheme": "qqopenapi",
"host": "your_qq_app_id", // QQ 互联平台申请的 appId
"pathRegex": "\\b(auth|share)\\b",
"linkFeature": "Login"
}
]
}修改 packages/login/src/main/ets/models/Constant.ets,替换为实际申请的应用凭据:
export const APP_ID_WX = 'your_wechat_app_id'; // 微信开放平台
export const APP_SECRET_WX = 'your_wechat_app_secret'; // 微信开放平台
export const APP_ID_ALI = 'your_alipay_app_id'; // 支付宝开发者中心
export const APP_ID_QQ = 'your_qq_app_id'; // QQ 互联平台本功能包严格遵循 HCompass 框架的 MVVM 多模块架构:
View (LoginPage / SmsLoginPage)
│
├── 引用 ViewModel(业务逻辑)
│ ├── LoginViewModel - 华为登录、三方登录处理
│ └── SmsLoginViewModel - 手机号验证码登录处理
│
├── 引用 Components(可复用 UI 组件)
│ ├── AnimatedAuthPage - 认证页面基础布局
│ ├── LogoIcon - Logo 图标
│ ├── UserAgreement - 用户协议
│ ├── PhoneInputField - 手机号输入
│ └── VerificationCodeField - 验证码输入
│
└── 通过 Navigation 路由跳转
└── LoginNav / SmsLoginNav - 导航构建器
模块通过 FeatureModule 接口实现自注册:
registerServices()- 注册 DI 服务(IAuthNavSvc)registerRoutes()- 注册页面路由registerGuards()- 注册认证路由守卫(AuthGuard)
AuthGuard 会拦截需要登录才能访问的页面(如用户个人中心),未登录时自动跳转到登录页。可在 LoginModule.ets 中的 protectedRoutes 数组里配置受保护的路由。
其他功能包可通过 DI 容器获取导航服务,跳转到登录页:
import { AUTH_NAV_SVC_KEY, IAuthNavSvc } from '@shared/contracts';
import { getContainer } from '@core/di';
const authNavSvc = getContainer().resolve<IAuthNavSvc>(AUTH_NAV_SVC_KEY);
authNavSvc.toLogin();- 替换
src/main/resources/base/media/下的图标资源以更换 Logo 和三方登录图标 - 修改
src/main/resources/base/element/string.json和en/element/string.json自定义文案 - 在
SmsLoginViewModel.ets中接入实际的短信发送和验证接口 - 替换
src/main/resources/rawfile/PrivacyPolicy.html为实际的隐私政策内容 - 在
AuthGuard的protectedRoutes中添加更多需要登录保护的路由
| 登录方式 | 状态 | 说明 |
|---|---|---|
| 华为账号一键登录 | 已实现 | 基于 @kit.AccountKit |
| 微信登录 | 已实现 | 需配置 APP_ID 和 APP_SECRET |
| 支付宝登录 | 已实现 | 需配置 APP_ID |
| QQ 登录 | 待实现 | SDK 已引入,逻辑待补充 |
| 短信验证码登录 | UI 已完成 | 业务逻辑待接入 |
本项目基于 MIT 协议,请自由地享受和参与开源。

