[ADDON] Social Login and Register

Topic: [ADDON] Social Login and Register (Read 21002 times) previous topic - next topic

0 Members and 1 Guest are viewing this topic.

[ADDON] Social Login and Register

March 26, 2017, 01:38:04 am

Inspired by http://www.elkarte.net/community/index.php?topic=4360.0 and trying on the challange ^[1]

Here is another External Authentication / Login / Register using your Social Media account. This addon utilizes the initial work done by @Ant59‍ and at the core it is using HybridAuth

Consider this ALPHA level software as it needs testing. I've done some testing with login and register for all of the supported networks except Facebook as I don't have an ID!

Get it here: http://addons.elkarte.net/feature/External-Auth.html

To use this YOU need to register your site as an "app" at each Social Network Provider that you intend to allow on your site. Doing this is different but similar for each Social Site, basic instructions and links are below (and also in the Admin section of the addon) The admin settings for the addon are under Admin -> Members -> Registration -> OAuth Providers

Summary

Allows your users to connect with one click to your ElkArte Forum using their social network accounts.

Supports social networks: Facebook, Twitter, LinkedIn, Google, Yahoo, GitHub

Description

The settings for the addon are under Admin -> Members -> Registration -> OAuth Providers

Each social network will require that you create an external application linking your Web site to their api. These external OAuth applications ensure that users are logging into the correct Web site and allows it to send the user back to the correct Web site after successfully authenticating.

The link to setup your OAuth accounts for these sites is provided in the Admin Panel along with general steps of what to do for each API. Most important will be the Redirect URIs which is provided in the help for each.

Features

Allows a single ElkArte user profile to be connected to multiple social provider accounts
Follows Elkarte's registration workflow but streamlined with provider authorization.
Attempt to fetch some profile information from the social site during registartion (avatar, gender, website, etc) access depends on each social site.
Allows users to authorize / deauthorize providers in their account settings (Modify Profile -> Connected Accounts)
Allows admin to selectively enable / disable providers
Allows for one button login to connected accounts.

New or Existing User

Existing users should "Connect" their current site account with each of the social networks they intend to use. They can do this from their profile page Modify Profile -> Connected Accounts. Once done they can simply click the appropriate social icon on the login page and be logged in to the site.

New users can select a social login icon which will begin a registration process that will Connect a new site account to the chosen social site. They will still have to accept your site agreement and any required profile fields you have enabled including email and userid.

Provider Setup

Setting up Facebook

Go to https://developers.facebook.com/apps
Create a new App
Select Basic Settings
- Fill out required fields such as the application name and description.
- Enter your site name as the App Domain
- Select Add platform and choose website, enter the url to your site
Select + Add Product
- Select Facebook Login
- Select Website
Select Facbook Login Settings
- Enter the Valid OAuth redirect http://YOUR-SITE-URL/hybridauth/endpoint?hauth_done=Facebook

Setting up Twitter

Go to https://dev.twitter.com/apps/new
Create a new application
Enter a Callback URL: http://YOUR-SITE-URL/hybridauth/endpoint?hauth.done=Twitter
Copy your Consumer Key and Consumer Secret to the corresponding fields in the addon settings
Check Allow this application to be used to Sign in with Twitter.
Under Permissions select Read only access..

Setting up Google

Go to https://code.google.com/apis/console/
Create a new project, you will then see the API Manager for you new Project
Select OAuth consent screen. The consent screen will be shown to users whenever you request access to their
private data using your client ID. Fill out any required fields such as the site url and logo
Select Credentials -> Create Credentials -> OAuth Client ID.
In Client ID settings:
- Application Type is Web Application
- Authorized Redirect URIs - enter the Authentication URL http://YOUR-SITE-URL/hybridauth/endpoint?hauth.done=Google
Copy your Client ID and Client secret to corresponding fields in the addon settings
Enable theGoogle+ scopes ```Google+``` API.

