登录
注册
首页 鸿蒙 正文
  • 本文约2601字，阅读需13分钟
  • 158
  • 0

鸿蒙调用原生登录实现注册登录

温馨提示：本文最后更新于2024年10月31日 17:57，若内容或图片失效，请在下方留言或联系博主。

除了常规的账号密码登录之外，我们还可以借助华为账号实现三方登录，Account Kit（华为帐号服务）提供简单、快速、安全的登录和授权功能，让用户无需输入帐号、密码和繁琐验证，避免因忘记密码而带来的麻烦，为您创建帐号并登录所有HarmonyOS应用，带来更高的注册转化，同时通过授权获得用户头像昵称、手机号码等信息，提升用户黏性。

一. 开发准备

1.1  申请手机号并验证手机号权限

 

登录华为开发者联盟，选择管理中心->API服务->授权管理 ，选择目标应用的应用名称，服务选择“华为帐号服务”，选择“敏感权限”，再选择“获取您的手机号”或“获取并验证您的手机号”，点击“申请” = 》华为开发者联盟

1.2 配置应用签名证书(四个)

登录AppGallery Connect，点击“我的项目”。在项目列表中找到您的项目，在项目中点击您的应用/元服务。在“项目设置 > 常规”页面的“应用”区域，点击“SHA256证书/公钥指纹”后的“添加公钥指纹（HarmonyOS API 9及以上）”

1.3  配置Client ID

把ClientId后面的数字复制一下，放到项目的module.json5文件中

"module": {
  "name": "xxx",
  "type": "entry",
  "description": "xxx",
  "mainElement": "xxx",
  "deviceTypes": [],
  "pages": "xxx",
  "abilities": [],
  "metadata": [ // 配置信息如下
    {
      "name": "client_id",
      "value": "id"
    }
  ]
}

1.4 调用华为提供的登录API拉起原生登录页

import { authentication } from '@kit.AccountKit'

PersistentStorage.persistProp<string>('openId', '')

class HuaweiAuthPlugin {
//  登录
  async requestAuth() {
    // 1. 创建一个Account Kit授权请求对象，可通过返回值设置请求参数。
    const huaweiIdProvider = new authentication.HuaweiIDProvider()
    const authCreateRequest = huaweiIdProvider.createAuthorizationWithHuaweiIDRequest()
    // 2. 添加请求参数
    authCreateRequest.scopes = ['phone', 'openid']
    authCreateRequest.permissions = ['serviceauthcode']
    authCreateRequest.forceAuthorization = true
    // 3. 执行授权请求，获取认证码
    const authController = new authentication.AuthenticationController(getContext())
    const authResponse: authentication.AuthorizationWithHuaweiIDResponse =
      await authController.executeRequest(authCreateRequest)
    const serviceauthcode = authResponse.data?.authorizationCode
    AppStorage.setOrCreate<string>('openId', authResponse.data?.openID)
    return serviceauthcode
  }

  // getHuaweiIDState  api12 支持

// 登出账号
  async cancelAuth() {
    try {
      // 1. 创建一个Account Kit授权请求对象，可通过返回值设置请求参数。
      const huaweiIdProvider = new authentication.HuaweiIDProvider()
      const authCancelRequest = huaweiIdProvider.createCancelAuthorizationRequest()
      // 2. 取消授权
      const authController = new authentication.AuthenticationController(getContext())
      await authController.executeRequest(authCancelRequest)
      return true
    } catch (e) {
      console.log('mk-logger', JSON.stringify(e))
      return false
    }
  }
}

export const huaweiAuthPlugin = new HuaweiAuthPlugin()

1.5 提供一个登录组件

import { huaweiAuthPlugin } from '@mk/basic'
import { MkDialogLoading } from '@mk/basic'

@Component
export struct HuaweiLoginCom {
  dialog: CustomDialogController = new CustomDialogController({
    builder: MkDialogLoading({ message: '华为登录中' }),
    customStyle: true,
    alignment: DialogAlignment.Center
  })

  build() {
    Image($r('app.media.ic_user_huawei'))
      .width(40)
      .onClick(async () => {
        const res = await huaweiAuthPlugin.requestAuth()
    AlertDialog.show({
      message: res  // res返回code码
    })
      })
  }
}

 返回code码 提交到后台服务器，后台服务器提交到华为服务器，华为验真后返回用户数据给后台，后台返回给我们

标签：鸿蒙HarmonyOS鸿蒙开发
评论