HarmonyOS 鸿蒙Next使用一键登录并获取用户头像昵称信息

HarmonyOS 鸿蒙Next使用一键登录并获取用户头像昵称信息
HarmonyOS NEXT之前就接入了华为的一键登录功能，所以当用户升级到纯血鸿蒙版本的时候，就需要继续调用一键登录功能获取用户的华为侧标识编号，这样才能在服务器读取到用户的历史数据。

解决方案 上面图红色的就是华为的一键登录图标，实现这个功能不难，可以直接使用华为登录组件

          LoginWithHuaweiIDButton({
            params: {
              // LoginWithHuaweiIDButton支持的样式
              style: loginComponentManager.Style.ICON_RED,
              textAndIconStyle: true,
              // 登录按钮在登录过程中展示加载态
              extraStyle: {
                buttonStyle: new loginComponentManager.ButtonStyle().loadingStyle({
                  show: true
                })
              },
              // LoginWithHuaweiIDButton的边框圆角半径
              borderRadius: 24,
              // LoginWithHuaweiIDButton支持的登录类型
              loginType: loginComponentManager.LoginType.ID,
              // LoginWithHuaweiIDButton支持按钮的样式跟随系统深浅色模式切换
              supportDarkMode: true,
              // verifyPhoneNumber：如果用户在过去90天内未进行短信验证，是否拉起Account Kit的短信验证码页面
              verifyPhoneNumber: true
            },
            controller: this.controller
          })
        }

好了，重点是下面如果你想通过一键登录获取到用户的头像，昵称这些，你需要得到用户的授权。具体代码如下

  controller: loginComponentManager.LoginWithHuaweiIDButtonController =
    new loginComponentManager.LoginWithHuaweiIDButtonController()
      .onClickLoginWithHuaweiIDButton((error: BusinessError, response: loginComponentManager.HuaweiIDCredential) => {
        if (error) {
          this.loginId = error.code.toString()
          return;
        }

        if (response) {
          this.loginId = response.authorizationCode

          // 创建授权请求，并设置参数
          let authRequest = new authentication.HuaweiIDProvider().createAuthorizationWithHuaweiIDRequest();
          // 获取头像昵称需要传如下scope
          authRequest.scopes = ['profile'];
          // 若开发者需要进行服务端开发，则需传如下permission获取authorizationCode
          authRequest.permissions = ['serviceauthcode'];
          // 用户是否需要登录授权，该值为true且用户未登录或未授权时，会拉起用户登录或授权页面
          authRequest.forceAuthorization = true;
          // 用于防跨站点请求伪造
          authRequest.state = util.generateRandomUUID();

          // 执行授权请求
          try {
            let controller = new authentication.AuthenticationController(getContext(this));
            controller.executeRequest(authRequest).then((data) => {
              let authorizationWithHuaweiIDResponse = data as authentication.AuthorizationWithHuaweiIDResponse;
              let state = authorizationWithHuaweiIDResponse.state;
              if (state != undefined && authRequest.state != state) {
                hilog.error(0x0000, 'testTag', `Failed to authorize. The state is different, response state: ${state}`);
                return;
              }
              hilog.info(0x0000, 'testTag', 'Succeeded in authentication.');
              let authorizationWithHuaweiIDCredential = authorizationWithHuaweiIDResponse.data!;
              let avatarUri = authorizationWithHuaweiIDCredential.avatarUri;
              let nickName = authorizationWithHuaweiIDCredential.nickName;
              let unionID = authorizationWithHuaweiIDCredential.unionID;
              let openID = authorizationWithHuaweiIDCredential.openID;
              let authorizationCode = authorizationWithHuaweiIDCredential.authorizationCode;
              // 开发者处理avatarUri, nickName, unionID，openID，authorizationCode

              console.log(`avatarUri=${avatarUri}`)
              console.log(`nickName=${nickName}`)
              console.log(`openId=${openID}`)
              console.log(`huaweiunionID=${unionID}`)
              let userinfo = new HuaweiUserInfoModel()
              userinfo.open_id = openID??''
              userinfo.displayName = nickName??''
              userinfo.avatarUri = avatarUri??''
              userinfo.union_id = unionID??''


          }).catch((err: BusinessError) => {
            });
          } catch (error) {
          }

          return;
        }
      });

userinfo就是拿到的用户信息，这时候你可以把这个信息传到服务器端去进行匹配和保存。如果用户编号存在，你就更新原来的用户信息，并且返回用户的相关信息，如果编号不存在，那就是一个新用户，就可以创建这个用户。