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

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.

Add Google Developer Key Or Enable OpenStreetMap

If you you enable plugin that has map like checkin, business directory…..you need to configure Google or OpenStreetMap api.

+ How to configure Google map api key:

1. Login to the admin dashboard
2. Under system admin > system settings > Integration
3. Enter your Google Developer Key code in Google Developer Key field

Screenshot at Mar 14 14-49-39

How to get Google Developer Key?

Click here to know which options you need to select for your google api key

Google already changed the pricing policy, you need to enable billing to be able to use your key. Click here for more details.

+ How to enable OpenStreetMap: OpenStreetmap is Free but the api and the map are not good compare with google map.  If map is importance with you, should enable google map instead. 

1. Go to admin panel

2. Go to System Settings -> Features. Find “Default map” setting, then select “OpenStreetMap” option -> Save changes

3. All maps at your site will switch to OpenStreetMap. It’s free however it’s a bit slow and sometime the position is not 100% correct.