Open Social

Add social login support to Open store. Open Social handles authorization, account creation and association through third-party services. Currently Twitter, Facebook, Github, Google OAuth2, and Amazon are available out of the box.

Installation

Add this extension to your Gemfile with this line:

gem 'open_social', github: '99cm/open_social'

Then run:

bundle install

Copy & run migrations

bundle exec rails g open_social:install
bundle exec rake db:migrate

Restart your server

If your server was running, restart it so that it can find the assets properly.

Preference(optional): By default the login path will be /users/auth/:provider. If you wish to modify the path to: /member/auth/:provider, /profile/auth/:provider, or /auth/:provider then you can do this accordingly in your config/initializers/open_social.rb file as described below:

Spree::SocialConfig[:path_prefix] = 'member'  # for /member/auth/:provider
Spree::SocialConfig[:path_prefix] = 'profile' # for /profile/auth/:provider
Spree::SocialConfig[:path_prefix] = ''        # for /auth/:provider

Utilize OAuth Sources

Click on the New Authentication Method button to enter the key obtained from their respective source, (See below for instructions on setting up the various providers).

Multiple key entries can now be entered based on the rails environment. This allows for portability and the lack of need to check in your key to your repository. You also have the ability to enable and disable sources. These setting will be reflected on the client UI as well.

Alternatively you can ship keys as environment variables and create these Authentication Method records on application boot via an initializer. Below is an example for facebook.

# Ensure our environment is bootstrapped with a facebook connect app
if ActiveRecord::Base.connection.data_source_exists? 'spree_authentication_methods'
  Spree::AuthenticationMethod.where(environment: Rails.env, provider: 'facebook').first_or_create do |auth_method|
    auth_method.api_key = ENV['FACEBOOK_APP_ID']
    auth_method.api_secret = ENV['FACEBOOK_APP_SECRET']
    auth_method.active = true
  end
end

You MUST restart your application after configuring or updating an authentication method.

Registering Your Application

Facebook, Twitter, Github, Google OAuth2, and Amazon are supported out of the box but, you will need to register your application with each of the sites you want to use.

When setting up development applications, keep in mind that most services do not support localhost for your URL/domain. You will need to us a regular domain (i.e. domain.tld, hostname.local) or an IP addresses (127.0.0.1). Make sure you specifity the right IP address.

Facebook

Facebook / Developers / Apps

Name the app what you will and agree to the terms.
Fill out the capcha
Under the Web Site tab
Site URL: http://your_computer.local:3000 for development / http://your-site.com for production
Site domain: your-computer.local / your-site.com respectively

Twitter

Twitter / Application Management / Create an application

Name and Description must be filled in with something
Application Website: http://your_computer.local:3000 for development / http://your-site.com for production
Application Type: Browser
Callback URL: http://your_computer.local:3000 for development / http://your-site.com for production
Default Access Type: Read & Write
Save Application

Github

Github / Applications / Register a new OAuth application

Name The Application
Main URL: http://your_computer.local:3000 for development / http://your-site.com for production
Callback URL: http://your_computer.local:3000 for development / http://your-site.com for production
Click Create

This does not seem to be a listed Github item right now. To View and / or edit your applications goto http://github.com/account/applications

Amazon

Amazon / App Console / Register a new OAuth application

Register New Application
Name the Application, provide description and URL for Privacy Policy
Click Save
Add Your site under Web Settings > Allowed Return URLs (example: http://localhost:3000/users/auth/amazon/callback)

The app console is available at https://login.amazon.com/manageApps

Google OAuth2

Google / APIs / Credentials/ Create Credential

In the APIs and Services dashboard, visit 'Credentials' on the side, then select 'Create Credentials' and 'Oauth client ID'.
Name the Application, select "Web Application" as a type.
Under "Authorized redirect URIs", add your site (example: http://localhost:3000/users/auth/google_oauth2/callback)

More info: https://developers.google.com/identity/protocols/OAuth2

Adding other OAuth sources

It is easy to add any OAuth source, given there is an OmniAuth strategy gem for it (and if not, you can easily write one by yourself.

LinkedIn Example

1, Add gem "omniauth-linkedin" to your Gemfile, run bundle install.

In config/initializers/open_social.rb add and initialize a new provider for OpenSocial:

  config.providers = {
    # The configuration key has to match your omniauth strategy.
    linkedin: {
      api_key: ENV['LINKEDIN_API_KEY'],
      api_secret: ENV['LINKEDIN_API_SECRET'],
    },
    # More providers here

Activate your provider as usual.
Do one of the following:
- Override the spree/users/social view to render OAuth links to display your LinkedIn link.
- Include in your CSS a definition for .icon-spree-linkedin-circled and an embedded icon font for LinkedIn from Fontello (the way existing icons for Facebook, Twitter, etc are implemented). You can also override CSS classes for other providers, .icon-spree-<provider>-circled, to use different font icons or classic background images, without having to override views.

Contributing

See corresponding guidelines.

cgcmart / open_social