Skip to main content

モバイルファーストログインとサインアップを設定する

学習の目的

このモジュールを完了すると、次のことができるようになります。

  • パスワードなしのログイン用のログインページを作成する。
  • サインアップ時にユーザーから情報を収集する設定可能なセルフ登録ページを作成する。
  • 顧客を作成してログインとサインアップのプロセスをテストする。
メモ

メモ

日本語で受講されている方へ
Challenge は日本語の Trailhead Playground で開始し、かっこ内の翻訳を参照しながら進めていってください。Challenge での評価は英語データを対象に行われるため、英語の値のみをコピーして貼り付けるようにしてください。日本語の組織で Challenge が不合格だった場合は、(1) この手順に従って [Locale (地域)] を [United States (米国)] に切り替え、(2) [Language (言語)] を [English (英語)] に切り替えてから、(3) [Check Challenge (Challenge を確認)] ボタンをクリックしてみることをお勧めします。

翻訳版 Trailhead を活用する方法の詳細は、自分の言語の Trailhead バッジを参照してください。

Experience Cloud サイトを簡単に作成する

Northern Trail Outfitters (NTO) は Salesforce Experience Cloud を使用してカスタマーサービスサイトを作成し、お客様のログインエクスペリエンスを管理しています。最近、NTO のますます多くの顧客がモバイルデバイスでビジネスを行うようになっています。顧客はどこにいてもすぐに NTO のカスタマーサービスサイトにアクセスできることを求めています。

カスタマーサービスマネージャーの Joel Pierce は新しい Salesforce モバイルファースト ID 機能を試して、本当に設定が簡単かどうかを確かめてみたいと考えています。そこで、1 時間ほど試してみることにしました。

以前に学習したとおり、このモバイルファーストログインエクスペリエンスはすべてのユーザーライセンスで使用可能です。Salesforce のデフォルトのログインページはサイトの作成に使用するすべてのテンプレートに含まれています。

新しいモバイルファースト ID 機能を試すために、Joel はまず新しい Trailhead Playground でテストサイトを作成します。彼は下記のシンプルな設定手順を使用します。Joel は久しぶりにカスタマーサービスサイトを作成するため、「顧客の Salesforce ID」モジュールで復習することにします。

mobile ファースト ID を試す準備をする

ではここで新しい Trailhead Playground を作成し、このモジュールの手順を実行してみましょう。このページの最下部までスクロールし、[起動] の横にある下矢印をクリックして [Trailhead Playground を作成] を選択します。Trailhead Playground を作成するには、通常 3、4 分かかります。また、ハンズオン Challenge を実行するときにも Playground を使用します。

メモ

文字どおり真新しい Trailhead Playground です。既存の組織または Playground を使用すると、Challenge を行うときに問題が発生することがあります。

ハンズオン Challenge を実行する前に、必ずこの単元のステップを完了してください。Challenge はここで実行する作業に基づいて行います。

プロファイルとロールを使用してアクセス権を設定する

サイトを作成する前に重要な点は、誰が何にアクセスできるか定義することです。プロファイルとロールを使用すれば、お客様がどのデータにアクセスできるかを簡単に管理できます。また、お客様がサインアップしたときにその情報を保存する取引先も設定します。

  1. External Identity ライセンスを持つユーザー用のプロファイルを作成します。プロファイルによって、顧客が組織内で何にアクセスできるかを制御できます。
    1. [Setup (設定)] から、[Quick Find (クイック検索)] ボックスに Profiles (プロファイル) と入力し、[Profiles (プロファイル)] を選択します。
    2. [外部 ID ユーザー] の横にある [コピー] をクリックします。
    3. プロファイルに「NTO Customer」(NTO 顧客) という名前を付けて、[Save (保存)] をクリックします。
  1. サイト管理者用のロールを作成します。ユーザーがデータをどのように共有するかを管理するために、サイトにロール階層が必要です。
    1. [Setup (設定)] の [Quick Find (クイック検索)] ボックスに Role (ロール) と入力し、[Roles (ロール)] を選択します。
    2. ドロップダウンリストから [商品別ロール階層サンプル] を選択し、[ロールの設定] を選択します。
    3. CEO で [ロールの追加] をクリックします。
    4. ロールの表示ラベルに NTO Customer Manager (NTO 顧客マネージャー) と入力し、Tab キーを押すと [Role Name (ロール名)] が自動的に入力されます。
    5. [Save (保存)] をクリックします。
  1. [Customer Manager (顧客マネージャー)] ロールを Salesforce システム管理者に割り当てます。
    1. [Setup (設定)] の [Quick Find (クイック検索)] ボックスに Users (ユーザー) と入力し、[Users (ユーザー)] を選択します。
    2. ユーザー名の横にある [編集] をクリックします。
    3. [ロール] で [NTO Customer Manager (NTO 顧客マネージャー)] を選択し、[Save (保存)] をクリックします。
  1. お客様の取引先を作成します。
    1. アプリケーションランチャー (アプリケーションランチャーアイコン) で、[取引先] を見つけて選択します。
    2. [取引先] で [新規] をクリックします。
    3. 取引先に「NTO Customers」 (NTO 顧客) という名前を付け、[Save (保存)] をクリックします。

