電話番号でExperience Cloudサイトにログインさせるには | Breaking Codes

概要

標準の ID/パスワードでの認証を OFF にし、

電話番号入力 → SMS で送られた確認コードの入力 → ログイン

を実現します。

※入力した電話番号で SMS が受信できることが前提となります。

構成

ユーザ名の代わりに携帯電話番号で ID を特定し、
パスワードの代わりに確認コードの検証にてユーザ認証

をするためには、ログインディスカバリーという方法がありますが、ログイン画面は標準の見た目になり、変更することはできません。今回は、デザインをこだわったログイン画面を作ることを想定し、ログイン画面・サーバーコントローラーを Visualforce、Apex で作成します。

公式ドキュメント Use Login Discovery to Simplify Login https://developer.salesforce.com/docs/atlas.en-us.externalidentityImplGuide.meta/externalidentityImplGuide/external_identity_login_discovery_create_discovery.htm

手順

カスタムログイン画面用の Visualforce ページ、サーバーコントローラーとなる Apex クラスを作成します。

myCustomLoginPage.vfp

<apex:page showHeader="false" controller="myCustomLoginPageController">
  <div style="text-align: center;padding: 50px;">
    <p>電話番号を入力し、ログインをクリックしてください。</p>
    <apex:form id="loginForm" forceSSL="true">
      <apex:inputText required="true" value="{!input}" label="電話番号" />
      <apex:commandButton
        action="{!login}"
        value="ログイン"
        id="login-submit"
      />
    </apex:form>
  </div>
</apex:page>

myCustomLoginPageController.apxc

public without sharing class myCustomLoginPageController {
    public String input {get; set;}
    public myCustomLoginPageController(){
    }

    public PageReference login(){
        String formattedSms = getFormattedSms(input);
        List<User> users = [SELECT Id From User WHERE MobilePhone = :formattedSms AND IsActive = TRUE];
        if (users != null && users.size() == 1){
            String UserId = users[0].Id;
            List<Auth.VerificationMethod> methods = new List<Auth.VerificationMethod>();
            methods.add(Auth.VerificationMethod.SMS);
            return Site.passwordlessLogin(UserId, methods, '/');
        }
        return null;
    }

    private String getFormattedSms(String identifier) {
        // Accept SMS input formats with 1- or 2-digit country code,
        // 3-digit area code, and 7-digit number.
        // You can customize the SMS regex to allow different formats.
        String smsRegex = '^(\\+?\\d{1,2}?[\\s-])?(\\(?\\d{3}\\)?[\\s-]?\\d{3}[\\s-]?\\d{4})$';
        Pattern smsPattern = Pattern.compile(smsRegex);
        Matcher smsMatcher = SmsPattern.matcher(identifier);
        if (smsMatcher.matches()) {
            try {
                // Format user input into the verified SMS format '+xx xxxxxxxxxx'
                // before DB lookup. If no country code is provided, append
                // US country code +1 for the default.
                String countryCode = smsMatcher.group(1) == null ? '+1' : smsMatcher.group(1);
                return System.UserManagement.formatPhoneNumber(countryCode, smsMatcher.group(2));
            } catch(System.InvalidParameterValueException e) {
                return null;
            }
        } else {
            return null;
        }
    }
}

Experience Cloud サイトの設定で、

ログインページの種別を"Visualforce ページ"に変更し、
先程作成した Visualforce ページを選択します。

実現イメージ

ログインページ

以降、電話番号が入力されると SMS が送信され、メッセージ本文中の検証コードを入力することで、ログイン認証できるようになります。