By using OpenID Connect, your members can sign up/in using any social media account
In this article, I will show you how you can quickly config the Facebook, Twitter, Google and Linkedin application for OpenID Connect.

CONFIG FACEBOOK

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

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

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

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

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

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

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

#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 and email to Advanced Access:

10/ How to configure your Admin Dashboard:

Go to Admin Dashboard/OpenID Connect/Facebook Login

Then:

Get #1 and #2 from fb app and copy to your Admin Dashboard/OpenID Connect/Facebook Login

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

#2: Your Client 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/open_id_connects/login/] paste to Valid OAuth Redirect Url at your facebook developer page and setEmbedded Browser OAuth Login to Yes

Save Facebook Login.

*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].

CONFIG GOOGLE

1/ Go to console.developers.google.com:

2/ Login your google account & create project:

#Press on Create Project.

3/ Fill in your Project’s Name:

#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 & Services/Credentials of your project:

5/ Click on CREATE AREDENTIALS and choose OAuth client ID:

6/We have to configure consent screen first:

#Press on Configure consent Screen then continue.

7/ Select External and click on CREATE button:

8/ Register at your OAuth Consent Screen :

#1 Enter App name

#2 Enter User support email

#3 Upload logo

#4 Enter your home page link

#5 Enter your privacy policy page link

#6 Enter your terms of service page link

#7 Enter your domain

#8 Enter your developer contact email

#9 Save information

Do the step 4 and step 5 again to create OAuth client ID

9/ Select Application type: Web application:

10/ Fill the client ID information:

#1 Enter the OAuth client name

#2 Enter redirect URls, this URL has format: [yoursite/open_id_connects/login]

#3 Create OAuth Client ID

11/ Review and save your Client ID and Client Secret:

Copy (1) and (2) to your setting Admin Dashboard/OpenID Connect/Google Login:

*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, they must be same to each others.

CONFIG TWITTER

1. Go to https://developer.twitter.com/en/apps and login your Twitter developer account.

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.

2. At Dashboard tab, click on Create Project button:

3. At Projects & Apps tab, you must fill all your project information:

3.1 Enter Project name and click on Next button.

3.2. Select a Use case and click on Next button.

3.3. Enter Project description and click on Next button.

4. After create project successfully, you must fill all your application information:

4.1 Select your App environment and click on Next button.

4.2. Enter your App name and click on Next button.

5. After create application successfully, you will see your keys and tokens.

6. Click on App settings button.

7. At App settings page, click on Set up button:

8. You have to fill all your app settings.

8.1 App permission: select Read and write and Direct message.

8.2. Type of App: select Web App, Automated App or Bot.

8.3 App info: enter app info and click on Save button.

#1. Callback URl / Redirect URL:
enter [yoursite/open_id_connects/login]

Example: https://moosocial.com/open_id_connects/login

#2. Website URL: enter your website URL.

#3. Organization name (optional): enter your organization name.

#4. Organization URL (optional): enter your organization URL.

#5. Terms of service (optional): enter your Terms of service URL.

#6: Privacy policy (optional): enter your Privacy policy URL.

9/ Review and save your Client ID and Client Secret:

Copy (1) and (2) to your setting Admin Dashboard/OpenID Connect/Twitter Login:

CONFIG LINKEDLIN

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

2. Login –> Create app:

3. Complete information about your app:

#1 Enter your app name

#2 Select your company linkedlin page

#3 Enter your privacy poicy page link

#4 Upload your logo

#5 Tick on I have read and agree to these terms check box

#6 Create app

4. Verify your app:

4.1/ Go to Settings tab, click on Verify button:

4.2/ At Verify company popup, click on Generate URL to get Verification URL:

4.3/ Open Verification URL and click on Verify button:

5. After verify your app, open Products tab and click on Request access for Sign In with LinkedIn v2:

6. Open Auth tab, Add redirect URL and click on Update button:

Your redirect URL has the format: [yoursite/open_id_connects/login]

7. You can view and copy your Client ID and Client Secret:

And use that Client ID and Client Secret at your setting Admin Dashboard/OpenID Connect/Linkedin Login:

Access Admin Dashboard –> System Settings –> Features

Enable the Cookie Warning function by checking the “Enable Cookies” checkbox => Click on the Save Settings button.

After enabling this function, when users visit your website, they will see the cookie consent banner.

When the Site Admin logs in to the Admin Dashboard, they will see the version and branding of mooSocial in Admin Panel.

Follow the steps below to learn how to remove the version and branding.

• Access Admin Dashboard => System Settings => General

  [1] Uncheck the “Show all mooSocial branding” checkbox to remove mooSocial branding.

  [2] Check on the “Hide mooSocial version” checkbox if you want to hide the mooSocial version.

=> Click on Save Settings button.

• Go to Admin Home page: The mooSocial version and branding have been removed.

Hopefully, this tutorial was helpful for you.

Access Admin Dashboard => System Settings => Security

Enable the ‘Approve Users’ function by checking on the “Approve Users” checkbox => Click on the Save Settings button.

After enabling the function, your site will go into approved only mode.

When a new user registers to join your site, the account will be pending until the Site Admin approves the request.

 

To approve join requests, the Site Admin goes to Admin Dashboard => Users Manager

The Approved status will be “No” when your site turns to approved mode.

Click on the account you want to accept the request to join

Change the Approved status to “Yes” => Save Changes button.

Now Users can now join your site.

Install new language

Two ways to create a new language into your site:

+ Installed existing language

Admin panel -> site manager -> languages manager -> Not installed language tab -> Click on “Install” button to install your desired languages. If the languages that you want to install is not inside the list, please contact us for support

+ Create a new language

Admin panel -> site manager -> languages manager ->  Click on “Create New language” button to create a new language

Translate the phrases that have not be translated to your language yet
If the the language that you just installed or created is not fully translated, you need to translate more by yourself. Please follow the below steps to do that.

Admincp -> Site manager > Language Manager

# Click Translate icon (see below screenshot)

# Search phrases you want to translate or change

# Select one result from the list and translate or change it to new phrase

# Save and clear global cache and browser cache to check again

Translate for Menu or Widget using Admin Dashboard

In this section, we will show you how to Translate Menu’s title, Widgets Title, Categories of the plugin to other languages.
Translate Menu