Skip to content

基于 HCompass 框架的聚合登录功能包,提供路由守卫、华为账号一键登录、微信登录、支付宝登录、QQ 登录及短信验证码登录能力。

License

Notifications You must be signed in to change notification settings

codelably/package-login

Repository files navigation

@package/login - 聚合登录功能包

基于 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

集成步骤

步骤 1:拷贝功能包

login 目录拷贝到项目的 packages/ 目录下。

步骤 2:注册模块位置

在项目根目录的 build-profile.json5 中新增模块声明:

{
  "name": "login",
  "srcPath": "./packages/login"
}

步骤 3:在契约层发布服务接口和路由

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 的导出文件中统一导出上述内容。

步骤 4:注册模块到框架

EntryAbility 的框架初始化流程中注册登录模块:

import { createLoginModule } from '@package/login';

// 在 InitializerFramework 中注册
module.register(createLoginModule());

步骤 5:设置聚合登录回调

EntryAbilityonNewWant 生命周期中处理第三方登录回调:

import { handleAggregatedLoginCallback } from '@package/login';

onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void {
  handleAggregatedLoginCallback(want);
}

步骤 6:配置第三方登录(可选)

如需使用第三方登录,还需完成以下配置:

6.1 修改 entry/src/main/module.json5

module 节点下添加:

{
  "querySchemes": [
    "apmqpdispatch",
    "weixin",
    "wxopensdk",
    "qqopenapi",
    "https"
  ],
  "metadata": [
    {
      "name": "client_id",
      "value": "your_agc_client_id"  // 从 AGC 获取的 Client ID
    }
  ]
}

abilitiesskills 中添加 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"
    }
  ]
}

6.2 配置各平台 APP_ID

修改 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.jsonen/element/string.json 自定义文案
  • SmsLoginViewModel.ets 中接入实际的短信发送和验证接口
  • 替换 src/main/resources/rawfile/PrivacyPolicy.html 为实际的隐私政策内容
  • AuthGuardprotectedRoutes 中添加更多需要登录保护的路由

登录方式支持状态

登录方式 状态 说明
华为账号一键登录 已实现 基于 @kit.AccountKit
微信登录 已实现 需配置 APP_ID 和 APP_SECRET
支付宝登录 已实现 需配置 APP_ID
QQ 登录 待实现 SDK 已引入,逻辑待补充
短信验证码登录 UI 已完成 业务逻辑待接入

许可证

本项目基于 MIT 协议,请自由地享受和参与开源。

About

基于 HCompass 框架的聚合登录功能包,提供路由守卫、华为账号一键登录、微信登录、支付宝登录、QQ 登录及短信验证码登录能力。

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published