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 への 2 回目の呼び出しです。ここではいくつかの重要なポイントを示します:

a) 識別子は、ステップ 1 から返された値です。

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

ステップ 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 中国語 Web サイトの他の関連記事を参照してください。