Facebook Login Setup
You can setup Facebook social login on your websites. This will enable your users sign in with their Social login accounts without having to remembers email addresses and passwords.
Create and set up a Facebook App
-
Create an account (you may have to register as a developer).
-
Make sure you are logged in.
-
Click on the "My Apps" dropdown in the top right corner of the header, next to your profile picture.
-
Click "+ Add a New App". A popup should appear.
-
Type your app Display Name. For example: "My Great Store".
-
Enter the contact email of your choice.
-
Click "Create App ID". You may have to answer a security check.
-
Don't select a Product or Recommended Product but instead...
-
... In the left hand menu, click "Settings" then "Basic".
-
In "App Domains", add the domain name from which you want the Facebook login to work, i.e. your website domain name. If you are moving between a StoreMantis subdomain and your custom domain, it's best to add both here to ensure that the Facebook login keeps working even when the domain changes. Add the domains without "https" or "www" or "subdomain":
- For your custom domain, the domain could be: "mygreatstore.com"
- For your StoreMantis subdomain the domain could be: "mygreatstore.storemantis.com" -
Click "Add Platform".
-
Select Website.
-
In "Site URL", add your full website's URL with https and possibly www or the subdomain:
- It could be: "https://www.mygreatstore.com",
"https://mygreatstore.com", or "https://something.mygreatstore.com". -
Click "Save Changes" at the bottom right.
If you can't save because the "App Domains" part complains about "This must be derived from Secure Canvas URL, Unity Binary URL, Site URL, Mobile Site URL or Secure Page Tab URL. Check and correct the following domains: (missing-domain-here.com)", this is probably because you added two different domains while following the instructions above and only one is based on the current Site URL that you entered. The easiest way to overcome this limitation is to add a Secure Page Tab URL with following steps:
- Click "Add Platform"
- Select "Page tab"
- In "Secure Page Tab URL" add the missing domain (mentioned in the earlier error message) with https, e.g. "https://missing-domain-here.com"
- Click "Save Changes" -
You might also need to add your privacy policy URL (in some cases this is not needed). If so please add it by creating an Information page on StoreMantis (CatalogInformation) and then pasting the full url to that page here. You can get the full url from your main website.
-
Save changes if needed.
-
In the left hand menu, click "+ Add Product".
-
In the list, find "Facebook Login" and click "Set Up" for it.
-
Select "Web" (www) in the list of options.
-
Verify that your "Site URL" is correct and click "Save" then "Continue".
-
In the left hand menu, click "Facebook Login" then "Settings".
-
Check that the following settings are correct:
- Client OAuth Login: Yes
- Web OAuth Login: Yes
- Force Web OAuth Reauthentication: No
- Use Strict Mode for Redirect URIs: Yes
- Enforce HTTPS: No (if set to 'yes' without possibility to edit leave it as 'yes')
- Embedded Browser OAuth Login: Yes
- Login from devices: No -
In the "Valid OAuth redirect URIs" field add your store address followed by
/store/account/social?network=Facebook
:
- It could be: "https://www.mygreatstore.com/store/account/social?network=Facebook" or "https://something.mygreatstore.com/store/account/social?network=Facebook" -
Check that the section "Deauthorize / Deauthorize Callback URL" is empty.
-
Click "Save Changes".
-
From the top bar, turn the top switch from "OFF" to "ON" to make your app live.
-
Confirm the choice when asked. You may have to select a category and/or answer a security check. Your app doesn't require an approval from Facebook so you don't have to go through the submission process.
-
In the left hand menu, click "Dashboard". Your app should be public ("This app is public and available to all users") and a green dot should be displayed.
Your app is now created, configured and live. But this isn't
finished yet!
You now have to configure it in your store
to use it.
Configure your Facebook App in your store
You'll have to copy some information about your app from Facebook to use it within your store. If you haven't created an app at Facebook yet, please follow the instructions above.
-
Go to https://developers.facebook.com/ and log in.
-
Open the app you created via the "Apps" dropdown.
-
In the left hand menu, click "Settings" then "Basic".
-
Copy the value in "App ID". It's a long chain of characters (numbers and sometimes letters too).
-
Log in to your store dashboard on StoreMantis.
-
Go to Extensions/Apps-Social Login Setup
-
In the Configuration Tab, change Facebook Login to Enabled.
-
In "Facebook App ID", paste the value "App ID" you copied earlier.
-
Go back to your app at Facebook, in the "Settings" then "Basic section.
-
Click the "Show" button in the "App Secret" field. You may have to answer a security check.
-
Copy the value in "App Secret". It's a long string of letters and numbers.
-
Go back to the "Social meda" settings in your store.
-
Paste the copied "App Secret" string into the "Facebook App Secret" field.
-
Click "Save settings".
That's it! Facebook Login is now active and set! Users will
now see your Facebook App's details when they create an account or
log in to your store using their Facebook credentials.
You
now should take a few more moments to customize your app at
Facebook.
Customize your Facebook App
When users create an account or log in with Facebook Login for the first time, they will be asked to authorize your app. At this point, they will see your Facebook App's logo. You should customize it to match your store. Doing this helps users trust your app.
-
Go to https://developers.facebook.com/ and log in.
-
Open the app that you created via the "Apps" dropdown.
-
In the left hand menu, click "Settings" then "Basic".
-
Upload your App icon in the correct section according to Facebook's instructions.
-
Click "Save Changes" at the bottom right.