デジタルエクスペリエンスを有効にする

新しい組織をゼロから作成したため、まずデジタルエクスペリエンスを有効にして、サイトを作成できるようにします。

  1. [Setup (設定)] の [Quick Find (クイック検索)] ボックスに「Digital Experiences (デジタルエクスペリエンス)」と入力し、[Digital Experiences (デジタルエクスペリエンス)] | [Settings (設定)] を選択します。
  2. [デジタルエクスペリエンスを有効化] を選択します。この演習では、ドメイン名は自動的に生成されます。本番組織でドメインを作成するときには、一意の名前を入力し、[Check Availability (使用可能か調べる)] をクリックします。
  3. [Save (保存)] をクリックして、[OK] をクリックします。
  4. ページを開く権限を付与するように促されたら、[開く] をクリックします。

[デジタルエクスペリエンス] ページにリダイレクトされ、そこでサイトを作成できます。次のステップのためにページを開いたままにします。

サイトを作成する

サイトを作成します。

  1. [Digital Experiences (デジタルエクスペリエンス)] ページで、[New (新規)] をクリックします。

    メモ: [Digital Experiences (デジタルエクスペリエンス)] ページを閉じた場合は、[Quick Find (クイック検索)] ボックスに All Sites (すべてのサイト) と入力し、[All Sites (すべてのサイト)] を選択します。
  2. サイト作成ウィザードのテンプレートタイルから [カスタマーサービス] テンプレートを選択します。
  3. [使用を開始する] をクリックします。
  4. サイト名に NTO Customers (NTO 顧客) と入力します。
  5. URL については、末尾に ntocustomers と入力します。この例の場合、URL サフィックスは省略できません。URL に ntocustomers というサフィックスを追加して、このサイトの URL を一意にすることが重要です。また、Challenge に合格できるように必ず小文字にしてください。 コミュニティの名前「NTO Customers (NTO 顧客)」と URL
  6. [作成] をクリックします。これでサイトが作成され、[プレビュー] 状況になります。サイトの司令本部であるエクスペリエンスワークスペースが表示されます。
  7. [管理] をクリックして、サイトを管理するワークスペースに移動します。
  8. External Identity ライセンスを持つユーザーのプロファイルをコピーして作成した [NTO Customer (NTO 顧客)] プロファイルを割り当てます。
    1. [メンバー] をクリックし、[検索] で [顧客] を選択します。
    2. [NTO Customer (NTO 顧客)] を [選択済みプロファイル] に追加して、[Save (保存)] をクリックします。このサイトにサインアップした新しいメンバーには [NTO Customer (NTO 顧客)] プロファイルが割り当てられます。このプロファイルは、サイトメンバーのアクセス権を定義します。
  1. [保存] をクリックします。メンバーにプロファイルを割り当てるスクリーンショット
  2. サイトを有効にします。
    1. [管理] ワークスペースで [設定] をクリックします。
    2. [有効化] をクリックし、[OK] をクリックします。
  1. サイトを公開します。
    1. 左上の [管理] を選択し、ドロップダウンリストから [ビルダー] を選択します。
    2. 右上の [公開] をクリックして、確認ダイアログで再度 [公開] をクリックし、[了解] をクリックします。
  1. [管理] ワークスペースに戻って作業を始めます。
    1. 左上の をクリックして、ドロップダウンリストから [管理] を選択します。
    2. [ログイン & 登録] を選択します。

