Suivez votre progression
Accueil Trailhead
Accueil Trailhead

Set Up Mobile-First Login and Sign-Up

Learning Objectives

After completing this module, you’ll be able to:
  • Create a login page for passwordless login.
  • Create a configurable self-reg page to collect information from users on sign-up.
  • Test the login and sign-up process by creating a customer.

A Community in a Flash

Northern Trail Outfitters (NTO) has created a customer service site and manages its customers’ login experience with Salesforce Communities. Recently, more of NTO’s customers are conducting business on their mobile devices. Customers want instant access to NTO’s customer service site wherever they are.

Customer service manager Joel Pierce wants to check out the new Salesforce mobile-first identity feature to see if it’s as easy to set up as Salesforce claims. He’s decided to take an hour or so to check it out.

As you learned in Unit 1, this mobile-first login experience is available to all external user licenses. Salesforce default login pages come with any template you use to create a community.

To try out the new mobile-first identity features, Joel starts with building out a test community in a new Trailhead playground. He uses these no-frills setup steps below. Because it’s been a while since he created his customer service site, he can always go to the Salesforce Identity for Customers Trailhead module for a refresher.

Ready to Get Hands-on with Mobile-First Identity?

Create a new Trailhead Playground now to follow along and try out the steps in this module. Scroll to the bottom of this page, click the down arrow next to Launch, and select Create a Trailhead Playground. It typically takes 3–4 minutes for Salesforce to create your Trailhead Playground. You also use the playground when it's time to complete the hands-on challenge.

Note

Note

Yes, we really mean a brand-new Trailhead playground! If you use an existing org or playground, you can run into problems completing the challenges.

Be sure to complete the steps in this unit before you try hands-on challenge. The challenge builds on the work you do in the steps.

Create a Community

From the org created with Trailhead playground, you can create a community of users with any external license. We create a community for users with the External Identity User license.

  1. Create a profile for External Identity users.

    A profile lets you control what your customers can access in your org.

    1. From Setup, enter Profiles in the Quick Find box, then select Profiles.
    2. Next to External Identity User, click Clone, name the profile NTO Customer, and then click Save.
  2. Create a role for the community admin.

    The Salesforce admin who manages the community must be assigned a role.

    1. From Setup, enter Role in the Quick Find box, then select Roles.
    2. From the dropdown list, select Product-based Sample, then select Set Up Roles.
    3. Under CEO, click Add Role.
    4. For the role label, enter NTO Customer Manager and tab to autofill the Role Name.
    5. Click Save.
  3. Assign the Customer Manager role to a Salesforce admin.
    1. From Setup, enter Users in the Quick Find box, then select Users.
    2. Next to your username, click Edit.
    3. For Role, select NTO Customer Manager, and then click Save.
  4. Create an account to contain our customers when they sign up.
    1. Form the App Launcher (App Launcher icon), find and select Accounts.
    2. From Accounts, click New.
    3. Name the account NTO Customers, and click Save.

Enable Communities

It’s a fresh org, so we first turn on the Communities feature.

  1. From Setup, enter Communities in the Quick Find box, then select Communities Settings.
  2. Select Enable communities.
  3. Enter a unique name for your community domain. It has to be unique across the universe, so try your own name, or some jumbled version of it.
  4. Click Check Availability to make sure that it's truly unique.
  5. Click Save, then OK.

Set Up a New Community

Spin up a community.

  1. From Setup, enter All Communities in the Quick Find box, and select All Communities.
  2. Click New Community.
  3. From the Community Creation wizard tiles of templates, select the Customer Service template.
  4. Click Get Started.
  5. Name the community NTO Customers and, for the URL, enter ntocustomers at the end.

    Ignore Optional! It’s important to add this suffix, ntocustomers, to ensure that your community has a unique URL. Also, make sure it’s in lowercase.

    Name community NTO Customers and URL
  6. Click Create. Our community has been created in Preview status.

    The wizard lands us at community command central—Experience Workspaces.

  7. Click Administration to go the workspace for managing the community.
  8. Assign the NTO Customer profile that you created by cloning the External Identity profile. Click Members, then for Search, select Customer. Then add NTO Customer to Selected Profiles, and then click Save.

    When new members sign up for this community, they’re assigned the NTO customer profile. This profile defines what community members can access.

    Assign profiles to members screenshot
  9. Activate the community.
    1. From the Administration workspace, click Settings.
    2. Click Activate Community, then click OK.
  10. Publish the community.
    1. At the top left, select Administration, and then select Builder from the dropdown list.
    2. At the top right, click Publish, and in the confirmation dialogue, click Publish again, and then Got It.
  11. Now return to the Administration workspace to get to work.
    1. At the top left, select Administration from the dropdown list.
    2. Select Login & Registration.

