Javascript: Implementierung einer passwortlosen Anmeldung mit Salesforce

Salesforce bietet einen Headless Passwordless Login Flow, der registrierten Benutzern den nahtlosen Zugriff auf eine Anwendung ermöglicht. Die passwortlose Anmeldung ist sehr benutzerfreundlich, es ist lediglich eine aktive E-Mail-Adresse erforderlich. In diesem Beitrag werde ich einige Codeausschnitte für die Implementierung des passwortlosen Anmeldeablaufs mit Salesforce teilen.

Anforderungen

Bevor wir beginnen, stellen Sie Folgendes sicher:

a) Sie haben Zugriff auf eine Salesforce-Umgebung.

b) Sie haben einen Benutzer registriert und die Option zur passwortlosen Anmeldung aktiviert.

Schritt eins: Benutzernamen senden

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

Dies ist der erste Anruf bei Salesforce. Beachten Sie Folgendes:

a) Sie müssen ein Captcha übergeben. Wenn Sie Hilfe benötigen, schauen Sie sich ReCAPTCHA v3 an.

b) Die Verifizierungsmethode ist auf E-Mail eingestellt, wodurch Salesforce angewiesen wird, ein Einmalpasswort (OTP) per E-Mail zu senden.

c) Neben Captcha und Verifizierungsmethode ist der einzige weitere erforderliche Parameter der Benutzername, der der für den Benutzer registrierten E-Mail-Adresse entspricht.

Wenn die Anfrage erfolgreich ist, sendet Salesforce eine E-Mail an den angegebenen Benutzernamen und gibt eine Antwort wie diese zurück:

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

Schritt zwei: OTP erfassen

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

Dies ist der zweite Anruf bei Salesforce. Hier ein paar wichtige Punkte:

a) Der Bezeichner ist der aus Schritt 1 zurückgegebene Wert.

b) Der Code ist das OTP, das Salesforce per E-Mail gesendet hat.

c) Achten Sie darauf, wie die Auth- und Authorization-Header definiert sind.

d) Der Inhaltstyp ist application/x-www-form-urlencoded. Beachten Sie, wie der Text URLSearchParams zur Formatierung verwendet.

Wenn alles reibungslos verläuft, gibt Salesforce eine Antwort wie diese zurück:

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

Schritt drei: Code gegen Zugriffstoken austauschen

Der letzte Schritt besteht darin, den Code aus dem vorherigen Schritt gegen ein Access Token auszutauschen. Das Zugriffstoken ist von entscheidender Bedeutung, da es Ihnen ermöglicht, Anfragen im Namen des Benutzers zu stellen. Das Vorhandensein des Zugriffstokens ermöglicht die Sitzung eines Benutzers.

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

Die Antwort sollte etwa so aussehen:

{
  "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"
}

Stellen Sie sicher, dass Sie das access_token sicher aufbewahren. Von hier aus können Sie eine Sitzung für Ihren Benutzer erstellen. Aus Sicherheitsgründen ist es am besten, diese Methoden auf dem Server auszuführen.

Das id_token ist ein JWT-Token. Wenn Sie es entschlüsseln, sieht es in etwa so aus:

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

Sie können das JWT auch so anpassen, dass es zusätzliche Daten enthält. Es wird jedoch empfohlen, die Struktur minimal zu halten und das Zugriffstoken zum Abrufen zusätzlicher Informationen bei Bedarf zu verwenden.

Abschluss

Die passwortlose Anmeldung ist für jedermann bequem und die meisten Cloud-Dienste wie Salesforce bieten jetzt einen passwortlosen Anmeldefluss an. Nutzen Sie diese Funktion, um den Anmeldevorgang zu vereinfachen und das Benutzererlebnis zu verbessern.

Das obige ist der detaillierte Inhalt vonJavascript: Implementierung einer passwortlosen Anmeldung mit Salesforce. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!