ログインに関するあらゆる作業を行うページが表示されます。

[ログイン & 登録] ページのスクリーンショット

他の Experience Cloud 機能を追加することもできますが、これで基本設定は完了しました。ログインページを最新のモバイルファースト ID 対応にする準備が整いました。

サイトのブランドを設定する

[ログイン & 登録] ページでは、ログインエクスペリエンスに関係するすべてのページのブランドを設定できます。このブランド設定は、ユーザーがサインアップ、ログイン、ID 検証、パスワードリセットなどを行うページに適用されます。

[ログイン & 登録] のブランド設定オプションのスクリーンショット

  1. ロゴにはファイルをアップロードするか URL を入力して独自のロゴを指定できます。ここでは、用意されたものを使用しましょう。NTO ロゴを使用する場合は、次の GitHub リポジトリからダウンロードします。
    https://github.com/salesforceidentity/Mobile-first/blob/master/logo-nto.png
    1. 上の Github リンクをクリックし、[Download (ダウンロード)] をクリックします。
    2. [ログイン & 登録] ページの [ロゴファイル] で [ファイルを選択] をクリックします。ファイルシステムのダウンロードフォルダーに保存されている logo-nto.png を見つけます。
    3. ページ下部までスクロールし、[Save (保存)] をクリックします。[ロゴファイル] に Northern Trail Outfitters のロゴが表示されています。いいロゴですね。
  1. 背景画像をログインページに適用するには、画像の URL を指定します。手元にホストされている画像がない場合は、[Background Type (背景タイプ)] を [Color (色)] に設定したままにし、背景の新しい色を選択します。
    1. 背景の画像を選択するには、[Background Type (背景タイプ)] でドロップダウンから [Image URL (画像 URL)] を選択します。
    2. [背景画像の URL] には、画像を参照する URL を入力します。背景にはアウトドア用品のストアらしく緑の山と青い空の画像を使用します。
  1. [ログインボタン] の色を会社のテーマに合わせて変更します。この色はすべてのログイン関係ページ (ログイン、サインアップ、検証、パスワードリセットなど) のボタンに適用されます。
  2. フッターテキストを「Northern Trail Outfitters」または独自のテキストに変更します。
  3. [Save (保存)] をクリックします。

ログイン検出を設定する

ここからが楽しいところです。サイトを設定し、さらにブランド設定します。まずはモバイルファーストログインを設定しましょう。単元 1 で説明したように、ログイン検出を使用するとユーザーはユーザー名以外のもの (電話番号など) を使用してログインすることができます。[ログイン & 登録] ページでログイン検出を設定すると、ユーザーは自動的に検証済みメールアドレスまたは電話番号を使用してログインできるようになります。

[ログイン & 登録] ページの [ログインページ設定] オプションのスクリーンショット

  1. [ログイン & 登録] ページで、[ログインページ設定] を見つけます。 
  2. [ログインページ種別] に [ログイン検出ページ] を選択します。
  3. [ログイン画面] に「Email」 (メール) または「Phone」 (電話) と入力します。
  4. [ログイン検出ハンドラーを作成] をクリックします。
  5. [Execute Login As (他のアカウントでログインを実行)] で、虫眼鏡アイコン をクリックして自分の名前を選択します。(本番環境では、通常、システム管理者がこの項目用にシステムユーザーを作成します。こうすることで、ハンドラーによって実行される操作を容易にログインプロセスまでたどることができます。)
  6. [従業員が Experience Cloud サイトに直接ログインすることを許可] を選択します。
  7. [Save (保存)] をクリックします。このページを保存した後に、デフォルトのログイン検出ハンドラーが生成されます。ログイン検出ハンドラーはログイン検出ロジックを実装する Apex クラスを参照します。ハンドラーとそのカスタマイズ方法については、次の単元で学習します。
  8. [ログイン検出] ページ種別を使用したログインページがどのように表示されるのか見てみましょう。
    1. [管理] で [設定] をクリックします。
    2. URL を右クリックして [シークレットウィンドウでリンクを開く] (Chrome の場合) または [リンクを新規ウィンドウで開く] (Firefox または Safari の場合) を選択します。[設定] ページの NTO Customers (NTO 顧客) への URL のスクリーンショット

