鸿蒙 使用“华为账号登录”按钮登录(二)
一、场景应用可以使用Account Kit提供的华为账号登录按钮获取华为账号用户身份标识UnionID、OpenID通过UnionID、OpenID完成用户登录或者与应用账号完成绑定绑定后用于登录或者验证。按钮样式包含三种样式样式说明文本仅显示文字标志仅显示华为账号标志文本标志同时显示文字和标志二、支持的设备设备类型支持版本Phone支持Tablet支持PC/2in1支持TV5.1.1(19)版本开始支持三、用户体验设计账号登录按钮的用户体验和UX设计需符合【华为账号登录】按钮规范不符合规范的UX设计可能会对应用上架和用户体验带来影响。四、业务流程4.1 流程说明阶段序号说明调用登录按钮展示登录页1-3应用拉起登录页并展示“华为账号登录”按钮用户点击按钮请求华为账号授权信息用户点击登录4-6华为账号未登录时拉起登录页已登录时直接返回Authorization Code用户关联应用账号7-16服务端通过Authorization Code获取Access Token再获取用户信息绑定UnionID完成登录4.2 安全性通过Authorization Code凭证获取用户信息可以有效避免黑客通过数据遍历、身份伪造、重放攻击等手段导致的安全风险。五、开发前提在进行代码开发前请确保已完成配置签名和指纹参考配置签名和指纹配置Client ID参考配置Client ID说明此场景无需申请账号权限。六、客户端开发6.1 导入模块import { LoginWithHuaweiIDButton, loginComponentManager } from kit.AccountKit; import { BusinessError } from kit.BasicServicesKit; import { hilog } from kit.PerformanceAnalysisKit;6.2 核心接口接口描述LoginWithHuaweiIDButton华为账号Button登录组件支持Icon类型、纯文本、Icon文本混合按钮onClickLoginWithHuaweiIDButton注册登录事件结果回调使用callback异步回调setAgreementStatus设置协议状态。如需用户同意协议才能登录请先设置NOT_ACCEPTED同意后设置ACCEPTED6.3 错误码枚举export enum ErrorCode { ERROR_CODE_LOGIN_OUT 1001502001, // 账号未登录 ERROR_CODE_NETWORK_ERROR 1001502005, // 网络错误 ERROR_CODE_INTERNAL_ERROR 1001502009, // 内部错误 ERROR_CODE_USER_CANCEL 1001502012, // 用户取消授权 ERROR_CODE_SYSTEM_SERVICE 12300001, // 系统服务异常 ERROR_CODE_REQUEST_REFUSE 1001500002, // 重复请求 ERROR_CODE_AGREEMENT_STATUS_NOT_ACCEPTED 1005300001 // 用户未同意协议 }6.4 代码示例Entry Component struct PreviewLoginButtonPage { // 构造LoginWithHuaweiIDButton组件的控制器 controller: loginComponentManager.LoginWithHuaweiIDButtonController new loginComponentManager.LoginWithHuaweiIDButtonController() .onClickLoginWithHuaweiIDButton((error: BusinessError, response: loginComponentManager.HuaweiIDCredential) { if (error) { this.dealAllError(error); return; } if (response) { hilog.info(0x0000, testTag, Succeeded in getting response.); const authCode response.authorizationCode; // 开发者处理authCode传给服务端 } }); // 错误处理 dealAllError(error: BusinessError): void { hilog.error(0x0000, testTag, Failed to login, errorCode is ${error.code}, errorMessage is ${error.message}); if (error.code ErrorCode.ERROR_CODE_LOGIN_OUT) { // 用户未登录华为账号请登录华为账号并重试 } else if (error.code ErrorCode.ERROR_CODE_NETWORK_ERROR) { // 网络异常请检查当前网络状态并重试 } else if (error.code ErrorCode.ERROR_CODE_INTERNAL_ERROR) { // 登录失败请尝试使用其他方式登录 } else if (error.code ErrorCode.ERROR_CODE_USER_CANCEL) { // 用户取消授权 } else if (error.code ErrorCode.ERROR_CODE_SYSTEM_SERVICE) { // 系统服务异常请稍后重试 } else if (error.code ErrorCode.ERROR_CODE_REQUEST_REFUSE) { // 重复请求应用无需处理 } else if (error.code ErrorCode.ERROR_CODE_AGREEMENT_STATUS_NOT_ACCEPTED) { // 用户未同意协议 } else { // 应用登录失败请尝试使用其他方式登录 } } build() { Column() { Column() { LoginWithHuaweiIDButton({ params: { style: loginComponentManager.Style.BUTTON_RED, // 按钮样式 extraStyle: { buttonStyle: new loginComponentManager.ButtonStyle().loadingStyle({ show: true }) }, borderRadius: 24, // 边框圆角半径 loginType: loginComponentManager.LoginType.ID, // 登录类型 supportDarkMode: true // 支持深浅色模式切换 }, controller: this.controller }) } .height(40) } .width(100%) .justifyContent(FlexAlign.Center) .margin({ left: 16, right: 16 }) } }七、服务端开发7.1 获取Access Token和UnionID步骤接口说明1获取用户级凭证接口使用Client ID、Client Secret、Authorization Code获取Access Token、Refresh Token2解析凭证接口使用Access Token获取用户的UnionID7.2 关联用户体系应用通过查询获取的UnionID判断该用户是否已关联已关联完成用户登录未关联创建新用户绑定UnionID完成用户登录八、Token过期处理8.1 Access Token过期处理项目说明有效期60分钟处理方式使用Refresh Token有效期180天通过刷新用户级凭证接口获取新的Access Token重要当Access Token失效时若应用不使用Refresh Token获取新的Access Token账号的授权信息将会失效导致使用Access Token的功能都会失败。8.2 Access Token非正常失效场景当Access Token非正常失效如修改密码、退出账号、删除设备时应用可重新登录授权获取Authorization Code向华为账号服务器请求获取新的Access Token。8.3 Refresh Token过期处理项目说明有效期180天处理方式失效后应用服务端需要通知客户端重新调用授权接口请求用户重新授权九、其他要点说明核心组件LoginWithHuaweiIDButton获取信息Authorization Code → Access Token → UnionID有效期Access Token 60分钟Refresh Token 180天设备支持Phone、Tablet、PC/2in1、TV(19)错误处理需根据错误码引导用户业务流程用户点击登录按钮 ↓ 获取Authorization Code ↓ 服务端用Authorization Code换取Access Token ↓ 用Access Token获取UnionID ↓ 根据UnionID关联/创建用户 ↓ 完成登录