Setting up LinkedIn

Go to https://www.linkedin.com/secure/developer
Create new application
- Under default permissions select r_basicprofile and r_emailaddress
- The Oauth2 Authorized Redirect URLs: http://YOUR-SITE-URL/hybridauth/endpoint?hauth.done=Linkedin
Copy the Client ID and Client secret to corresponding fields in the addon settings.

Setting up Yahoo!

Go to https://developer.yahoo.com/apps/
Create new Application
- Fill out the project information
- Use Web Application for the application type
- Under API permissions choose Profile -> Read Public
- Callback Domain - enter http://YOUR-SITE-URL
Copy the Consumer Key and Consumer Secret to corresponding fields in the addon settings

¹I hope this can be a start for coding multiple social login / registration to ElkArte forum whether using Hybridauth as suggested by @emanuele or something similar/better↵

Re: [ADDON] Social Login and Register

Reply #1 – March 26, 2017, 04:33:19 am

This is a very good news and in about time. Hopefully, will be a feature in EA.

Re: [ADDON] Social Login and Register

Reply #2 – March 26, 2017, 04:46:56 am

Just installed and tried using proper FB key and secret and get this error:

Quote

"PHP message: PHP Fatal error: Uncaught Error: Class 'Facebook\Facebook' not found in /var/www/clients/client2/web1/web/sources/ext/hybridauth/Hybrid/Providers/Facebook.php:56
Stack trace:
#0 /var/www/clients/client2/web1/web/sources/ext/hybridauth/Hybrid/Provider_Model.php(99): Hybrid_Providers_Facebook->initialize()
#1 /var/www/clients/client2/web1/web/sources/ext/hybridauth/Hybrid/Provider_Adapter.php(101): Hybrid_Provider_Model->__construct('Facebook', Array, Array)
#2 /var/www/clients/client2/web1/web/sources/ext/hybridauth/Hybrid/Auth.php(277): Hybrid_Provider_Adapter->factory('Facebook', Array)
#3 /var/www/clients/client2/web1/web/sources/ext/hybridauth/Hybrid/Auth.php(229): Hybrid_Auth::setup('Facebook', Array)
#4 /var/www/clients/client2/web1/web/sources/controllers/Extauth.controller.php(205): Hybrid_Auth::authenticate('Facebook')
#5 /var/www/clients/client2/web1/web/sources/controllers/Extauth.controller.php(120): Extauth_Controller->getAdapterProfile()
#6 /var/www/clients/client2/web1/web/sour" while reading response header from upstream, client: 192.168.0.108, server: elkarte.sch.my, request: "GET /index.php?action=extauth;provider=facebook;c8abbad8=029259a6d57c6c874ba645caffc09ca4 HTTP/2.0"

Re: [ADDON] Social Login and Register

Reply #3 – March 26, 2017, 02:58:30 pm

Thank you for the FB testing, that was the only one I could not test ... I should be able to figure it out whats going on from that trace

Re: [ADDON] Social Login and Register

Reply #4 – March 26, 2017, 05:30:25 pm

Nice

I was playing with HybridAuth for a while but couldn't get it to work (errors that login page cannot be accessed directly etc..)

Re: [ADDON] Social Login and Register

Reply #5 – March 26, 2017, 06:00:41 pm

Quote from: ahrasis - March 26, 2017, 04:46:56 am

Just installed and tried using proper FB key and secret and get this error:

I've updated the addon (update is in the first post). This should fix that facebook error. The provider script was not calling the FB autoloader. Also updated the FB api to what I think is the latest, well at least what composer pulled down.

Quote from: phantom - March 26, 2017, 05:30:25 pm

Nice

I was playing with HybridAuth for a while but couldn't get it to work (errors that login page cannot be accessed directly etc..)

I think that was mainly due to sessions issues ... one of the main things needed to get this to run was include SSI in hybridauth index.php so it uses ElkArte sessions and not default PHP ones. But yeah this was a bit of a pain to get running !