ログインページの中央に [電話またはメール] プロンプトと [ログイン] ボタンが表示されます。この例では、背景にアウトドアらしい画像 URL が使用されています。

サイトのサインアップページを設定する

サイトメンバー向けのログインページができました。次はメンバーを獲得しましょう。サイトのサインアップページを設定すると、ユーザーがサイトに自分でサインアップできるようになります。

  1. [Login & Registration (ログイン & 登録)] ページの一番下のほうにある [Registration Page Configuration (登録ページ設定)] で [Allow customers and partners to self-register (顧客とパートナーにセルフ登録を許可)] を選択します。
  2. [登録ページ種別] で [設定可能なセルフ登録ページ] を選択します。
  3. 顧客がサインアップ時に入力するユーザー項目を選択します。この演習ではシンプルにするために、[First Name (名)] と [Email (メール)] を選択します。
  4. [設定可能なセルフ登録ハンドラーを作成] をクリックします。
  5. [他のアカウントで登録を実行] で自分を選択します。上記のログイン検出ハンドラーと同じように、[他のアカウントで登録を実行] によって、設定可能なセルフ登録ハンドラーが実行されるコンテキストが決まります。
  6. [確認方法] で [メール] を選択します。確認方法にメールを選択すると、受信箱へのメールメッセージで確認コードが送信されます。[テキストメッセージ] を選択すると、携帯電話へのテキストメッセージで確認コードが送信されます。[なし] を選択すると、ユーザーはログインするためにパスワードを入力する必要があります。
  7. [パスワードを含める] はオフのままにします。サインアッププロセスをシンプルなものにするため、ここではパスワードを収集しません。[パスワードを含める] をオンにすると、セルフ登録フォームに [パスワード] 項目と [確認用パスワード] 項目が含まれます。サインアップ時にパスワードを尋ねるメリットは、ユーザーがいつでもログインできる方法を確保できることです。これは、携帯電話が見つからない場合やメールにアクセスできない場合などに役立ちます。
  8. [プロファイル] で、[NTO Customer (NTO 顧客)] を選択します。[ログイン & 登録] ページの [設定可能なセルフ登録ページ] 種別のスクリーンショット
  9. [取引先] で、[NTO Customers (NTO 顧客)] を選択します。登録ページの設定は上のようになります。確認方法が [メール] になっていることに注目してください。
  10. [Save (保存)] をクリックします。このページを保存すると、サインアップページを作成するハンドラーが作成されます。
  11. [設定可能なセルフ登録ページ] 種別を設定したことで、ログインページがどのように表示されるかを見てみましょう。[ログイン] ページが含まれているシークレットモードのウィンドウを更新します。

サインアップリンクは次のようになります。背景のようなアウトドアっぽいモチーフは設定されていませんが、要領はわかりますね。

テスト: 新しい顧客としてサインアップし、ログインする

これで新しい顧客が Joel のサイトにサインアップできるようになりました。新しいユーザーが実際にサインアップしてログインできるかどうかをテストするために、Joel はログインページから新しい顧客を作成できます。

  1. [ログイン] ページが含まれている非公開 (シークレットモード) ウィンドウに戻ります。ウィンドウを閉じた場合は、[管理] で [設定] を選択し、サイトへのパスを右クリックします。
  2. Joel は [サインアップ] をクリックし、Samantha という名前のテスト用のお客様を作成します。Joel は、確認メールを受信してサインアッププロセスをテストしたいと考えているため、アクセス可能なメールアドレスを使用する必要があります。ただし、サイトの管理者アカウントに関連付けられているメールアドレスは使いたくありません。そこで、別のメールアドレスを入力します。
    Samantha のサインアップのスクリーンショット
  3. Salesforce に [検証] ページが表示され、メールアドレスに確認コードが送信されます。
  4. Joel は受信箱で確認コードが記載されたメールをチェックし、[検証] ページにそのコードを入力します。
    [検証] ページの確認コードのスクリーンショット

