Javascript：使用 Salesforce 實作無密碼登入-js教程-PHP中文網

Javascript: Implementing Passwordless Login with Salesforce

Salesforce 提供無頭無密碼登入流程，允許註冊用戶無縫存取應用程式。無密碼登入非常用戶友好，它只需要一個有效的電子郵件地址。在這篇文章中，我將分享一些用於使用 Salesforce 實作無密碼登入流程的程式碼片段。

要求

開始之前，請確保滿足以下條件：

a) 您有權存取 Salesforce 環境。

b) 您已註冊使用者並啟用無密碼登入選項。

第一步：發送使用者名稱

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

登入後複製

這是對 Salesforce 的第一次呼叫。請注意以下事項：

a) 您需要通過驗證碼。如需協助，請查看 ReCAPTCHA v3。

b) 驗證方法設定為電子郵件，這會告訴 Salesforce 透過電子郵件發送一次性密碼 (OTP)。

c) 除了驗證碼和驗證方法之外，唯一需要的其他參數是用戶名，它對應於用戶註冊的電子郵件。

如果請求成功，Salesforce 將向提供的使用者名稱發送電子郵件並返回以下回應：

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

登入後複製

第二步：捕獲 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;
}

登入後複製

這是第二次致電 Salesforce。這裡有幾個要點：

a) 標識符是第一步傳回的值。

b) 程式碼是 Salesforce 透過電子郵件傳送的 OTP。

c) 注意 Auth 和 Authorization 標頭的定義方式。

d) Content-Type 是 application/x-www-form-urlencoded。注意正文如何使用 URLSearchParams 進行格式化。

如果一切順利，Salesforce 將回傳以下回應：

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

登入後複製

第三步：用代碼交換存取令牌

最後一步是將上一個步驟中的程式碼交換為存取權杖。存取令牌至關重要，因為它允許您代表使用者發出請求。訪問令牌的存在可以啟用使用者會話。

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

登入後複製

回應應如下圖所示：

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

登入後複製

確保安全地儲存 access_token，從這裡，您可以為您的使用者建立會話。出於安全考慮，最好在伺服器上執行這些方法。

id_token 是 JWT 令牌。如果你解碼它，它將看起來像這樣：

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

登入後複製

您也可以自訂 JWT 以包含其他資料。但是，建議保持結構最小化，並根據需要使用存取權杖來獲取其他資訊。