Archives

How to setup OpenID Connect?

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

2

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

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

openid1

10/ How to configure your Admin Dashboard:

Go to Admin Dashboard/OpenID Connect/Facebook Login

Then:

appapi

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

openid2

#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.

openid3

*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:

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

openid4

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

openid5

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/ Select External and click on CREATE button:

openid6

8/ Register at your OAuth Consent Screen :

openid7

#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:

openid8

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

openid9

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

openid10

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

openid11

*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:

002_social

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

3.1 Enter Project name and click on Next button.

003_social

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

004_social

3.3. Enter Project description and click on Next button.

005_social

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

4.1 Select your App environment and click on Next button.

006_social

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

007_social

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:

009_social

8. You have to fill all your app settings.

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

010_social

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

011_social

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

openid12

#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:

openid13

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

openid14

CONFIG LINKEDLIN

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

2. Login –> Create app:

openid15

3. Complete information about your app:

openid16

#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:

openid17

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

openid18

4.3/ Open Verification URL and click on Verify button:

openid19

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

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

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

openid21

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

openid22

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

openid23

How to remove mooSocial version and branding in Admin Panel

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

1

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

  • Access Admin Dashboard => System Settings => General

2

  [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.

3

Hopefully, this tutorial was helpful for you.

How to turn your community site to approved only mode

Access Admin Dashboard => System Settings => Security

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

1.

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.

2

 

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.

3

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

4

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

5

Now Users can now join your site.

Install new language and translate your site to new language

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

Screenshot at Dec 30 17-38-52

+ Create a new language

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

Screenshot at Dec 30 17-40-05

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)

Screenshot_1

# Search phrases you want to translate or change

Screenshot_2

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

Screenshot_3

# 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

 Admin Dashboard -> System Admin > Menu.

Screenshot at Dec 30 17-50-15

 

Click on “Translation” link to open popup, Inside the popup, select language then enter text to translate it to the selected language. Don’t forget to clear global cache and browser cache

transmenu1

Let us return to Front-end, select the language that you just translated to check to see if it works or not

transmenu2
Translate Widget:
Admin Dashboard -> Site Manager -> Themes Manager -> Layout Editor.

At Layout Editor, select the page that contains that widget that you want to translate the title

homepage

Click on “Edit” icon of the widget.

homepage1

Click on “Translation” link inside the popup to translate

homepage2

 

Select language that you want to translate into, then enter text and save your changes.

 

homepage3

Clear browser cache and global cache then check again at user side.

homepage4

Translate plugin categories

This section will show you how to translate categories of a plugin. Below is categories of videos plugin

catalog

#Go to the Plugin Category’s Manager.

select a Category you want to translate.

catalog1

Click on “Translation” link to open a popup

catalog2

Select language and enter text that you want to translate.

catalog3

Click save changes and check again at users side

catalog4

catalog5

Translate Profile type and fields

How to translate profile type

Admin panel -> System admin -> Profile types

Click on “Edit” button of the type that you want to translate to open popup. You can translate profile type to other language there.

Screenshot at Dec 30 17-23-38

How to translate profile fields

Admin panel -> System admin -> Profile types -> Select a type -> Select a field

Click on “field name” that you want to translate to open popup. You can translate profile field to other language there.

Screenshot at Dec 30 17-31-51

How to translate options inside a field

Admin panel -> System admin -> Profile types -> Select a type -> Select a field -> Field values

Screenshot at Dec 30 17-34-04

Click on “value name” that you want to translate to open popup. You can translate field value to other language there.

Screenshot at Dec 30 17-35-05