应用内实现华为账号登录开发步骤

目录

 开发步骤

一、配置应用签名证书

1、 .p12 密钥文件和 .csr 证书请求文件生成

2、申请 .cer 调试证书

3、申请 .p7b 调试profile

创建项目步骤：

已有项目：

4、DevEco Studio工具中配置签名信息

5、配置公钥指纹

二、配置权限

1、 配置Client ID

2、scope权限申请

三、实现华为授权登录

1、实现流程图

2、 获取华为登录 code

3、实现华为登录

---

简介：

        虽然不是全网首发，但能保证是最细节的啦！借助华为账号实现第三方登录，Account Kit（华为帐号服务）提供简单、快速、安全的登录和授权功能，让用户无需输入帐号、密码和繁琐验证，避免因忘记密码而带来的麻烦，为您创建帐号并登录所有HarmonyOS应用，通过授权获得用户头像昵称、手机号码等信息。

开发环境：

HarmonyOS NEXT版本（API 12）

DevEco Studio NEXT Developer Beta5（构建版本：5.0.3.700）

部分功能需要用到真机进行测试

 开发步骤

当应用需要使用以下开放能力的一种或多种时，为正常调试运行应用，需要预先添加公钥指纹

• Account Kit（华为帐号服务）
• Call Kit（通话服务）
• Game Service Kit（游戏服务）
• Health Service Kit（运动健康服务）
• IAP Kit（应用内支付服务）
• Live View Kit（实况窗服务，当需要使用Push Kit时必须执行此步骤）
• Map Kit（地图服务）
• Payment Kit（华为支付服务）
• Push Kit（推送服务）
• Scan Kit（统一扫码服务）

一、配置应用签名证书

由上图可知，我们想配置应用签名信息，就要准备四个文件，这里我们把它分为三步：

1)获取.p12密钥文件和.csr证书请求文件

2)申请.cer调试证书

3)申请.p7b调试profile

1、 .p12 密钥文件和 .csr 证书请求文件生成

在DevEco Studio工具侧生成密钥（.p12）和证书请求文件（.csr）步骤：

在主菜单栏单击Build（构建）-> Generate Key and CSR（生成私钥和证书请求文件）

在弹窗中点击New，如下图：

点击新建一个文件用来存放我们将来生成的文件。（新建文件夹如下图）

密码不能是纯数字，这个密码一定要记住哦，待会儿要用到

新建文件夹过程，此文件夹将来用于存放我们生成和请求的签名文件

这一步做完以后，我们来到下图：

我们一样，需要填写别名（这个别名也需要记住，待会儿去官网申请文件时会用到）

填好Alias别名以及First and last name之后，点击Next按钮（部分小伙伴需要填写First and last name，我这里没写也一样可以），会到这个页面：

如上图，手动选择生成.csr文件后保存的位置，选择我们刚刚新建的文件夹，找到我们的文件夹并在下图2的地方填写即将生成的 .csr 文件的名称，填写完以后点击确认。

点击Finish。

显示下图信息表示生成成功~

回到我们当初创建的文件夹里，可以看到我们已经生成了.csr和.p12文件

2、申请 .cer 调试证书

申请 .cer 调试证书需要去到AGC平台去申请，目前只有企业账号去申请才会被审核通过，如果小伙伴们有企业账号可以去申请试试哦~

申请步骤：

进入AGC平台，登录之后，点击证书部分：

点击新增证书：

在弹出的弹窗中进行配置，如下图：

最后点击提交，如下图：

可以看到，我们配置的调试证书（.cer）已经生成，点击下载后，将下载好的 .cer 文件移动到我们建的那个文件夹中（就是那个存 .p12 和 .csr 文件的文件夹），方便后续进行管理。

此时，我们已经成功获取到了 .cer 调试证书，目前战利品如下：

3、申请 .p7b 调试profile

这一步还是要到AGC平台上去操作。点击 “我的项目”

如果没有项目可以新建一个项目，若已有项目，直接点击已有的项目进行配置。已有项目可以点击目录跳转到“已有项目”。

目前默认大家已经建好了项目。如果有小伙伴还不清楚怎么新建项目，可以在评论区留言，后续考虑出一个新建项目的教程。

创建项目步骤：

点击添加项目：弹窗中写好项目的名称

有个“开通分析服务”，我这里就不开了哈，要是开启，还要进行一些配置。。。

点击完成后，如图：

再点击添加应用： 选择APP(HarmonyOS)

 点击蓝色的 APP ID 跳转到如下页面，填写信息：

点击确认后，页面下面会出现一系列“构建”，不用管，直接点下面的确认。

如下图：

至此，项目创建完毕。

已有项目：

在AGC平台主页，点击 “我的项目”，选择我们的项目：

下滑找到“应用”，记一下这个项目的包名，后面会用到。

找到“证书、APP ID和Profile”

点击Profile，点添加

填写信息：（如果选择设备时，没有选项，那就电脑连接手机跑一下应用就好了）

tips：选择证书时的小bug~

添加完显示：

此刻，我们已经完成了 .p7b的调试Profile文件的申请，下载后添加到我们的文件夹里~

我们的战利品：

4、DevEco Studio工具中配置签名信息

在DevEco Studio里，点击文件->项目结构

在弹窗里填好配置信息，如下图：

tips：配置完签名以后，小伙伴们可以试着去跑一下项目，如果报错了，可以尝试把原先的应用卸载了再跑一次。

如果包名发现不一致，小伙伴可以去DevEco里的 AppScope/app.json5 里，将包名改回来即可。

