Chuyển đến nội dung chính

Cập nhật thuộc tính người dùng ví dụ như số điện thoại của người dùng

Trong ví dụ này, chúng tôi sẽ trình bày cách cập nhật các thuộc tính của người dùng, chẳng hạn như số điện thoại của họ, bằng cách sử dụng API OneEntry.

✅ Mục đích của kịch bản:

  • Người dùng xác thực bằng tên đăng nhập và mật khẩu
  • Chúng tôi lấy dữ liệu người dùng hiện tại để tự động điền vào biểu mẫu frontend
  • Người dùng chỉnh sửa một trường (ví dụ: số điện thoại) và lưu lại
  • Lưu dữ liệu người dùng trên Nền tảng OneEntry

✅ Những gì bạn cần:

  • Một PROJECT_URL và APP_TOKEN hợp lệ để xác thực với API OneEntry.
  • Biểu mẫu đăng ký với dấu hiệu "reg"
  • Các trường biểu mẫu (thuộc tính) với các dấu hiệu "email_reg", "password_reg", "name_reg", "phone_reg"
  • Một người dùng đã tồn tại và được kích hoạt để xác thực

📌 Quan trọng:

  • Những ví dụ này không bao gồm xử lý lỗi.
  • Bạn có thể quản lý lỗi bằng cách sử dụng khối try-catch hoặc bằng cách sử dụng cấu trúc như await Promise.catch((error) => error).
  • Đảm bảo rằng formIdentifier được sử dụng trong phương thức updateUser() khớp với cái đã được cấu hình trong dự án OneEntry của bạn.

📚 Xem trong tài liệu:

📦 Tham khảo SDK:

Thử nghiệm trực tiếp​

Chạy phương thức này một cách tương tác trong JS SDK sandbox — kết nối URL Dự án và Mã thông báo Ứng dụng của bạn khi lần đầu truy cập, sau đó mở:

Kịch bản​

1. Nhập defineOneEntry từ SDK và định nghĩa PROJECT_URL và APP_TOKEN​

Ví dụ:

import { defineOneEntry } from 'oneentry';

const PROJECT_URL = 'your-project-url';
const APP_TOKEN = 'your-app-token';

2. Tạo một khách hàng API với defineOneEntry()​

Ví dụ:

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

3. Hình thành authData và xác thực người dùng với AuthProvider.auth()​

Ví dụ:

useEffect(() => {
  const authData = [
    { marker: 'email_reg', value: emailReg },
    { marker: 'password_reg', value: passwordReg },
  ];
  AuthProvider.auth('email', { authData })

4. Lấy người dùng hiện tại để tự động điền vào biểu mẫu Users.getUser()​

Ví dụ:

.then(() => Users.getUser())
.then((data: any) => {
  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(console.error);
]);
Kết quả:
{
  "id": 39,
  "total": "1",
  "identifier": "kvasssukr.net@gmail.com",
  "authProviderIdentifier": "email",
  "formData": [
    {
      "marker": "name_reg",
      "type": "string",
      "value": "Ivan"
    },
    {
      "marker": "phone_reg",
      "type": "string",
      "value": "+10000000001"
    },
    {
      "marker": "email_notification_reg",
      "type": "string",
      "value": "test@example.com"
    }
  ],
  "formIdentifier": "reg",
  "groups": [
    1
  ],
  "state": {},
  "rating": {},
  "moduleFormConfigs": []
}

5. Cập nhật người dùng với Users.updateUser()​

Ví dụ:

const formData = fields.map((d: any) => ({
  marker: d.marker,
  type: d.type,
  value: prepareValue(d.type, values[d.marker] ?? displayValue(d.value)),
}));
const body = {
  formIdentifier: 'reg',
  authData: [{ marker: 'password_reg', value: passwordReg }],
  formData,
  notificationData: {
    email: emailReg,
    phonePush: values['phone_reg'] ? [values['phone_reg']] : [],
    phoneSMS: values['phone_reg'] ?? '',
  },
};
const updateUser = (await Users.updateUser(body as any).catch(
  (err: any) => err,
)) as any;

6. Lấy người dùng đã cập nhật với Users.getUser()​

Ví dụ:

const userData = await Users.getUser().catch((err: any) => err);
Kết quả:
{
  "id": 39,
  "total": "1",
  "identifier": "kvasssukr.net@gmail.com",
  "authProviderIdentifier": "email",
  "formData": [
    {
      "marker": "name_reg",
      "type": "string",
      "value": "Ivan"
    },
    {
      "marker": "phone_reg",
      "type": "string",
      "value": "+10000000001"
    },
    {
      "marker": "email_notification_reg",
      "type": "string",
      "value": "test@example.com"
    }
  ],
  "formIdentifier": "reg",
  "groups": [
    1
  ],
  "state": {},
  "rating": {},
  "moduleFormConfigs": []
}

Ví dụ cuối cùng​

import React from 'react';

// Note: React is a sandbox global — in your project use named imports from 'react'
const { useState, useEffect } = React;

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

const PROJECT_URL = 'your-project-url';
const APP_TOKEN = 'your-app-token';

// 2. Creating an API client with [defineOneEntry()](/docs/index/#Installation)
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<any>(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. Forming authData and authenticate user with [AuthProvider.auth()](/docs/auth-provider/auth)
  useEffect(() => {
    const authData = [
      { marker: 'email_reg', value: emailReg },
      { marker: 'password_reg', value: passwordReg },
    ];
    AuthProvider.auth('email', { authData })
      // 4. Get the current user with [Users.getUser()](/docs/users/getUser) to pre-fill the form
      .then(() => Users.getUser())
      .then((data: any) => {
        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(console.error);
  }, []);

  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 user with [Users.updateUser()](/docs/users/updateUser)
    const formData = fields.map((d: any) => ({
      marker: d.marker,
      type: d.type,
      value: prepareValue(d.type, values[d.marker] ?? displayValue(d.value)),
    }));
    const body = {
      formIdentifier: 'reg',
      authData: [{ marker: 'password_reg', value: passwordReg }],
      formData,
      notificationData: {
        email: emailReg,
        phonePush: values['phone_reg'] ? [values['phone_reg']] : [],
        phoneSMS: values['phone_reg'] ?? '',
      },
    };
    const updateUser = (await Users.updateUser(body as any).catch(
      (err: any) => err,
    )) as any;

    if (updateUser?.statusCode >= 400) {
      setErrorMsg(updateUser.message || 'Update failed');
      setStatus('error');
      return;
    }

    // 6. Get the updated user with [Users.getUser()](/docs/users/getUser)
    const userData = await Users.getUser().catch((err: any) => err);
    setUser(userData);

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

  return (
    <form onSubmit={handleSubmit}>
      <h2>{user.localizeInfos?.title || '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;