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

学習の目的

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

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

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 を使用します。

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

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

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

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

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

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

1. [設定] の [クイック検索] ボックスに Digital Experiences (デジタルエクスペリエンス) と入力し、[デジタルエクスペリエンス] [設定] を選択します。
2. [デジタルエクスペリエンスを有効化] を選択します。
3. サイトのドメイン名を入力します。これは世界で一意である必要があるため、自分の名前や、その一部の文字を入れ替えたものなどを試してください。
4. [使用可能か調べる] をクリックして、完全に一意であることを確認します。
5. [保存] をクリックして、[OK] をクリックします。
6. ページを開く権限を付与するように促されたら、[開く] をクリックします。

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

サイトを作成する

サイトを作成します。

1. [デジタルエクスペリエンス] ページで、[新規] をクリックします。
   
   メモ: [デジタルエクスペリエンス] ページを閉じた場合は、[クイック検索] ボックスに All Sites (すべてのサイト) と入力し、[すべてのサイト] を選択します。
2. サイト作成ウィザードのテンプレートタイルから [カスタマーサービス] テンプレートを選択します。
3. [使用を開始する] をクリックします。
4. サイト名に NTO Customers (NTO 顧客) と入力します。
5. URL については、末尾に ntocustomers と入力します。この例の場合、URL サフィックスは省略できません。URL に ntocustomers というサフィックスを追加して、このサイトの URL を一意にすることが重要です。また、Challenge に合格できるように必ず小文字にしてください。 
6. [作成] をクリックします。これでサイトが作成され、[プレビュー] 状況になります。サイトの指令本部であるエクスペリエンスワークスペースが表示されます。
7. [管理] をクリックして、サイトを管理するワークスペースに移動します。
8. External Identity ライセンスを持つユーザーのプロファイルをコピーして作成した [NTO Customer (NTO 顧客)] プロファイルを割り当てます。
   1. [メンバー] をクリックし、[検索] で [顧客] を選択します。
   2. [NTO Customer (NTO 顧客)] を [選択済みプロファイル] に追加して、[保存] をクリックします。このサイトにサインアップした新しいメンバーには [NTO Customer (NTO 顧客)] プロファイルが割り当てられます。このプロファイルは、サイトメンバーのアクセス権を定義します。
9. [保存] をクリックします。
10. サイトを有効にします。
    1. [管理] ワークスペースで [設定] をクリックします。
    2. [有効化] をクリックし、[OK] をクリックします。
11. サイトを公開します。
    1. 左上の [管理] を選択し、ドロップダウンリストから [ビルダー] を選択します。
    2. 右上の [公開] をクリックして、確認ダイアログで再度 [公開] をクリックし、[了解] をクリックします。
12. [管理] ワークスペースに戻って作業を始めます。
    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. 右クリックして [別名で保存] を選択し、ファイルを保存するフォルダーを選択します。
   3. [ログイン & 登録] ページの [ロゴファイル] で [ファイルを選択] をクリックします。ファイルシステムに保存した logo-nto.png を見つけます。
   4. ページ下部までスクロールし、[保存] をクリックします。[ロゴファイル] に Northern Trail Outfitters のロゴが表示されています。いいロゴですね。
2. 背景画像をログインページに適用するには、画像の URL を指定します。手元にホストされている画像がなければ、背景の新しい色を選択するだけにします。
   1. [背景タイプ] で、ドロップダウンから [画像 URL] を選択します。
   2. [背景画像の URL] には、画像を参照する URL を入力します。背景にはアウトドア用品のストアらしく緑の山と青い空の画像を使用します。
3. [ログインボタン] の色を会社のテーマに合わせて変更します。この色はすべてのログイン関係ページ (ログイン、サインアップ、検証、パスワードリセットなど) のボタンに適用されます。
4. フッターテキストを「Northern Trail Outfitters」または独自のテキストに変更します。
5. [保存] をクリックします。

ログイン検出を設定する

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

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

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

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

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

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

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

次のステップ

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

リソース

• Trailhead: 顧客の ID
• Salesforce ヘルプ: Experience Cloud サイトでのログイン、セルフ登録、およびパスワード管理のカスタマイズ
• Salesforce ヘルプ: ログインページのカスタマイズ
• 動画: Salesforce Identity Services: A Mobile-First World Requires Mobile-First Login (Salesforce Identity サービス: モバイルファーストな世界にはモバイルファーストなログインが必要)