模拟登录页,华为账号一键登录 - HarmonyOS技术社区 - 电子技术william hill官网 - 广受欢迎的专业电子william hill官网 - 威廉希尔官方网站
分享 收藏 返回

[文章]

模拟登录页,华为账号一键登录

一、介绍
基于鸿蒙Next模拟账号一键登录,免去账号注册环节
二、场景需求

  1. 用户场景
    新用户: 需要快速注册并登录,以体验华为的服务。
    老用户: 希望快速登录,不用每次输入用户名和密码。
  2. 界面设计
    Logo和标题: 页面顶部展示华为的Logo及"一键登录"或"华为账号登录"的标题。
  3. 功能需求:短信/邮箱验证码:
  4. 安全性
    二次验证: 可选启用二次验证,如在高风险环境下(新设备登录等),要求用户通过邮件或短信进行确认。
  5. 适应性
    响应式设计: 确保在不同设备(手机、平板、电脑)上的良好展示。
    多语言支持: 提供多种语言选项,方便不同地区用户使用。
  6. 用户反馈
    操作反馈: 无论是按钮点击还是输入错误,都需要及时反馈用户操作状态。
    常见问题解答链接: 用户如果在登录时遇到问题,可以快速找到帮助。

三、业务步骤
第一步:点击“一键登录”,获取登录信息
第二步:拉起授权弹窗
第三步:获取授权,获取用户信息
第四步:展示用户信息,显示功能选项
四、效果展示
f44d07b023b56909d1e9697dd301119a901630.jpg

五:代码展示:
`import { authentication } from '@kit.AccountKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { util } from '@kit.ArkTS';
import { BusinessError } from '@kit.BasicServicesKit';

//自定义
import { Mine_SystemItem_Type,CommonConstants } from "../common/CommonConstant"

@Entry
@Component
struct Index06 {
@State tabMineItem:Mine_SystemItem_Type[] = CommonConstants.MINE_SYSTEM_ITEM_LIST
@State isLogin: boolean = false
@State userImg: string|Resource|undefined = $r("app.media.app_icon") // 登录头像
@State userName: string|undefined = '昵称001' // 用户昵称
@State btnTitle: string = '华为账号一键登录' // 用户昵称

getHuaWeiAccount(){
// 创建授权请求,并设置参数
let authRequest = new authentication.HuaweiIDProvider().createAuthorizationWithHuaweiIDRequest();
// 获取头像昵称需要传如下scope
authRequest.scopes = ['profile','phone'];
// 若开发者需要进行服务端开发,则需传如下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: %{public}s',
JSON.stringify(authorizationWithHuaweiIDResponse));
this.isLogin = !this.isLogin
this.btnTitle = '退出'
this.userImg = authorizationWithHuaweiIDResponse.data!.avatarUri;
this.userName = authorizationWithHuaweiIDResponse.data!.nickName;

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

}
// 错误处理
dealAllError(error: BusinessError): void {
hilog.error(0x0000, 'testTag', Failed to auth. Code: ${error.code}, message: ${error.message});
}

build() {
Column() {
Column() {
//头像
Column() {
Image(this.userImg)
.objectFit(ImageFit.Cover)
.height(72)
.width(72)
.borderRadius(36)
Row().height(20)

Text(this.userName).fontSize(16)

      }
      .width('90%')
      .borderRadius(12)
      .alignItems(HorizontalAlign.Center)
      .justifyContent(FlexAlign.Center)
      .backgroundColor(0xFFFFFF)
      .shadow({
        radius: 10,
        color: "#dddddd",
        offsetX: 6,
        offsetY: 6
      })
      .margin({ top: 15, bottom: 10 })
      .padding({ top: 30, bottom: 30 })
    }
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Center)

    Button(this.btnTitle)
      .width('70%')
      .height(30)
      .onClick(()=>{
        this.getHuaWeiAccount()
        // this.isLogin = !this.isLogin
        // this.btnTitle = '退出'
      })
      .margin({ top:10,bottom:20 })

    if (this.isLogin){
    Column(){
      //功能选项
      ForEach(this.tabMineItem,(item:Mine_SystemItem_Type,index:number)=>{
        Row(){
          Text(item.itemTitle).fontSize(16).fontColor(0x161616)
          Blank()
          Image($r("app.media.ic_right_back_greyWhite")).width(24).height(24)
        }.width('100%')
        .height(48)
        .padding({left:15,right:10})
        .stateStyles({
          normal:{.backgroundColor(0xFFFFFF)},
          pressed:{.backgroundColor(0xEFEFEF)}
        })
      },(item:string)=>item)
      Row(){
        Text('隐私声明').fontSize(16).fontColor(0x161616)
        Blank()
        Image($r("app.media.ic_right_back_greyWhite")).width(24).height(24)
      }.width('100%')
      .height(48)
      .padding({left:15,right:10})
      .stateStyles({
        normal:{.backgroundColor(0xFFFFFF)},
        pressed:{.backgroundColor(0xEFEFEF)}
      })

    }.width('90%')
    .justifyContent(FlexAlign.Start)
    .alignItems(HorizontalAlign.Center)
    .backgroundColor(0xFFFFFF)
    .shadow({radius:10,color:"#dddddd",offsetX:6,offsetY:6})
    .padding({top:10,bottom:10})
    .borderRadius(12)
    }

  }.width('100%')
.height('100%')
.justifyContent(FlexAlign.Start)
.backgroundColor(0xEEEEEE)

}

}

`

更多回帖

×
发帖