Javascript: Salesforce를 사용하여 비밀번호 없는 로그인 구현-JS 튜토리얼-php.cn

Javascript: Salesforce를 사용하여 비밀번호 없는 로그인 구현

Susan Sarandon

풀어 주다： 2024-12-14 12:54:16

원래의

448명이 탐색했습니다.

Javascript: Implementing Passwordless Login with Salesforce

Salesforce는 등록된 사용자가 애플리케이션에 원활하게 액세스할 수 있도록 하는 헤드리스 비밀번호 없는 로그인 흐름을 제공합니다. 비밀번호 없는 로그인은 매우 사용자 친화적이며, 필요한 것은 활성 이메일 주소뿐입니다. 이 게시물에서는 Salesforce로 비밀번호 없는 로그인 흐름을 구현하기 위한 몇 가지 코드 조각을 공유하겠습니다.

요구사항

시작하기 전에 다음 사항을 확인하세요.

a) Salesforce 환경에 액세스할 수 있습니다.

b) 사용자를 등록하고 비밀번호 없는 로그인 옵션을 활성화했습니다.

1단계: 사용자 이름 보내기

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

로그인 후 복사

2단계: 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) 식별자는 1단계에서 반환된 값입니다.

b) 코드는 Salesforce가 이메일로 보낸 OTP입니다.

c) Auth 및 Authorization 헤더가 정의되는 방식에 주의하세요.

d) 콘텐츠 유형은 application/x-www-form-urlencoded입니다. 본문에서 서식 지정을 위해 URLSearchParams를 어떻게 사용하는지 확인하세요.

모든 것이 순조롭게 진행되면 Salesforce에서 다음과 같은 응답을 반환합니다.

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

로그인 후 복사

3단계: 액세스 토큰으로 코드 교환

마지막 단계는 이전 단계의 코드를 액세스 토큰으로 교환하는 것입니다. 액세스 토큰은 사용자를 대신하여 요청할 수 있기 때문에 매우 중요합니다. 액세스 토큰이 있으면 사용자 세션이 활성화됩니다.

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를 맞춤설정할 수도 있습니다. 그러나 구조를 최소화하고 필요에 따라 추가 정보를 가져오기 위해 액세스 토큰을 사용하는 것이 좋습니다.