Javascript : implémentation d'une connexion sans mot de passe avec Salesforce

Salesforce propose un flux de connexion sans tête et sans mot de passe qui permet aux utilisateurs enregistrés d'accéder à une application de manière transparente. La connexion sans mot de passe est très conviviale, il suffit d’une adresse e-mail active. Dans cet article, je partagerai quelques extraits de code pour implémenter le flux de connexion sans mot de passe avec Salesforce.

Exigences

Avant de commencer, assurez-vous de ce qui suit :

a) Vous avez accès à un environnement Salesforce.

b) Vous avez enregistré un utilisateur et activé l'option de connexion sans mot de passe.

Première étape : envoyer le nom d'utilisateur

export async function passwordlessLogin(username, captcha) {
  const payload = {
    username,
    recaptcha: captcha,
    verificationmethod: "email",
  };
  const config = {
    headers: {
      "Content-Type": "application/json",
    },
    method: "POST",
    body: JSON.stringify(payload),
  };
  const url = `${REPLACE_WITH_YOUR_SALESFORCE_CLOUD_URL}/services/auth/headless/init/passwordless/login`;

  const response = await fetch(url, config);

  const result = await response.json();

  return result;
}

C'est le premier appel à Salesforce. Prenez note de ce qui suit :

a) Vous devrez passer un captcha. Pour obtenir de l'aide, consultez ReCAPTCHA v3.

b) La méthode de vérification est définie sur e-mail, ce qui indique à Salesforce d'envoyer un mot de passe à usage unique (OTP) par e-mail.

c) Avec le captcha et la méthode de vérification, le seul autre paramètre requis est le nom d'utilisateur, qui correspond à l'e-mail enregistré pour l'utilisateur.

Si la demande aboutit, Salesforce enverra un e-mail au nom d'utilisateur fourni et renverra une réponse comme celle-ci :

{
  "identifier": "MFF0RWswMDAwMDIxdVRk",
  "status": "success"
}

Deuxième étape : capturer OTP

export async function passwordlessAuthorize(identifier, code) {
  const Authorization = btoa(identifier + ":" + code);

  const config = {
    headers: {
      "Auth-Request-Type": "passwordless-login",
      "Auth-Verification-Type": "email",
      Authorization: "Basic " + Authorization,
      "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "POST",
    body: new URLSearchParams({
      response_type: "code_credentials",
      client_id: "REPLACE_WITH_YOUR_CLIENT_ID",
      redirect_uri: "REPLACE_WITH_YOUR_REDIRECT_URI",
    }),
  };
  const response = await fetch(
    `${REPLACE_WITH_YOUR_SALESFORCE_CLOUD_URL}/services/oauth2/authorize`,
    config
  );

  const result = await response.json();

  return result;
}

C'est le deuxième appel à Salesforce. Voici quelques points clés :

a) L'identifiant est la valeur renvoyée par la première étape.

b) Le code est l'OTP que Salesforce a envoyé par e-mail.

c) Faites attention à la façon dont les en-têtes Auth et Authorization sont définis.

d) Le type de contenu est application/x-www-form-urlencoded. Remarquez comment le corps utilise URLSearchParams pour le formatage.

Si tout se passe bien, Salesforce renverra une réponse comme celle-ci :

{
  "code": "aPrxOPPU1bwu2d3SbsSBKLUbZop4sxhra2Tb.p3LApgVIexVmwyIGVaF6vTebI7ottVto18uuQ==",
  "sfdc_community_url": "https://site.com/application",
  "sfdc_community_id": "xxxxxxxx"
}

Troisième étape : échanger le code contre un jeton d'accès

La dernière étape consiste à échanger le code de l'étape précédente contre un jeton d'accès. Le jeton d'accès est crucial car il permet de faire des demandes au nom de l'utilisateur. La présence du jeton d'accès permet la session d'un utilisateur.

export async function getAccessToken(code) {
  const config = {
    headers: {
      "Content-Type": "application/x-www-form-urlencoded",
    },
    method: "POST",
    body: new URLSearchParams({
      code,
      grant_type: "authorization_code",
      client_id: "REPLACE_WITH_YOUR_CLIENT_ID",
      redirect_uri: "REPLACE_WITH_YOUR_REDIRECT_URI",
    }),
  };

  const response = await fetch(
    `${REPLACE_WITH_YOUR_SALESFORCE_CLOUD_URL}/services/oauth2/token`,
    config
  );

  const result = await response.json();

  return result;
}

La réponse devrait ressembler à ceci :

{
  "access_token": "00DEj000006DHsR!AQEAQGpj5XvnBl1QQ8PI4XjygHmXAJiG7CA4Ci0mIxZcg7hO_YYZanyXPX9uelAez2905VFnE6VzhmavmnDoBOks.wzhlZHc",
  "refresh_token": "5Aep861i1Ns2kInCGgjSdz4OOTyJzqw_gZDs5f1PwqH0NfU0AKgLDAw5ptc.qADf.bVZ1aPlUKjyISe2lxx5KQ0",
  "sfdc_community_url": "https://site.com/application",
  "sfdc_community_id": "xxxxxxxx",
  "signature": "jwnfZY2G3phxCl3fJrfJu5X2AyxW7Ozsfg2BZ6bBB74=",
  "scope": "refresh_token openid user_registration_api api",
  "id_token": "...",
  "instance_url": "https://site.com/",
  "id": "https://test.salesforce.com/id/00000/11111",
  "token_type": "Bearer",
  "issued_at": "1733700157803"
}

Assurez-vous de stocker en toute sécurité le access_token, et à partir de là, vous pouvez créer une session pour votre utilisateur. Pour des raisons de sécurité, il est préférable d'exécuter ces méthodes sur le serveur.

L'id_token est un jeton JWT. Si vous le décodez, cela ressemblera à ceci :

{
  "at_hash": "HTa4VEmQhCYi59WLhiL6DQ",
  "sub": "https://test.salesforce.com/id/00000/11111",
  "aud": "3MXG9j6uMOMC1DNjcltNj9xPoUi7xNbiSwPqOjmDSLfCW54f_Qf6EG3EKqUAGT6xyGPc7jqAMi4ZRw8WTIf9B",
  "iss": "https://site.com/",
  "exp": 1733702662,
  "iat": 1733702542
}

Vous pouvez également personnaliser le JWT pour inclure des données supplémentaires. Cependant, il est recommandé de garder la structure minimale et d'utiliser le jeton d'accès pour récupérer des informations supplémentaires si nécessaire.

Conclusion

La connexion sans mot de passe est pratique pour tout le monde, et la plupart des services cloud, comme Salesforce, proposent désormais un flux de connexion sans mot de passe. Tirez parti de cette fonctionnalité pour simplifier le processus de connexion et améliorer l'expérience utilisateur.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!