How to set-up social sign-in

You can enable customers to register for and sign-in to your Zapnito site using their Twitter, LinkedIn and Facebook credentials. Here's a guide to setting this up.

(Note that in order to enable social sign-in on your Zapnito community, you must ensure that both Open Registration and Open Access are switched on in your Registration Settings.)

This article contains the following sections:

• Twitter
• LinkedIn
• Facebook

Common Steps

For the processes described below, you will need to make sure that you have added the API key and API secret from each platform to the Registration Settings page on your Zapnito site. This can be found by clicking the cog in the top right-hand corner of the page and selecting Settings.

On this page, ensure that you add both the API key and secret to the fields provided. We advise that you do not enable social sign-in (using the toggle switches) until you have completed the configuration tasks outlined below, as this will cause the social sign-in buttons to appear on your sign-in and/or registration pages and will return an error if your users try to interact with them.

Twitter

To start, head to Twitter Developer. If you haven't already, you will need to submit a request via Twitter's application process in order to set-up a developer account. This is used by Twitter as a means to ensure that you are a legitimate Organisation in order for them to be able to authorize the account. 

Once you have registered your account, login to Twitter Developer using your corporate profile and navigate to the 'Developer Portal', where you will find the 'Apps' tab in the top right-hand corner of the page.

Next, click the Create an app button, where you will be prompted to fill out some basic details about the app you're setting up. If your developer account is still pending, you will need to wait until it has been approved by Twitter in order to create your app.

In your App details, complete all of the required fields, while also ensure that:

• You include an app icon (this should be your company logo)
• The website URL matches that of your Zapnito community
• Sign in with Twitter is enabled
• You have added a callback URL, which should match the following structure (replace the highlighted text with your community's domain):
  https://your-community.com/users/auth/twitter/callback
• You include your Organisation name and website URL (this may be your corporate site, e.g. https://zapnito.com)

Once this is completed, head to the Keys and tokens tab and copy both of the Consumer API keys. Paste these in the Twitter section of the Registration Settings page on your Zapnito community.

Finally, go to the Permissions tab and select Edit. Here you can adjust what type of access the app has to your Twitter account. We recommend that access permission is set to Read-only, which ensures that the app cannot Tweet on your behalf.

Under additional permissions, make sure you have selected Request email address from users. This is so that Zapnito can extract the user's email address in order to create an account for them in our database.

Once you have completed the set-up tasks, you can enable Twitter social sign-in from your Registration Settings which will present users with the option to sign-in or register via Twitter as illustrated below.

LinkedIn

Firstly, you will need to head to LinkedIn Developers and sign-in with your Organisation account. This can be a placeholder account that is utilised solely for the purpose of setting up the app. We recommend that the account you use to create the app is associated to a shared company email address, to ensure that ownership can be easily transferred between team members.

Once you have signed in with the relevant account, at the top of the page navigate to the 'My apps' tab and select Create app.

You will be presented with a form to set-up the app, where you should ensure that:

• The app name matches that of your Zapnito community (this is what is presented to users when they go through the login process)
• You select the correct LinkedIn Page to associate to your app. Once you have done this, you will need to request verification from an admin on your Organisation's page. Click here for more information on how to action this

• You include your Organisation's privacy policy URL

Once you have created your app, head to the Auth tab where you will find both of the authentication keys that you need to copy over to the LinkedIn section of the Registration Settings page on your Zapnito community.

You also need to set-up 'Authorized redirect URLs for your app' in the OAuth 2.0 settings box. This URL should match the following structure (replace the highlighted text with your community's domain): https://your-community.com/users/auth/linkedin/callback

Finally, under the Products tab, ensure that you have selected 'Sign In with LinkedIn' as this is what enables the app to function on your community. This is subject to a short review process and you will be contacted by LinkedIn once this has been approved.

Once you have completed the set-up tasks, you can enable LinkedIn social sign-in from your Registration Settings which will present users with the option to sign-in or register via LinkedIn as illustrated below.

Facebook

First, you will need to head to Facebook for Developers where you will be able to create or login to your Organisation's Facebook account. Once you have done this, navigate to 'My Apps' in the top right-hand corner of the page where you will be able to start configuring your app.

You will be prompted to select an App Type before proceeding; you should choose the 'Consumer' type option, labelled Build Connected Experiences. 

Following this, you will be asked to input some basic information about your app as well as a reCAPTCHA security check. Once this is complete, you will be redirected to your newly created app's dashboard.

In the left-hand menu, navigate to the Basic Settings tab. On this page, make sure that:

• The display name matches that of your Zapnito community as this will be displayed to users when they are taken through the login process
• You add your Zapnito community's domain name under 'App Domains' (if your site uses a subdomain such as www. or community., this should be excluded. For example, https://community.zapnito.com would become zapnito.com)
• For the contact email, utilise a company account that is managed rather than a personal address
• You add your Organisation's privacy policy and terms of service URLs so that Facebook can ensure that you are compliant with GDPR legislation
• You provide a 'User Data Deletion' URL, which enables your users to delete their data from your app or website (more information can be found here)
• You select an icon, a category and a purpose for your app
• You complete the 'Data Protection Officer Contact Information' form at the bottom of the page

Once this is completed, navigate to the Advanced Settings page. Here, ensure that the 'Native or desktop app?' toggle is disabled, whilst you will also need to review the 'App Restrictions' section to ensure that these settings are applicable to your community.

Next, you will need to add 'Facebook Login' as a product, using the + icon in the left-hand menu. You will be prompted to complete some configuration steps using 'Quickstart' however you can ignore these.

Once this product has been added, select the Facebook Login dropdown in the menu sidebar and click Settings. Here you will need to ensure that:

• 'Client OAuth login' is enabled
• 'Web OAuth login' is enabled
• 'Enforce HTTPS' (this is optional but we recommend this is enabled)
• 'Force Web OAuth authentication' is disabled
• 'Embedded browser OAuth login' is disabled
• You have added the callback url to 'Valid OAuth redirect URLs' which should match the following structure (replace the highlighted text with your community's domain):
  https://your-community.com/users/auth/facebook/callback

When you have finished making these changes, ensure that you set the app's status to 'Live' using the toggle to the right of your App ID at the top of the page.

Finally, return to your Basic Settings where you will be able to copy the App ID and secret to the Registration Settings page on your Zapnito community. Once you have enabled Facebook social sign-in, users will be presented with the option to sign-in or register via Facebook as illustrated below.

If you have any questions or issues relating to the processes outlined in this article, please let us know at support@zapnito.com.