Servicio de Cuenta de Huawei en HarmonyOS NEXT

Conceptos Fundamentales del Servicio de Cuenta de Huawei

Descripción Genarel

Account Kit ofrece una forma rápida y segura de autenticación mediante cuentas de Huawei. Los usuarios pueden iniciar sesión de manera conveniente, y tras la autorización, la aplicación puede acceder a información como avatar, nombre de usuario o número de teléfono para personalizar la experiencia.

Funcionalidades Clave

• Inicio de sesión: Permite a los usuarios acceder a la aplicación mediante su cuenta de Huawei.
• Obtención de datos del usuario: Proporciona información básica como avatar, nombre de usuario, número de teléfono, dirección de envío o datos de facturación.
• Control parental: Ofrece la posibilidad de obtener el estado y rango de edad del modo infantil, facilitando la clasificación de contenido y la verificación parental para ajustes relacionados.

Preparación del Entorno de Desarrollo

Para probar el inicio de sesión con cuenta de Huawei, se requiere un dispositivo físico; los emuladores no son compatibles. A continuación, los pasos esenciales:

1. Crear un proyecto de HarmonyOS NEXT y registrarlo en la plataforma AppGallery Connect (AGC).
2. Registrar el dispositivo físico en AGC para depuración.
3. Realizar la firma manual del proyecto, configurando los archivos de clave (.p12), certificado de depuración (.cer) y perfil (.p7b) en DevEco Studio.
4. Obtener el Client ID desde AGC: navegar a "Configurcaión del proyecto > General > Aplicación" y copiar el valor de "ID de cliente OAuth 2.0". Luego, añadir un metadato en el archivo module.json5 del módulo entry con el nombre client_id y el valor obtenido.
5. Configurar los permisos de scope: actualmente disponible solo para desarrolladores empresariales. Para funciones básicas como inicio de sesión y obtención de información elemental, no es necesario solicitar estos permisos.

Flujo de Inicio de Sesión con Cuenta de Huawei

Secuencia de Operación

El proceso se describe de la siguiente manera:

1. La aplicación muestra una página de inicio de sesión con un botón de Huawei Account. Al hacer clic, se solicita autorización al usuario.
2. Si la cuenta de Huawei no ha iniciado sesión, se redirige al usuario a la página de autenticación de Huawei. Tras el inicio de sesión, la aplicación recibe datos como UnionID, código de autorización, OpenID e ID Token, que se envían al servidor para verificación segura.
3. Si la cuenta ya está autenticada, los mismos datos se devuelven directamente a la aplicación, permitiendo al servidor completar el proceso de autenticación.

Interfaz Disponible

Ejemplo de Implementación en Código

Para integrar el botón de inicio de sesión, se importan los módulos necesarios de Account Kit:

import { LoginWithHuaweiIDButton, loginComponentManager } from '@kit.AccountKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { hilog } from '@kit.PerformanceAnalysisKit';

Se define un componente que muestra el botón y maneja la respuesta del usuario. A continuación, una adaptación con nombres de variables y estructura modificados:

@Entry
@Component
struct PaginaBotonHuawei {
  // Controlador para el componente de inicio de sesión
  control: loginComponentManager.LoginWithHuaweiIDButtonController =
    new loginComponentManager.LoginWithHuaweiIDButtonController()
    .onClickLoginWithHuaweiIDButton((error: BusinessError, resultado: loginComponentManager.HuaweiIDCredential) => {
      if (error) {
        hilog.error(0x0000, 'EtiquetaPrueba',
                    `Error en el evento de clic. Código: ${error.code}, mensaje: ${error.message}`);
        return;
      }

      if (resultado) {
        hilog.info(0x0000, 'EtiquetaPrueba', 'Respuesta obtenida exitosamente.');
        const codigoAutorizacion = resultado.authorizationCode;
        const identificadorAbierto = resultado.openID;
        const identificadorUnion = resultado.unionID;
        const tokenIdentificacion = resultado.idToken;
        // Lógica del desarrollador para procesar los datos recibidos
      }
    });

  build() {
    Column() {
      Column() {
        Column() {
          LoginWithHuaweiIDButton({
            params: {
              style: loginComponentManager.Style.BUTTON_RED, // Estilo visual del botón
              extraStyle: {
                buttonStyle: new loginComponentManager.ButtonStyle().loadingStyle({
                  show: true // Mostrar indicador de carga durante el proceso
                })
              },
              borderRadius: 24, // Radio de borde del botón
              loginType: loginComponentManager.LoginType.ID, // Tipo de inicio de sesión
              supportDarkMode: true, // Soporte para modo oscuro del sistema
              verifyPhoneNumber: true // Verificar número de teléfono si es necesario
            },
            controller: this.control
          })
        }
        .height(40)
      }.width('100%')
    }
    .justifyContent(FlexAlign.Center)
    .constraintSize({ minHeight: '100%' })
    .margin({ left: 16, right: 16 })
  }
}