Aller au contenu principal

Mettre à jour les attributs de l'utilisateur, comme le numéro de téléphone

Met à jour les attributs d'un utilisateur, comme son numéro de téléphone.

Ce que fait cet exemple :

  • Connecte l'utilisateur avec un identifiant et un mot de passe
  • Obtient les données de l'utilisateur courant pour pré-remplir le formulaire frontend
  • Permet à l'utilisateur de modifier un champ (par exemple, le téléphone) et l'enregistre
  • Enregistre les données dans la plateforme OneEntry

Prérequis :

  • Un PROJECT_URL et un APP_TOKEN valides pour l'API OneEntry.
  • Un formulaire d'inscription avec le marqueur "reg"
  • Des champs de formulaire (attributs) avec les marqueurs "email_reg", "password_reg", "name_reg", "phone_reg"
  • Un utilisateur existant et activé avec lequel s'authentifier

Remarques :

  • Les exemples gèrent les erreurs de façon minimale : ils vérifient la présence d'un objet d'erreur et s'arrêtent.
  • Par défaut (isShell: true), le SDK renvoie un objet d'erreur au lieu de lever une exception : vérifiez donc le résultat, par ex. 'statusCode' in result. Avec isShell: false, il lève une exception, et vous gérez les erreurs avec try/catch. Voir Errors.
  • Le formIdentifier passé à updateUser() doit correspondre à celui configuré dans votre projet OneEntry.

Documentation de la plateforme :

Référence du SDK :

Essayer en direct​

Exécutez cet exemple dans le bac à sable JS SDK. Lors de la première visite, connectez l'URL de votre projet et votre App Token, puis ouvrez :

Scénario​

Les étapes ci-dessous sont des extraits du composant React de l'Final example. L'état, les identifiants et les utilitaires tels que emailReg, passwordReg, values, fields, prepareValue et displayValue y sont définis.

1. Importer defineOneEntry et définir PROJECT_URL et APP_TOKEN​

import { defineOneEntry } from 'oneentry';

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

2. Créer un client API avec defineOneEntry()​

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

3. Construire authData et authentifier l'utilisateur avec 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. Obtenir l'utilisateur actuel pour préremplir le formulaire avec 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);
Résultat :
{
  "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. Mettre à jour l'utilisateur avec 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;
}

Ne passez authData que pour changer le mot de passe. L'API hache de nouveau toute valeur de mot de passe envoyée.

6. Obtenir l'utilisateur mis à jour avec Users.getUser()​

const userData = await Users.getUser();
if ('statusCode' in userData) {
  setErrorMsg(userData.message);
  setStatus('error');
  return;
}
setUser(userData);
Résultat :
{
  "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": []
}

Exemple 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;