developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
xugenyuan
9c4acedc 1 parent 539afde9

ref |> 修改一键登录，按钮采用系统按钮

Inline Side-by-side
Showing 2 changed files with 87 additions and 27 deletions
... ... @@ -7,6 +7,8 @@ import { Logger, ToastUtils, CustomToast, EmitterUtils, EmitterEventId } from 'w
import { LoginViewModel } from './LoginViewModel'
import {InterestsHobbiesModel} from '../../../../../../../products/phone/src/main/ets/pages/viewModel/InterestsHobbiesModel'
import { TrackConstants, TrackingButton, TrackingPageBrowse } from 'wdTracking/Index'
import { loginComponentManager, LoginWithHuaweiIDButton } from '@kit.AccountKit'
import { JSON } from '@kit.ArkTS'
const TAG = "OneKeyLoginPage"
... ... @@ -29,6 +31,30 @@ struct OneKeyLoginPage {
customStyle: true,
maskColor:"#00000000"
})
// 构造LoginWithHuaweiIDButton组件的控制器。
controller: loginComponentManager.LoginWithHuaweiIDButtonController =
new loginComponentManager.LoginWithHuaweiIDButtonController()
/**
* 当应用使用自定义的登录页时，如果用户未同意协议，需要设置协议状态为NOT_ACCEPTED，当用户同意协议后再设置
* 协议状态为ACCEPTED，才可以使用华为帐号一键登录功能。
*/
.setAgreementStatus(loginComponentManager.AgreementStatus.NOT_ACCEPTED)
.onClickLoginWithHuaweiIDButton((error: BusinessError, response: loginComponentManager.HuaweiIDCredential) => {
if (error) {
Logger.debug("HuaweiOneKeyAuth", "onClickLoginWithHuaweiIDButton error: " + JSON.stringify(error))
this.toastText = "请阅读并勾选用户协议、隐私政策和华为账号用户认证协议"
this.dialogToast.open()
return;
}
if (response) {
// 获取到Authorization Code
let authorizationCode = response.authorizationCode;
// hilog.info(0x0000, 'testTag', 'response: %{public}s', JSON.stringify(response));
TrackingButton.click("oneClickLoginPageLoginButton", this.pageName, this.pageName)
this.requestLogin()
return;
}
});
// 埋点计算页面浏览时长
private pageStartDate: number = 0
... ... @@ -85,30 +111,7 @@ struct OneKeyLoginPage {
this.ProtocolRow()
Row() {
Button() {
Row() {
Image($r("app.media.huawei_one_key_login_icon"))
.width(24).height(24)
Text("华为账号一键登录")
.fontColor(Color.White)
}
}
.type(ButtonType.Normal)
.height(48)
.backgroundColor(!this.agreeProtocol ? "#60ED2800" : "#ED2800")
.width("100%")
.onClick((event) => {
if (!this.agreeProtocol) {
return
}
TrackingButton.click("oneClickLoginPageLoginButton", this.pageName, this.pageName)
this.requestLogin()
})
}
.padding({ left: 25, right: 25 })
.margin({top: 20})
this.loginButton()
Button("账号密码登录")
.type(ButtonType.Normal)
... ... @@ -125,6 +128,58 @@ struct OneKeyLoginPage {
.padding({top: `${this.topSafeHeight}px`})
}
@Builder loginButton() {
Column() {
LoginWithHuaweiIDButton({
params: {
// LoginWithHuaweiIDButton支持的样式。
style: loginComponentManager.Style.BUTTON_CUSTOM,
// LoginWithHuaweiIDButton的边框圆角半径。
borderRadius: 4,
// LoginWithHuaweiIDButton支持的登录类型。
loginType: loginComponentManager.LoginType.QUICK_LOGIN,
// LoginWithHuaweiIDButton支持按钮的样式跟随系统深浅色模式切换。
supportDarkMode: true,
customButtonParams: {
fontColor: loginComponentManager.FontColor.WHITE,
// backgroundColor:!this.agreeProtocol ? "#60ED2800" : "#ED2800"
backgroundColor:"#ED2800"
}
},
controller: this.controller
})
}
.height(48)
.margin({ top: 20 ,left: 25, right: 25 })
}
// @Builder loginButton() {
// Row() {
// Button() {
// Row() {
// Image($r("app.media.huawei_one_key_login_icon"))
// .width(24).height(24)
// Text("华为账号一键登录")
// .fontColor(Color.White)
// }
// }
// .type(ButtonType.Normal)
// .height(48)
// .backgroundColor(!this.agreeProtocol ? "#60ED2800" : "#ED2800")
// .width("100%")
// .onClick((event) => {
// if (!this.agreeProtocol) {
// return
// }
//
// TrackingButton.click("oneClickLoginPageLoginButton", this.pageName, this.pageName)
// this.requestLogin()
// })
// }
// .padding({ left: 25, right: 25 })
// .margin({top: 20})
// }
@Builder ProtocolRow() {
Row({space: 4}) {
Image(this.agreeProtocol ? $r('app.media.login_checkbox_select') : $r('app.media.login_checkbox_unselected'))
... ... @@ -133,6 +188,11 @@ struct OneKeyLoginPage {
.margin({top: 3})
.onClick(() => {
this.agreeProtocol = !this.agreeProtocol
if (this.agreeProtocol) {
this.controller.setAgreementStatus(loginComponentManager.AgreementStatus.ACCEPTED)
} else {
this.controller.setAgreementStatus(loginComponentManager.AgreementStatus.NOT_ACCEPTED)
}
})
Text() {
Span("我已阅读并同意").fontColor("#999999").fontSize(12).lineHeight(18)
... ... @@ -173,7 +233,7 @@ struct OneKeyLoginPage {
async requestLogin() {
try {
let authorizeCode = await HuaweiAuth.sharedInstance().oneKeyLogin()
let authorizeCode = await HuaweiAuth.sharedInstance().requestProfile()
let data = await this.viewModel.huaweiOneKeyLogin(authorizeCode)
... ...
... ... @@ -84,7 +84,7 @@ export default class HuaweiAuth {
// 华为账号一键登录授权
// 返回结果为 Authorization Code
oneKeyLogin() : Promise<string> {
requestProfile() : Promise<string> {
// let loginRequest = new authentication.HuaweiIDProvider().createLoginWithHuaweiIDRequest();
// // 当用户未登录华为帐号时，是否强制拉起华为帐号登录界面
... ... @@ -94,7 +94,7 @@ export default class HuaweiAuth {
// 创建授权请求，并设置参数
let loginRequest = new authentication.HuaweiIDProvider().createAuthorizationWithHuaweiIDRequest();
// 获取头像昵称需要传如下scope
loginRequest.scopes = ['profile', 'phone'];
loginRequest.scopes = ['profile']; //, 'phone'
// 若开发者需要进行服务端开发，则需传如下permission获取authorizationCode
loginRequest.permissions = ['serviceauthcode'];
// 用户是否需要登录授权，该值为true且用户未登录或未授权时，会拉起用户登录或授权页面
... ...