Configure Facebook, Google,LinkedIn and Twitter Login Button

If you want to allow your member to sign up/in using social media account like fb, google…please follow the instructions at this document.

Facebook App Integration tutorial

Mandatory conditions: Facebook business account – https://www.facebook.com/business/help/1710077379203657?id=180505742745347

Create a Facebook App:

1/ Go to developers.facebook.com

2/Login & select My apps/Add a New App

3/ Select an app type: select Consumer and click Next button

2

4/Fill in your Display name and App Contact Email and click Create App butotn:

4

5/ After app is created, Click “Set up” button at Facebook Login from Add Products page:

5

6/Select platform for your app, select Web platform:

platform

7/After Select Web platform fill in your Site URL and click Save button:

siteurl

8/After click save, make sure it is activated (live):

To make your app live, go to My Apps/YourNewCreatedApps/Settings/Basic

8

#1: Fill in your Namespace

#2: Ensure your Contact Email is correct.

#3: Fill in your App Domains

#4: Fill in your Site Privacy Policy URL

#5: Fill in your Site Terms of Service URL

#6: Upload your app icon

#7: Enter yoursiteurl/social/auths/delete_app/facebook

#8: Select your app category

#9: On header of page change App Mode from Development to Live

If any of # above incorrect, your app cannot be lived.

9/ Go to App Review/Permissions and Features and switch public_profile to Advanced Access:

9

10/ How to configure your Admin Dashboard:

Go to Admin Dashboard/Socials Integration/Facebook

Then:

appapi

Get #1 and #2 from fb app and copy to your Admin Dashboard/Socials Integration/Facebook

moosocial.com_wiki_lib_plugins_ckgedit_fckeditor_userfiles_image_admin_dashboard_system_admin_system_settings_fb_dashboard.jpg

#1: Your App ID from your FB app (in your FB app/Settings/Basic)

#2: Your App Secret from your FB app (in your FB app/Settings/Basic, the App Secret will show after pressing Show button and re-enter your FB password.

#3: Copy link Return URL field: [yoursite/social/auths/endpoint/facebook/] paste to Valid OAuth Redirect Url at your facebook developer page and setEmbedded Browser OAuth Login to Yes

10

#4: Save Changes.

*You dont need to config SDK version used in Admin Dashboard, system will be detected automatically.

*Remember to check if any space in the fields.

*Remember your site could be [https] instead of [http], they will not recognize if site was [https] and Client ID & Admin Dashboard were [http].


Google App Integration tutorial


1/ Go to console.developers.google.com

2/Login your google account & create project:

createproject

#Press on Create Project.

3/Fill in your Project’s Name :

enterappname

#1 Fill your project’s name

#2 Create

*Agree to Terms and Conditions if they’re showing up.

4/After your project is done creating select your Project from select box and go to API Manager/Credentials of your project and click Credentials in APIs & Services link :

credentials

5/Hover mouse on Create credentials button and choose OAuth client ID:

googleid

6/We have to configure consent screen first:

moosocial.com_wiki_lib_plugins_ckgedit_fckeditor_userfiles_image_admin_dashboard_system_admin_system_settings_gg_configure.jpg

#Press on Configure consent Screen then continue

7/Register at your Consent Screen :

consent

#1 Check your Application name

#1 Check your Application logo

#3 Check your Email

#4 Enter your Site domain

#5 Enter your Site home page link

#6 Enter your Site Privacy Policy page link

#7 Enter your Site Terms of Service page Link

Click  Save

8/Once you had registered your consent screen, Start Creating Client ID :

#1 Select Web Application

#2 Enter your site’s domain

#3 Enter your callback’s URL, this URL has the format: [yoursite/social/auths/endpoint/google?hauth.done=Google]

#4 Create Client ID

9/ Review your Client ID, it should be looked like this:

#Your Client ID

10/ On Credentials tab, click on credential name hyperlink, start configuring:

The Client Id on Google:

-Copy 1, 2, 3 to your settings Admin Dashboard/Socials Integration/Google one by one.

-Copy 1, 2, 3 to your settings Admin Dashboard/Socials Integration/Google one by one.

-Enable, check!

-Save Settings

*Remember to check if any space in the fields.

*Remember your site could be [https] instead of [http], they will not recognize if site was [https] and Client ID & Admin Dashboard were [http].

* Both sides, Admin Dashboard and Client ID must be configured synchronously for the 1, 2, 3, they must be same to each others.


6-1-2015_5-44-56_pm.jpg

6-1-2015_5-45-12_pm.jpg

Your Login Page and Sign Up Page should be looking like this, with Facebook and Google button


Twitter App Integration tutorial

1/ Go to https://apps.twitter.com/

Note: if your account is not developer account, you will got a message request “Apply for a developer account” please click “Apply for a developer account” and follow all steps to apply developer account.

createdeveloper

If your account is developer account you will see:

moosocial.com_wiki_lib_plugins_ckgedit_fckeditor_userfiles_image_admin_dashboard_system_admin_system_settings_twitter1.jpg

2/ Create New App and fill the all fields

twitter2

#1. Enter you app name
#2. Enter you app description
#3. Enter your website url (ex: https://moosocial.com)
#4. Check “Enable sign in with twitter”
#5. Enter your website URL: will be [url your website]/sociallogin/endpoint/twitter (ex: https://moosocial.com/sociallogin/endpoint/twitter)
#6. Enter field “Tell us how to this app will be used”:  you can enter ex: My user will click twitter button from my site and will use his twitter account to signup and signin my site.
#7. Click Create button

3/ Receive the successfully creation message

4/ Go to ‘Keys and Access Tokens“ tab to get API key and API secret info

moosocial.com_wiki_lib_plugins_ckgedit_fckeditor_userfiles_image_admin_dashboard_system_admin_system_settings_twitter5.jpg

5/ Access your site, go to Admin Dashboard/ System Admin/ Social Integration/ Twitter

moosocial.com_wiki_lib_plugins_ckgedit_fckeditor_userfiles_image_admin_dashboard_system_admin_system_settings_twitter4.jpg

#1: Input API key and API secret info on step 4

#2: Input public_profile, email, user_friends to Scope textbox

#3: Input [url your website]/sociallogin/endpoint/twitter
(ex: https://moosocial.com/sociallogin/endpoint/twitter)

Then, click on Save Settings button. Complete Twitter integration process.


LinkedIn App Integration tutorial

Mandatory conditions: LinkedIn business account – https://www.linkedin.com/help/linkedin/answer/a543852/create-a-linkedin-page?lang=en

Create a LinkedIn App:

1. Go to https://www.linkedin.com/developers/

2. Login –> Create app

3. Complete information about your app

#1: Fill in your App name

#2: Fill in your Company

   #3: Fill in your Privacy Policy link

   #4: Fill in your business email

   #5: Upload your App logo

   #6: “I have read and agree to these terms” –> checked

   Click on Create app button

4. Enter redirect URL

Enter URL in the following format: [yoursite/sociallogin/endpoint/linkedin?hauth.done=Linkedin]

5. Go to Admin Dashboard/Social Login/Linkedin

6. Get #1 and #2 from Linked app and copy to your Admin Dashboard/Social Login/Linkedin

   #1: Your Client ID from Linkedin (in your Linked app/ Authentication)
#2: Your Client Secret from Linkedin (in your Linked app/ Authentication)

Press Save Settings. Complete Linkedin integration process

*Remember to check if any space in the fields.

Last Updated On June 21, 2023