We're now at the page where all login-related activity happens.

Login & Registration page screenshot

We can go on and add other Communities features, but we’ve got the basics covered for now. We’re ready to bring our login pages to the modern, mobile-first-identity era.

Brand the Community

From the Login & Registration page, you can brand all pages related to the login experience. That is, the branding applies to pages where users sign up, log in, verify their identity, reset passwords, and more.

Login & Registration branding options screenshot
  1. For a logo, you can supply your own logo by uploading a file or entering a URL. But let’s use ours.
    To use our NTO logo, download it from our Github repo, https://github.com/salesforceidentity/Mobile-first/blob/master/logo-nto.png.
    1. Click the Github link above, then click Download.
      The logo shows up in a new tab.
    2. Right-click Save As and choose the folder in which to save the file.
    3. From the Login & Registration page, under Logo File, click Choose. Then locate logo-nto.png on your file system.
    4. Scroll to the bottom of the page, and click Save.
      For Logo File, you should now see the logo for Northern Trail Outfitters. Cool logo, right?
  2. To check out how a background image enlivens your login pages, you can supply a URL to an image. But if you don’t have a hosted image handy, simply choose a new color for the background.
    1. For Background Type, select Image URL from the dropdown.
    2. For Background Image URL, enter a URL to an image.
      Our background is what you might expect for an outdoor equipment store—green mountains and blue skies.
  3. Change the color of the Login Button to match your corporate theme.
    This color applies to buttons on all login-related pages, including Log In, Sign Up, Verify, and Reset Password.
  4. Update the footer text with Northern Trail Outfitters or your own.
  5. Click Save.

Set Up Login Discovery

Let the fun begin. You set up your community and branded it. Now let’s set up mobile-first login. As mentioned in Unit 1, Login Discovery gives users the option to log in with something other than their username—like their phone number. When you set up Login Discovery from the Login & Registration page, users can automatically log in with their verified email address or phone number.

