Saltar al contenido principal

Actualizar los atributos del usuario, como el número de teléfono

Actualiza los atributos de un usuario, como su número de teléfono.

Qué hace este ejemplo:

  • Inicia la sesión del usuario con un login y una contraseña
  • Obtiene los datos del usuario actual para rellenar previamente el formulario del frontend
  • Permite al usuario editar un campo (por ejemplo, el teléfono) y lo guarda
  • Guarda los datos en la plataforma OneEntry

Requisitos previos:

  • Un PROJECT_URL y un APP_TOKEN válidos para la API de OneEntry.
  • Un formulario de registro con el marcador "reg"
  • Campos del formulario (atributos) con los marcadores "email_reg", "password_reg", "name_reg", "phone_reg"
  • Un usuario existente y activado con el que autenticarse

Notas:

  • Los ejemplos manejan los errores de forma mínima: comprueban si hay un objeto de error y se detienen.
  • Por defecto (isShell: true), el SDK devuelve un objeto de error en lugar de lanzar una excepción, así que comprueba el resultado, p. ej., 'statusCode' in result. Con isShell: false lanza la excepción y los errores se manejan con try/catch. Consulta Errors.
  • El formIdentifier que se pasa a updateUser() debe coincidir con el configurado en tu proyecto de OneEntry.

Documentación de la plataforma:

Referencia del SDK:

Pruébalo en vivo​

Ejecuta este ejemplo en el sandbox del SDK de JS. Conecta tu Project URL y App Token en la primera visita y luego abre:

Escenario​

Los pasos siguientes son fragmentos del componente de React del Ejemplo final. El estado, las credenciales y los helpers como emailReg, passwordReg, values, fields, prepareValue y displayValue se definen allí.

1. Importar defineOneEntry y definir PROJECT_URL y APP_TOKEN​

import { defineOneEntry } from 'oneentry';

const PROJECT_URL = 'https://your-project.oneentry.cloud';
const APP_TOKEN = 'your-app-token';

2. Crear un cliente de API con defineOneEntry()​

const { AuthProvider, Users } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

3. Construir authData y autenticar al usuario con AuthProvider.auth()​

const authData = [
  { marker: 'email_reg', value: emailReg },
  { marker: 'password_reg', value: passwordReg },
];
const authResponse = await AuthProvider.auth('email', { authData });
if ('statusCode' in authResponse) throw new Error(authResponse.message);

4. Obtener el usuario actual para rellenar previamente el formulario con Users.getUser()​

const data = await Users.getUser();
if ('statusCode' in data) throw new Error(data.message);

setUser(data);
const initial: Record<string, string> = {};
(Array.isArray(data.formData) ? data.formData : []).forEach((d: any) => {
  initial[d.marker] = displayValue(d.value);
});
setValues(initial);
Resultado:
{
  "id": 39,
  "total": "1",
  "identifier": "john@example.com",
  "authProviderIdentifier": "email",
  "formData": [
    {
      "marker": "name_reg",
      "type": "string",
      "value": "John"
    },
    {
      "marker": "phone_reg",
      "type": "string",
      "value": "+12025550147"
    },
    {
      "marker": "email_notification_reg",
      "type": "string",
      "value": "john@example.com"
    }
  ],
  "formIdentifier": "reg",
  "groups": [
    1
  ],
  "state": {},
  "rating": {},
  "moduleFormConfigs": []
}

5. Actualizar el usuario con Users.updateUser()​

const formData = fields.map((d: any) => ({
  marker: d.marker,
  type: d.type,
  value: prepareValue(d.type, values[d.marker] ?? displayValue(d.value)),
}));
// notificationData is left out: it replaces the stored object, including
// the FCM tokens in phonePush.
const body = {
  formIdentifier: 'reg',
  formData,
};
const result = await Users.updateUser(body);
if (result !== true) {
  setErrorMsg(typeof result === 'object' ? result.message : 'Update failed');
  setStatus('error');
  return;
}

Pasa authData solo para cambiar la contraseña. La API vuelve a aplicar hash a cualquier valor de contraseña que envíes.

6. Obtener el usuario actualizado con Users.getUser()​

const userData = await Users.getUser();
if ('statusCode' in userData) {
  setErrorMsg(userData.message);
  setStatus('error');
  return;
}
setUser(userData);
Resultado:
{
  "id": 39,
  "total": "1",
  "identifier": "john@example.com",
  "authProviderIdentifier": "email",
  "formData": [
    {
      "marker": "name_reg",
      "type": "string",
      "value": "John"
    },
    {
      "marker": "phone_reg",
      "type": "string",
      "value": "+12025550147"
    },
    {
      "marker": "email_notification_reg",
      "type": "string",
      "value": "john@example.com"
    }
  ],
  "formIdentifier": "reg",
  "groups": [
    1
  ],
  "state": {},
  "rating": {},
  "moduleFormConfigs": []
}

