Lewati ke konten utama

Memperbarui atribut pengguna misalnya nomor telepon pengguna

Dalam contoh ini, kami menunjukkan cara memperbarui atribut pengguna, seperti nomor telepon mereka, menggunakan API OneEntry.

✅ Tujuan skenario:

  • Pengguna melakukan otentikasi dengan login dan kata sandi
  • Kami mendapatkan data pengguna saat ini untuk mengisi formulir frontend
  • Pengguna mengedit sebuah field (misalnya telepon) dan menyimpan
  • Menyimpan data pengguna di Platform OneEntry

✅ Apa yang Anda butuhkan:

  • PROJECT_URL dan APP_TOKEN yang valid untuk otentikasi dengan API OneEntry.
  • Formulir pendaftaran dengan penanda "reg"
  • Field formulir (atribut) dengan penanda "email_reg", "password_reg", "name_reg", "phone_reg"
  • Pengguna yang sudah ada dan diaktifkan untuk diautentikasi

📌 Penting:

  • Contoh-contoh ini tidak mencakup penanganan kesalahan.
  • Anda dapat mengelola kesalahan menggunakan blok try-catch atau dengan menggunakan konstruksi seperti await Promise.catch((error) => error).
  • Pastikan bahwa formIdentifier yang digunakan dalam metode updateUser() cocok dengan yang dikonfigurasi dalam proyek OneEntry Anda.

📚 Lihat di dokumentasi:

📦 Referensi SDK:

Coba secara langsung​

Jalankan metode ini secara interaktif di JS SDK sandbox — sambungkan Project URL dan App Token Anda pada kunjungan pertama, lalu buka:

Skenario​

1. Impor defineOneEntry dari SDK dan definisikan PROJECT_URL dan APP_TOKEN​

Contoh:

import { defineOneEntry } from 'oneentry';

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

2. Membuat klien API dengan defineOneEntry()​

Contoh:

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

3. Membentuk authData dan mengautentikasi pengguna dengan AuthProvider.auth()​

Contoh:

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

4. Mendapatkan pengguna saat ini untuk mengisi formulir Users.getUser()​

Contoh:

.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);
]);
Hasil:
{
  "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. Memperbarui pengguna dengan Users.updateUser()​

Contoh:

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. Mendapatkan pengguna yang diperbarui dengan Users.getUser()​

Contoh:

const userData = await Users.getUser().catch((err: any) => err);
Hasil:
{
  "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": []
}

Contoh akhir​

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;