そうすると次のようになります。サイトのホームページにアクセスできました。誰がログインしているのか確認するために、右側のプロファイルアイコンをクリックして、[私のプロファイル] を選択します。

 

自身が Samantha という名前の新しいお客様としてログインしていることがわかります。 

ところが、Samantha の姓が ExternalUser1550768707871 のようなものになっています。なぜでしょうか? Salesforce ではユーザーを作成するには姓が必須です。Samantha がサインアップ時に姓を入力しなかったため、一時的な姓が割り当てられています。その後のログイン時に、NTO は姓やその他のプロファイル情報を尋ねることができます。そうすることで、NTO は Samantha が NTO の得意客になっていくにつれてプロファイルを充実させていくことができます。ID のエキスパートは、このようなメンバープロファイルの構築方法をログインフローによるプログレッシブプロファイリングということがあります。

メモ

注意する点があります。ユーザーをもう 1 人作成しようとすると、「エラーメッセージ: 取引先責任者にはポータルユーザーがすでに存在します。」といったエラーが表示されます。安心してください。後でこの理由を説明します。

新しいサイトの顧客としてログインし、顧客を表示する

簡単には信用しない性格の Joel は、Samantha はサインアップ後にもサイトにログインできるのだろうかと考えます。アカウントを作成したときにパスワードを入力しなかったのに、どうやってログインするのでしょうか? Joel はそれを確かめます。新しい非公開 (シークレット) ブラウザーを使用してテストします。

  1. NTO サイトに Samantha としてログインします。
    1. Joel が新しい非公開 (シークレット) ブラウザーウィンドウを開きます。
    2. NTO のログインページで Samantha をサインアップするときに使用したメールアドレスを入力して、Samantha としてログインします。
    3. メールで新しい確認コードを確認し、[検証] ページに入力します。
  1. Samantha として Northern Trail Outfitters ホームページに戻ってきました。
  2. NTO Customers (NTO 顧客) 取引先で Samantha が取引先責任者として表示されることを確認します。Joel は Salesforce 組織に戻ります。Samantha が NTO Customers (NTO 顧客) 取引先の取引先責任者になっているかを確認するためです。以前に NTO Customers (NTO 顧客) 取引先を作成したのを覚えていますか? この取引先には、サインアップしたすべての顧客が表示されます。
    1. アプリケーションランチャー (アプリケーションランチャーアイコン) で、[取引先] を見つけて選択します。
    2. 取引先のリストから [NTO Customers (NTO 顧客)] を選択します。
  1. 成功です。NTO Customers (NTO 顧客) 取引先の取引先責任者として Samantha が表示されています。

他の顧客をサインアップする

Joel は組織に他の顧客も作成したいと考えています。Playground 組織にはいくつかの External Identity ライセンスとコミュニティライセンスが含まれているため、そうすることは可能です。ただし、同じメールアドレスで複数の顧客を作成することはできません。すべての顧客が一意である必要があるため、他の顧客を追加するには他のメールアドレスが必要です。

顧客に一意のメールアドレスが設定されているかどうかは、[設定] の [ユーザー] ページで簡単に確認できます。ユーザーのメールアドレスのリストを表示するには、まずユーザーリストビューを作成します。手順については後の単元で説明します。2 人のユーザーに同じメールアドレスがある場合、ユーザーの [有効] チェックボックスをオフにすることで 1 人を無効化できます。

[設定] の [ユーザー] ページの有効なユーザー

または、ユーザーを無効にする代わりに、取引先責任者からその顧客を無効にすることもできます。

取引先責任者からの顧客ユーザーの無効化

次のステップ

ここではデフォルトのログインページとサインアップページを作成しました。次は、ログインプロセスをカスタマイズする方法を見ていきましょう。

リソース

Salesforce ヘルプで Trailhead のフィードバックを共有してください。

Trailhead についての感想をお聞かせください。[Salesforce ヘルプ] サイトから新しいフィードバックフォームにいつでもアクセスできるようになりました。

詳細はこちら フィードバックの共有に進む