HarmonyOS Account Kit：让你的App快速登录华为账号-开发实战

什么是 Account Kit你有没有遇到过这种情况下载了一个新应用又要注册账号、又要填手机号特别麻烦Account Kit 就是用来解决这个问题的。Account Kit 让你的元服务可以快速使用华为账号登录。用户不需要再注册新账号只要点一下华为账号登录按钮就能直接进入应用。而且如果用户同意你还可以获取他的手机号方便后续服务。简单说Account Kit 就是一个快捷登录工具让用户用已有的华为账号就能登录你的元服务。你可能会问用户自己注册账号不行吗当然行但现在大家都嫌麻烦。下载一个新 App又要填手机号、又要设密码、又要验证短信很多人直接就放弃了。用华为账号登录点一下就进来了用户体验好很多你的元服务转化率也会高很多。核心功能Account Kit 提供以下功能华为账号登录让用户用华为账号快速登录元服务。登录过程很简单创建一个登录请求调用executeRequest执行系统会弹出华为账号的授权页面。用户同意后你会收到一个authorizationCode授权码用这个授权码可以换取用户信息头像、昵称等。整个过程就像用华为账号一键注册获取手机号经用户同意后获取用户的手机号码。获取手机号用的是快速验证手机号 Button组件它会向用户发起手机号授权申请。用户同意后你就能拿到手机号。这个功能很实用比如用户注册后可以直接绑定手机号不需要再发短信验证环境搭建硬件要求设备类型华为手机、平板HarmonyOS 系统HarmonyOS 6.0.0 Release 及以上软件要求DevEco Studio 版本DevEco Studio 6.0.0 Release 及以上HarmonyOS SDK 版本HarmonyOS 6.0.0 Release SDK 及以上搭建步骤安装 DevEco Studio去华为开发者官网下载安装配置开发环境确保网络环境正常设备调试使用真机进行调试前置准备在使用 Account Kit 之前需要在 AppGallery Connect 上完成一些配置。创建元服务登录 AppGallery Connect创建一个元服务项目获取 Client ID 和 App ID配置签名证书在 DevEco Studio 中配置签名信息在 AppGallery Connect 中配置签名证书指纹配置 Client ID如果元服务的 Client ID 和 App ID 不同需要在module.json5中配置{module:{name:xxx,type:entry,metadata:[{name:client_id,value:你的Client ID}]}}项目结构├── entry/src/main/ets // 代码区 │ ├── entryability │ │ └── EntryAbility.ets // 程序入口类 │ ├── pages // 存放页面文件目录 │ │ └── Index.ets // 主页面 └── entry/src/main/resources // 资源文件目录第一步导入模块import{hilog}fromkit.PerformanceAnalysisKit;import{authentication}fromkit.AccountKit;import{util}fromkit.ArkTS;import{BusinessError}fromkit.BasicServicesKit;导入需要的模块authenticationAccount Kit 的认证接口util工具类用于生成 UUIDBusinessError错误处理第二步创建登录请求constloginRequestnewauthentication.HuaweiIDProvider().createLoginWithHuaweiIDRequest();loginRequest.forceLoginfalse;loginRequest.stateutil.generateRandomUUID();创建登录请求createLoginWithHuaweiIDRequest()创建一个华为账号登录请求forceLogin false如果用户没有登录华为账号不强制显示登录界面state一个随机 UUID用于防止跨站请求伪造CSRF 攻击第三步执行登录请求constcontrollernewauthentication.AuthenticationController();controller.executeRequest(loginRequest).then((response:authentication.LoginWithHuaweiIDResponse){constloginWithHuaweiIDResponseresponseasauthentication.LoginWithHuaweiIDResponse;conststateloginWithHuaweiIDResponse.state;// 验证 state 是否匹配防止 CSRF 攻击if(stateloginRequest.state!state){hilog.error(0x0000,testTag,Failed to login. The state is different, response state:${state});return;}hilog.info(0x0000,testTag,Succeeded in logging in.);constloginWithHuaweiIDCredentialloginWithHuaweiIDResponse.data!;constcodeloginWithHuaweiIDCredential.authorizationCode;// 处理 authorizationCode}).catch((error:BusinessError){hilog.error(0x0000,testTag,Failed to login. errCode is${error.code}, errMessage is${error.message});})执行登录请求创建控制器AuthenticationController用来执行认证请求执行请求executeRequest(loginRequest)发起登录请求验证 state检查返回的 state 是否和请求时的一致防止 CSRF 攻击获取授权码登录成功后authorizationCode可以用来换取用户信息第四步获取手机号如果需要获取用户的手机号可以使用快速验证手机号 Button。import{scenarioFusion}fromkit.AccountKit;// 在 build 中使用Button(获取手机号).onClick((){// 调用快速验证手机号 Button})快速验证手机号 Button 是 Account Kit 提供的一个 UI 组件它会向用户发起手机号授权申请用户同意后返回手机号信息错误处理在使用 Account Kit 时可能会遇到各种错误需要妥善处理.catch((error:BusinessError){constmainErrorMessage:stringerror.message.split(.).shift()asstring;this.getUIContext().getPromptAction().showToast({message:${error.code}:${mainErrorMessage},duration:2000});hilog.error(0x0000,testTag,Failed to login. errCode is${error.code}, errMessage is${error.message});})常见的错误码1001502001用户未登录华为账号其他错误码网络错误、用户取消等实际应用场景Account Kit 在实际开发中有很多用途快速注册// 用户用华为账号登录后直接创建账号constuser{huaweiId:loginWithHuaweiIDCredential.openID,phone:phoneNumber,createTime:newDate()};awaitcreateUser(user);手机号验证// 获取手机号后用于身份验证if(phoneNumber){// 发送验证码awaitsendVerificationCode(phoneNumber);}用户信息展示// 展示用户头像和昵称constavatarUriloginWithHuaweiIDCredential.avatarUri;constnickNameloginWithHuaweiIDCredential.nickName;适用场景Account Kit 特别适合以下场景元服务快速登录不需要用户注册新账号需要手机号的应用获取用户手机号用于验证或服务社交应用用华为账号建立用户体系电商应用快速登录提高转化率注意事项配置正确Client ID 和签名证书指纹必须配置正确state 验证一定要验证 state防止 CSRF 攻击错误处理每个接口调用都要处理错误用户隐私获取手机号需要用户明确授权scope 权限获取手机号前需要申请 phone scope 权限核心流程图华为账号登录的完整流程否是在 AppGallery Connect 配置元服务配置签名证书和 Client ID创建 LoginWithHuaweiIDRequest设置 forceLogin 和 state 参数调用 executeRequest 发起登录系统弹出华为账号授权页面用户是否同意授权?登录失败或用户取消验证 state 防止 CSRF 攻击获取 authorizationCode 授权码用授权码换取用户信息获取手机号的流程否是在页面中放置快速验证手机号 Button用户点击获取手机号按钮系统弹出手机号授权对话框用户是否同意授权?获取手机号失败返回用户手机号可用于身份验证或绑定服务总结Account Kit 让元服务可以快速使用华为账号登录核心流程在 AppGallery Connect 上配置元服务配置签名证书和 Client ID创建登录请求执行登录请求获取授权码可选获取用户手机号掌握了这些你就能让你的元服务支持华为账号快速登录提升用户体验。