Re: [ADDON] Social Login and Register

Reply #6 – March 26, 2017, 10:06:09 pm

Nice work! Will this work for 1.1rc1?

Re: [ADDON] Social Login and Register

Reply #7 – March 27, 2017, 02:17:13 am

Will test it again soon and report.

Re: [ADDON] Social Login and Register

Reply #8 – March 27, 2017, 03:27:38 am

Quote from: badmonkey - March 26, 2017, 10:06:09 pm

Nice work! Will this work for 1.1rc1?

No idea TBH !

Re: [ADDON] Social Login and Register

Reply #9 – March 27, 2017, 03:37:49 am

Gave it a whirl. The icons don't show. Looks like they use fontawesome. I may look at either including FA or replacing the inclusions with svg. With your permission of course.

Re: [ADDON] Social Login and Register

Reply #10 – March 27, 2017, 03:53:28 am

Ah ... there is a setting (available to addons) in 1.1 to enable FA

see we did not leave ya hanging ... I can't remember what it is right now but will post back later.

Re: [ADDON] Social Login and Register

Reply #11 – March 27, 2017, 04:03:25 am

Quote from: Spuds - March 27, 2017, 03:53:28 am

Ah ... there is a setting (available to addons) in 1.1 to enable FA see we did not leave ya hanging ... I can't remember what it is right now but will post back later.

Really? Cool! That's even easier. Learned something too.

Re: [ADDON] Social Login and Register

Reply #12 – March 27, 2017, 06:06:34 am

Facebook fixes you did work! Partially though.

It registers the user, ask for username and email is successfully imported into the field with choice to be make it public. Continue from that the user cannot login to EA, though user's details are listed in members list already.

One more thing, I kinda get this while uninstall the previous package:

Quote

Type of error: General
file_get_contents(/var/www/clients/client2/web1/web/themes/default/css/Extauth.css): failed to open stream: No such file or directory
https://www.sch.my/index.php?action=admin;area=packages;sa=uninstall2;package=elk_external_auth.zip;pid=410
Apply Filter: Only show the errors from this file File: /var/www/clients/client2/web1/web/sources/SiteCombiner.class.php
Line: 344

Type of error: General
filemtime(): stat failed for /var/www/clients/client2/web1/web/themes/default/css/Extauth.css
https://www.sch.my/index.php?action=admin;area=packages;sa=uninstall2;package=elk_external_auth.zip;pid=410
/var/www/clients/client2/web1/web/sources/SiteCombiner.class.php
Line: 268

The above could be due to me restoring the old 1.0.9 without the fixes already given in 1.0.10 test package. I'll check it out.

Re: [ADDON] Social Login and Register

Reply #13 – March 28, 2017, 09:55:26 pm

Well I had to register for a temporary FB account to test this

Selecting FB to register, I was redirected to FB to approve the connection.
I approved it and was directed back to the ElkArte registartion screen with the email (from FB) filled in as expected.
I entered a username accepted the agreement and clicked register with FB.

At that point I was logged in and my account on the ElkArte had my FB avatar and a few other details, so everything seemed to work as expected for me. The only thing I can think of is that you did not have the correct Valid OAuth redirect URIs filled out in the FB app?

My FB app has
Client OAuth Login: yes
Web OAuth Login Yes
Force Web OAuth Reauthentication: No
Embedded Browser OAuth Login: No
Valid OAuth redirect URI: http://YOUR-SITE/sources/ext/hybridauth?hauth_done=Facebook
Login from Devices: No

I would not worry about that CSS file error, just a problem from me updating packages.

Re: [ADDON] Social Login and Register

Reply #14 – March 28, 2017, 10:31:53 pm

I did not test the addon, but what happens if there are mandatory custom fields required in Elkarte registration? Are they ignored? IIRC the ONE all mod for SMF ignores custom fields.