5、配置公钥指纹

登录AGC平台，点击“我的项目”，在项目列表中找到我们的项目，点击下图位置添加公钥指纹：

在弹出的窗口中选择我们的调试证书：

至此，我们的这一步配置完毕。

可能出现的错误：

解决方法：

在DevEco的项目列表里找到 build-profile.json5 里，删除图中的签名信息，然后按照上面的步骤重新在DevEco里手动签名即可。

别的地方找的错误信息，内容有区别但结构不变。

---

二、配置权限

1、 配置Client ID

参考官网文档：配置Client ID，和我们下面的步骤是一样的~

把 Client ID 后面的数字复制一下，放到项目的 module.json5文件中，注意是应用的 Client ID 

在工程中entry模块的module.json5文件中，新增metadata，配置name为client_id，value为上一步获取的Client ID的值，如下所示：

2、scope权限申请

登录华为开发者联盟，点击API服务的授权管理，找到我们的权限申请页面去申请权限。

假设我们已经成功申请到了权限，那么我们可以继续进行下一步~

或者公司已经有别的软件申请到了这个权限，我们可以向别人索要一下信息，比如说密码、别名、包名、Client ID、ClientSecret等信息~然后在自己的项目里进行修改即可。（步骤大概是，删掉原先的签名，然后手动配置签名文件，还是用之前我们自己的那些文件。把包名、别名等信息改成这个即可。）

---

三、实现华为授权登录

1、实现流程图

1. 配置证书及权限
2. 调用华为登录的 api 拉起登录界面
3. 获取登录成功之后的 code（码）
4. 提交给应用的后端接口
5. 后端会将 code 提交给华为服务器验真
6. 成功返回用户信息
7. 本地拿到用户信息保存即可

2、 获取华为登录 code

参考官方文档：获取手机号-快速验证

开发前提

1、在进行代码开发前，请先确认您已完成开发准备工作。

2、应用获取手机号前，需要完成phone（获取您的手机号）的scope权限申请，详情参见scope权限申请，scope权限申请审批未完成或未通过，将报错：1001502014 应用未申请scopes或permissions权限。

3、设备需要登录华为账号，若未登录则拉起登录页面。

这里我们把开发步骤分为4步：

1）准备登录模块

为了简化调用，这里将华为登录的核心逻辑进行封装

src/main/ets/utils/HuaweiAuthPlugin.ets

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('Merlin-logger', JSON.stringify(e))
      return false
    }
  }
}

export const huaweiAuthPlugin = new HuaweiAuthPlugin()

别忘了将工具类导出

2）准备登录组件

src/main/ets/components/HuaweiLoginCom.ets

import { MerlinDialogLoading } from '《自定义dialog路径》'

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

  build() {
    Image($r('app.media.ic_user_huawei'))
      .width(40)
      .onClick(async () => {
       // 等待完善
      })
  }
}

3）整合到登录页

这里是Page页面调用LoginView组件显示。

src/main/ets/views/LoginView.ets

import { HuaweiLoginCom } from '...'

// 其他略
Row() {
  // 放置华为登录的地方
  HuaweiLoginCom()
}

4）获取 code

src/main/ets/components/HuaweiLoginCom.ets

Image($r('app.media.ic_user_huawei'))
  .width(40)
  .onClick(async () => {
    try {
      this.dialog.open()
      const res = await huaweiAuthPlugin.requestAuth()
      // AlertDialog.show({ message: res })
    } catch (e) {
      console.log(JSON.stringify(e))
    } finally {
      this.dialog.close()
    }
  })

Alert弹窗显示res：

这个就是我们要的华为授权code码，我们要根据这个码去向服务器发请求~

3、实现华为登录

来看我们的流程图，目前我们只剩红框里的事情没有做了：

这个发送请求就要参照我们后端服务器的要求来了哦~

以下信息仅供参考，具体使用还是按照实际开发中情况而定。举个例子：

现在有个后端，要我们以这种格式去发数据：

于是我们的流程为：

在 src/main/apis/index 中放置我们的api

// 华为登录
interface HuaweiLoginParams {
  code: string
  clientId: string
  clientSecret: string
}

// 演示使用，实际秘钥应该由后端通过接口返回
// 在AGC 平台获取 需要和应用的一致
// 部分已打码，改成自己的即可！
export const clientId = '111***537'
export const clientSecret = '850a8c7553635b8c72b1624b****************d6f715d8e3e79c1dc3acb11e'

export const huaweiLoginAPI = (code: string) => {
  const data: HuaweiLoginParams = {
    clientId,
    clientSecret,
    code
  }
  return RequestAxios.post<MkUser, HuaweiLoginParams>('/login/huawei', data)
}

src/main/ets/components/HuaweiLoginCom.ets

 build() {
    Image($r('app.media.ic_user_huawei'))
      .width(40)
      .onClick(async () => {
        try {
          this.dialog.open()
          const code = await huaweiAuthPlugin.requestAuth()
          
          const loginRes = await huaweiLoginAPI(code as string)
          auth.saveUser(loginRes.data.result)
          promptAction.showToast({ message: '华为登录成功~' })
          router.back()
          
        } catch (e) {
          AlertDialog.show({ message: JSON.stringify(e, null, 2) })
        } finally {
          this.dialog.close()
        }
      })
  }

登出的时候，在登出的页面里调用 huaweiAuthPlugin.cancelAuth() 即可~

至此，我们的鸿蒙原生开发华为账号登录功能就实现啦~

---

编写不易，如果对您有帮助的话，麻烦各位点个赞呗~万分感谢！