当标准华为账号登录按钮无法满足UI设计需求时可以使用自定义按钮通过调用API实现华为账号登录。一、自定义按钮登录应用应遵照【华为账号登录】按钮规范在登录页面嵌入自定义华为账号登录按钮使用自定义按钮触发调用华为账号登录API获取Authorization Code通过服务端交互获取用户的UnionID、OpenID完成用户登录或者与应用账号完成绑定绑定后用于登录或者验证。适用场景当标准“华为账号登录”按钮无法满足UI设计需求时可以使用自定义按钮方案。二、支持版本设备类型支持版本Phone支持Tablet支持PC/2in1支持Wearable5.1.0(18)开始支持TV5.1.1(19)开始支持三、业务流程阶段说明展示自定义按钮调用登录API用户点击自定义登录按钮应用调用华为账号登录API请求授权信息。华为账号未登录时拉起登录页已登录时直接返回Authorization Code用户关联应用账号服务端通过Authorization Code获取Access Token再获取UnionID完成用户关联和登录安全性通过Authorization Code凭证获取用户信息可以有效避免黑客通过数据遍历、身份伪造、重放攻击等手段导致的安全风险。四、开发前提在进行代码开发前请确保已完成配置项说明配置签名和指纹参考配置签名和指纹配置Client ID参考配置Client ID注意此场景无需申请账号权限。五、相关接口接口描述createLoginWithHuaweiIDRequest()创建账号登录请求。forceLogin参数控制用户未登录华为账号时是否强制拉起登录界面constructor(context)创建登录请求ControllerexecuteRequest(request)通过Promise方式执行登录操作注意上述接口需在页面或自定义组件生命周期内调用。六、客户端开发6.1 导入模块import { authentication } from kit.AccountKit; import { hilog } from kit.PerformanceAnalysisKit; import { util } from kit.ArkTS; import { BusinessError } from kit.BasicServicesKit;6.2 错误码枚举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 // 重复请求 }6.3 创建登录请求并执行// 创建登录请求并设置参数 const loginRequest new authentication.HuaweiIDProvider() .createLoginWithHuaweiIDRequest(); // 用户是否需要登录授权该值为true且用户未登录或未授权时会拉起用户登录或授权页面 loginRequest.forceLogin true; // 用于防跨站点请求伪造 loginRequest.state util.generateRandomUUID(); // 执行登录请求 try { const controller new authentication.AuthenticationController( this.getUIContext().getHostContext() ); controller.executeRequest(loginRequest).then((response: authentication.LoginWithHuaweiIDResponse) { const state response.state; if (state loginRequest.state ! state) { hilog.error(0x0000, testTag, The state is different, response state: ${state}); return; } hilog.info(0x0000, testTag, Succeeded in logging in.); const code response?.data?.authorizationCode; // 开发者处理code传给服务端 }).catch((error: BusinessError) { dealAllError(error); }); } catch (error) { dealAllError(error); }6.4 错误处理function dealAllError(error: BusinessError): void { hilog.error(0x0000, testTag, Failed to login. Code: ${error.code}, message: ${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 { // 应用登录失败请尝试使用其他方式登录 } }七、服务端开发7.1 获取Access Token应用服务端使用Client ID、Client Secret、Authorization Code调用获取用户级凭证接口向华为账号服务器请求获取Access Token、Refresh Token。7.2 获取UnionID使用Access Token调用解析凭证接口获取用户的UnionID。7.3 用户关联应用通过查询获取的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天处理方式失效后应用服务端需要通知客户端重新调用授权接口请求用户重新授权九、三种登录方式对比对比项自定义按钮登录华为账号登录按钮华为账号一键登录UI定制完全自定义固定样式固定样式获取信息UnionIDUnionID手机号UnionID开发者类型企业个人企业个人仅企业调用方式API调用组件组件API适用场景UI定制需求快速集成需要手机号业务流程用户点击自定义登录按钮 ↓ 创建LoginWithHuaweiIDRequest ↓ 设置forceLogintrue生成state ↓ 调用executeRequest执行登录 ↓ 获取Authorization Code ↓ 服务端用Authorization Code换取Access Token ↓ 用Access Token获取UnionID ↓ 根据UnionID关联/创建用户 ↓ 完成登录自定义按钮登录通过createLoginWithHuaweiIDRequest创建登录请求设置forceLogin和state参数调用executeRequest获取Authorization Code服务端再用Code换取Access Token和UnionID适用于需要完全自定义登录按钮UI的场景支持企业开发者和个人开发者。