Login page setup options on Login & Registration page screenshot
  1. From your Login & Registration page, for Login Page Type, select Login Discovery Page.
  2. For Login Prompt, enter Email or Phone.
  3. Click Create a Login Discovery Handler. After you save this page (but wait—don't save it yet!), Salesforce generates a default login discovery handler.

    The Login Discovery Handler points to an Apex class that implements the Login Discovery logic. You can learn more about the handler and how to customize it in the next unit.

  4. For Execute Login As, select yourself. Click Magnifying glass icon and select your name.

    The Execute Login As field is required and it provides the context in which the Login Discovery handler runs. (In production, admins typically create a system user for this field. This way operations performed by the handler can be easily traced back to the login process.)

  5. Select Allow internal users to log in directly to the community.
  6. Click Save.
  7. Let’s see what your login page looks like with Login Discovery page type.
    1. From Administration, click Settings.
    2. Right-click the URL and select Open Link in Incognito Window (in Chrome) or Open Link in New Private Window (in Firefox or Safari).

      URL to NTO Customers on Settings page screenshot

The center of your login page shows Email or Phone for the prompt, and Log In for the button. Our background uses our outdoorsy image URL.

Login Page using Login Discovery page type screenshot

Set Up Your Community’s Sign-Up Page

You have a login page for your community members. Now let’s get some members. Users can sign up for the community themselves—after you set up your community’s sign-up page.

  1. From the Login & Registration page, way down at the bottom of the page, select Allow external users to self-register.
  2. For Registration Page Type, choose Configurable Self-Reg Page.
  3. Choose which user fields you want customers to supply when they sign up. We want to keep it simple, so we select First Name, and Email.
  4. Click Create a configurable self-reg handler.

    Wait! Wait! After you save this page, Salesforce creates a handler that builds your sign-up page. But we have a few more fields to deal with first.

  5. For Execute Registration As, select yourself.

    Just like the Login Discovery Handler above, Execute Registration As provides the context in which the Configurable Self-Reg handler runs.

  6. For Verification Method, select Email.

    By choosing Email for the verification method, Salesforce sends a verification code in an email message to your Inbox. If you choose Text Message, Salesforce sends a verification code in a text message to your mobile phone. If you choose None, users must enter a password to log in.

  7. Keep Include Password unselected.

    For a simpler sign-up process, we won't collect a password at this time. But if you select Include Password, the self-registration form contains Password and Confirm Password fields. An advantage to asking for the password at sign-up is to make sure that users always have a way to log in. It’s helpful for those users who can’t find their phone.

  8. For Profile, choose NTO Customer.
  9. For Account, choose NTO Customers.

    Your registration page configuration should look like this. Notice that the verification method is Email.

    Configurable Self-Reg page type on Login & Registration page screenshot
  10. Click Save.
  11. Let’s see what your login page looks like now that we’ve set up the Configurable Self-Reg Page type. Refresh the incognito window containing the Log In page.

Your sign-up page looks something like this. Well, it doesn’t have the outdoorsy motif of our background. But you get the idea.

Login page with Sign Up link screenshot

Test It Out: Sign Up and Then Log In a New Customer

Now new customers can sign up for Joel’s community. To test whether a new user can actually sign up and log in, Joel can create a new customer from the login page.

  1. Return to the private (incognito) window containing the Log In page.
    If you closed the window, from Administration, select Settings, and right-click the path to the community.
  2. Joel clicks Sign Up and creates a new customer, Samantha, but uses his own email address.

    Sign up Samantha screenshot

    Salesforce shows the Verify page and sends a verification code to Joel’s email address.

  3. “Samantha” checks the Inbox for an email with the verification code and then enters the code on the Verify page.

    Verification code on the Verify page screenshot

And here it is. Joel has arrived at his community home page. He looks for the profile on the right to see who’s logged in. Guess who? New customer, Samantha, is logged in to Northern Trail Outfitters.

NTO Home Page screenshot
Note

Note

A big word of caution! If you try to create another user, you get an error like, “The error message is: portal user already exists for contact.” Don’t fret. We explain why later on.

Log In and View Your New Community Customer

Given his skeptical nature, Joel wonders if Samantha can log in to the community after she signs up. How does she log in if she didn’t enter a password when she created her account? Joel checks it out.

  1. Joel makes sure that Samantha is logged in to the NTO community.
    1. Joel checks for Samantha’s name on the right. It’s not there, so Joel has to log out the current user.
    2. Joel clicks the profile picture, and selects Log Out.
  2. Log in to the NTO community as Samantha.
    1. Joel makes sure Samantha is still logged in At the NTO login page, Joel logs in Samantha by entering the email address he used when he signed her up.
    2. Joel checks his email for a new verification code, and enters it in the Verify page.

    Sure enough, Joel (as Samantha) has returned to the Northern Trail Outfitters home page.

  3. Check that Samantha is listed as a contact in the NTO Customers account.

    Joel goes back to his Salesforce org. He wants to see if Samantha is a customer in the NTO Customers account. Remember that we created the NTO Customers account earlier on? This account lists all the customers who signed up.

    1. From the App Launcher (App Launcher icon), find and select Accounts.
    2. From the list of accounts, choose NTO Customers.

    Success! Samantha is listed as a contact in the NTO Customers account.

Notice that Samantha’s last name looks something like ExternalUser1550768707871. Why? Salesforce requires a last name to create a user. Because Samantha didn’t supply one when she signed up, Salesforce assigns her a temporary one. On subsequent logins, NTO can ask for it, along with other profile information. That way, NTO builds Samantha’s profile as she continues to become a loyal NTO customer. Identity gurus might refer to this building of a member's profile as progressive profiling powered by login flow.

Sign Up More Customers

Joel wants to create more customers in his org. He can because his Playground org gives him a few External Identity and Communities licenses. But he can’t create customers with the same email address. Every customer must be unique, so he has to come up with other email addresses to add more customers.

Joel can easily check whether customers have unique email addresses from the Users page in Setup. To see a list of users’ email addresses, Joel first creates a user list view, according to instructions in a later unit. If it happens that two users have the same email address, he can deactivate one by deselecting the user’s Active check box.

Active users on the Users Setup page

Or, instead of deactivating a user, Joel can disable the customer from Contacts.

Disable customer user from Contacts

What’s Next?

You’ve created default login and sign-up pages. Next up, let’s see how we can customize the login process.