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

결론

비밀번호 없는 로그인은 누구에게나 편리하며 Salesforce와 같은 대부분의 클라우드 서비스는 이제 비밀번호 없는 로그인 흐름을 제공합니다. 이 기능을 활용하면 로그인 프로세스가 단순화되고 사용자 경험이 향상됩니다.

위 내용은 Javascript: Salesforce를 사용하여 비밀번호 없는 로그인 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!