Ejemplo final​

import { useState, useEffect } from 'react';

// 1. Import defineOneEntry and define PROJECT_URL and APP_TOKEN
import { defineOneEntry } from 'oneentry';
import type { IUserEntity } from 'oneentry';

const PROJECT_URL = 'https://your-project.oneentry.cloud';
const APP_TOKEN = 'your-app-token';

// 2. Create an API client
const { AuthProvider, Users } = defineOneEntry(PROJECT_URL, {
  token: APP_TOKEN,
});

// Prepare value for API submission by field type
function prepareValue(type: string, value: string) {
  if (type === 'text') return [{ plainValue: value }];
  if (type === 'list' || type === 'radioButton') return [value];
  return value;
}

// Read a displayable string from a user formData entry's value
function displayValue(value: any): string {
  if (typeof value === 'string') return value;
  if (Array.isArray(value)) return value[0]?.plainValue ?? value[0]?.value ?? '';
  return value?.plainValue ?? '';
}

// Choose a sensible input type for a field by its marker
function inputTypeFor(marker: string) {
  if (marker.includes('password')) return 'password';
  if (marker.includes('email')) return 'email';
  if (marker.includes('phone')) return 'tel';
  return 'text';
}

const UpdateUser = () => {
  const [user, setUser] = useState<IUserEntity | null>(null);
  const [values, setValues] = useState<Record<string, string>>({});
  const [status, setStatus] = useState<'idle' | 'loading' | 'success' | 'error'>('idle');
  const [errorMsg, setErrorMsg] = useState('');

  // Pre-filled credentials (substituted at runtime from your settings)
  const emailReg = 'your-email';
  const passwordReg = 'your-password';

  // 3. Build authData and sign in
  useEffect(() => {
    const authData = [
      { marker: 'email_reg', value: emailReg },
      { marker: 'password_reg', value: passwordReg },
    ];
    AuthProvider.auth('email', { authData })
      // 4. Get the current user to pre-fill the form
      .then((auth) => {
        if ('statusCode' in auth) throw new Error(auth.message);
        return Users.getUser();
      })
      .then((data: any) => {
        if ('statusCode' in data) {
          setErrorMsg(data.message);
          setStatus('error');
          return;
        }
        setUser(data);
        const initial: Record<string, string> = {};
        (Array.isArray(data?.formData) ? data.formData : []).forEach((d: any) => {
          initial[d.marker] = displayValue(d.value);
        });
        setValues(initial);

        console.log('User ', data);
      })
      .catch((err: Error) => {
        setErrorMsg(err.message);
        setStatus('error');
      });
  }, []);

  if (status === 'error' && !user) return <p role="alert">{errorMsg}</p>;
  if (!user) return <div>Loading...</div>;

  const fields = Array.isArray(user.formData) ? user.formData : [];

  const handleSubmit = async (e: any) => {
    e.preventDefault();
    setStatus('loading');
    setErrorMsg('');

    // 5. Update the user
    const formData = fields.map((d: any) => ({
      marker: d.marker,
      type: d.type,
      value: prepareValue(d.type, values[d.marker] ?? displayValue(d.value)),
    }));
    // notificationData is left out: it replaces the stored object,
    // including the FCM tokens in phonePush.
    const body = {
      formIdentifier: 'reg',
      formData,
    };
    const result = await Users.updateUser(body);
    if (result !== true) {
      setErrorMsg(typeof result === 'object' ? result.message : 'Update failed');
      setStatus('error');
      return;
    }

    // 6. Get the updated user
    const userData = await Users.getUser();
    if ('statusCode' in userData) {
      setErrorMsg(userData.message);
      setStatus('error');
      return;
    }
    setUser(userData);

    console.log({ result, userData });
    setStatus('success');
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>Update profile</h2>

      {fields.map((field: any) => {
        const value = values[field.marker] ?? '';
        const onChange = (val: string) =>
          setValues((prev) => ({ ...prev, [field.marker]: val }));

        return (
          <div key={field.marker}>
            <label htmlFor={field.marker}>{field.marker}</label>
            <input
              id={field.marker}
              type={inputTypeFor(field.marker)}
              value={value}
              onChange={(e: { target: { value: string } }) => onChange(e.target.value)}
            />
          </div>
        );
      })}

      <button type="submit" disabled={status === 'loading'}>
        {status === 'loading' ? 'Saving...' : 'Save'}
      </button>

      {status === 'error' && <p role="alert">{errorMsg}</p>}
      {status === 'success' && <p role="status">User updated!</p>}
    </form>
  );
};

export default UpdateUser;