HarmonyOS—端云一体化组件

概述

DevEco Studio还为您提供多种端云一体化组件。集成端云一体化组件后，您只需进行简单配置即可向应用用户提供登录、支付等众多功能。

登录组件

您可使用端云一体化登录组件向应用用户提供登录和登出功能，目前支持帐号密码登录、手机验证码登录、以及邮箱验证码登录。

组件基于ArkUI开发，提供登录对话框页面。当前仅支持基于ArkUI开发，您可在项目中通过ohpm包依赖方式引入。

前提条件

您的项目使用ArkTS开发。
您已在AGC控制台创建项目。
您已为项目开通认证服务并启用相应的认证方式。手机验证码登录需启用"手机号码"认证方式，邮箱验证码登录或帐号密码登录需启用"邮箱地址"认证方式。

集成登录组件

1.通过ohpm包依赖方式引入组件，在"entry/oh-package.json5"文件中新增依赖：

"@ohos/agconnect-auth-component": "^1.0.5"

2.引入组件所需的方法。

import {Login, AuthMode} from "@ohos/agconnect-auth-component";

3.在代码中集成组件。

Column() {
        Login({
          modes: [AuthMode.PASSWORD, AuthMode.PHONE_VERIFY_CODE, AuthMode.MAIL_VERIFY_CODE],
          onSuccess: (user) => {
            AlertDialog.show({
              title: 'authInfo',
              message: JSON.stringify(user)
            })
          }
        }){
          Text('Login').decoration({ type: TextDecorationType.Underline });
        }
}

需传入需要开启的认证方式。
可自定义组件样式为文字、按钮或图标等，点击后弹出登录弹框。例如：
文字样式：

Text('Login').decoration({ type: TextDecorationType.Underline });
按钮样式：

Button('Login').fontColor(Color.White);

（可选）自定义登录组件的布局

如您希望自定义登录组件的内部布局，可按如下步骤集成登录组件：

1.将引入的登录组件ets目录（"entry/oh_modules/@ohos/agconnect-auth-component/src/main/ets"）拖动到主工程的ets目录（"entry/src/main/ets"）下。

2.在弹出的确认框中，确认移动的目标目录无误后，点击"Refactor"。

目录移动成功，如下图所示。

3.将登录组件的字符串资源代码拷贝至主工程的字符串资源目录文件下。

将"entry/oh_modules/@ohos/agconnect-auth-component/src/main/resources/en/element/string.json"文件内容拷贝至"entry/src/main/resources/en_US/element/string.json"文件内。
将"entry/oh_modules/@ohos/agconnect-auth-component/src/main/resources/zh/element/string.json"文件内容拷贝至"entry/src/main/resources/zh_CN/element/string.json"文件内。

4.进入"entry/src/main/ets/ets/components/Login"目录，分别在登录组件各个页面的build()方法中修改页面布局。

EmailDialog.ets：邮箱验证码登录页面
LoginDialog.ets：登录对话框页面，提供多种登录方式
PasswordDialog.ets：帐号密码登录页面
PhoneDialog.ets：手机验证码登录页面
RegisterDialog.ets：注册页面

5.引入您刚刚自定义的登录组件。

import {Login} from <Login.ets相对路径>
import {AuthMode} from <AuthModeEnum.ts相对路径>