Add social sign in functionality (Google, Facebook, Twitter) #2155

moifort · 2015-10-16T17:20:26Z

Generator:

Add a new question to enable social, by default it's false (just after that @jdubois delete one, so we have still 15 questions).
Only available for the HTTP Session Authentication

Functionality:

Possibility to connect with Twitter, Facebook, Google from the login and register screens.
Sending mail after registration with social .
Associate social connection with email account (ex: you have already create an account with moi@jhipster.com, if you register with a google account who has the same email it will use the same account).
If you register a new account with social sign in and the social don't have login/username, by default your login will be your email address.
I already put clientId and clientSecret keys but only for the test (http://localhost:8080/signin) so you can test directly after generation :).
Add an option in the application.yml to specify the url after sign in.

Other:

~~Add the font-awesome library, more icons (https://fortawesome.github.io/Font-Awesome/icons).~~
Add a new util filter capitalize (ex: {{ twitter | capitalize }} -> Twitter).

To do:

Make the documentation that explain how have clientId and clientSecret for Twitter, Google and Facebook and an other part to explain how to add a new social sign in.

EDIT: I remove the Facebook keys because the Facebook API has been upgraded and spring-social-facebook is not working anymore, but dont worry there is a PR pending on the repository: spring-attic/spring-social-facebook#171

Close #1649

… into feature/social # Conflicts: # app/index.js # app/templates/_pom.xml

moifort · 2015-10-17T10:15:54Z

app/templates/src/main/webapp/scripts/app/account/social/_social.service.js

+            return 'signin/' + provider;
+        };
+
+        socialService.getCSRF = function () {


I don't know if it's a good way to get the CRSF to put in the form?

jdubois · 2015-10-17T11:41:04Z

app/templates/_bower.json

        <%_ } _%>
+        "font-awesome": "4.4.0",


Adding font-awesome is probably going to add a lot of resources, at the moment we only use "normal" bootstrap -> the idea is that we provide something "light" by default, but it's easy for people to extend (just do a Bower install). Can you remove this, and add the Bootstrap class instead?

Ok, two options:

I remove totally the font-awesome lib, and the icon of the social button too (because icon like Twitter, Facebook dont exist in bootstrap icon package)

I add font awesome only when social is enabled

Wich one you prefer?

Normally we use icons from Bootstrap, have a look at http://getbootstrap.com/components/

can you find something good enough?

anyway there might be copyright issues with using brand logos, I'd rather not go there

No there are no brand icon on bootstrap icon set :(. I will remove font-awesome, and add to the documentation how to add the icon on the button.

@jdubois I remove the font-awesome, but there is a problem, the social button is not compatible without icon. I can just create a simple bootstrap button, but we loose the user experience. On all the website it's the same type of button (icon and color).

My opinion it's keep font-awesome, I think the ratio weight/utility is good, like you said it's add more ressource but allow user to use more icons and some special effect like loading icon. I prefer to keep it for a better user experience.

But if you prefer to not use it I can just create a simple button with the label.

+1 for Font Awesome, even if it's only included when someone wants social
authentication. I use it on all my client projects.
On Sat, Oct 17, 2015 at 07:38 Thibaut Mottet notifications@github.com
wrote:

In app/templates/_bower.json
#2155 (comment)
:

<%_ } _%>

"font-awesome": "4.4.0",

@jdubois https://github.com/jdubois I remove the font-awesome, but
there is a problem, the social button is not compatible without icon. I can
just create a simple bootstrap button, but we loose the user experience. On
all the website it's the same type of button (icon and color).

My opinion it's keep font-awesome, I think the ratio weight/utility is
good, like you said it's add more ressource but allow user to use more
icons and some special effect like loading icon. I prefer to keep it for a
better user experience.

But if you prefer to not use it I can just create a simple button with the
label.

—
Reply to this email directly or view it on GitHub
https://github.com/jhipster/generator-jhipster/pull/2155/files#r42309339
.

Yes it's good to use Font Awesome, that's what I use for the main JHipster website :-)
But here I don't want to add lots of CSS/images for everyone -> it should be easy to add, but not here by default
@moifort could you just use a String? Or just some specific images?

I create button with string and css:

This reverts commit d86a0ea.

jdubois · 2015-10-18T17:02:19Z

app/templates/src/main/resources/config/liquibase/changelog/_initial_schema.xml

@@ -173,6 +173,36 @@
                                 constraintName="fk_evt_pers_audit_evt_data"
                                 referencedColumnNames="event_id"
                                 referencedTableName="jhi_persistent_audit_event"/>
+    <% if (enableSocialSignIn) { %>
+    <!-- Social -->
+    <createTable tableName="jhi_UserConnection">


all our table names are now lower case, can you write this in lower case?

btw, where is this table configured?

I use the default one: https://github.com/spring-projects/spring-social/tree/master/spring-social-core/src/main/java/org/springframework/social/connect/jdbc. I am working to make compatible with the naming. I rewrite the class JdbcConnectionRepository.java and JdbcUsersConnectionRepository.java using spring Data JPA.

…into feature/social

… into feature/social # Conflicts: # app/index.js

jdubois · 2015-10-19T14:24:25Z

Oups sorry I was merging this and I see you didn't put the table names in lower case:

There's a little merge to do -> nothing complex, you use the same lines as the new "test framework" question, so you need to keep both
Can you tell me when you have put the database names in lower case?

moifort · 2015-10-19T14:30:43Z

@jdubois yes yes! not yet! sorry I have not finish, I change the code to make it compatible in lower case and there are some work on it. And the sign in didn't work in OAuth2 :(.
Ok for the merge.

jdubois · 2015-10-19T14:32:50Z

If OAuth2 doesn't work just exclude it with some if...then -> I want a first working version, not a perfect version!

… into feature/social # Conflicts: # app/index.js # app/templates/_pom.xml

Close #2174

- add package-info - add cache - add repository + domain - only available for session authentification

… into feature/social

moifort · 2015-10-20T00:14:41Z

@jdubois I finish the compatibility and add some little things like:

add Gradle config
package-info.java
main.css and main.scss copy with template mode and add the test enableSocialSignIn
add the domain SocialUserConnection to the config cache (ehcache.xml)
enable only for the option HTTP Session Authentication

jdubois · 2015-10-20T09:22:38Z

app/templates/src/main/java/package/social/config/_SocialConfiguration.java

@@ -0,0 +1,116 @@
+package <%=packageName%>.social.config;
+
+import com.mycompany.myapp.social.repository.SocialUserConnectionRepository;


You need to use the package name here

jdubois · 2015-10-21T10:23:12Z

@moifort I will probably rework the generator questions. We could have only one question for authentication:

session
session + social
oauth2
token

And I would keep the current variables, as it's easier to use.

moifort · 2015-10-21T10:28:28Z

@jdubois If you want me to do it?

jdubois · 2015-10-21T10:29:20Z

If the time at midday yes! Otherwise I think I'm gonna merge this after lunch :-)

moifort · 2015-10-21T10:35:22Z

@jdubois sorry, I will don't have the time for midday :(

jdubois · 2015-10-21T10:36:00Z

@moifort no problem, I'll do it :-)

Add social sign in functionality (Google, Facebook, Twitter)

jdubois · 2015-10-21T12:28:31Z

Merged it!
But now I see you didn't put the repositories in the repository package, etc... So I'm going to refactor all this to use the normal package names

moifort · 2015-10-21T12:37:49Z

This is done on purpose, my idea it's to isolate social like a module (because it's not a really part of the project like user or entities). So if you work on social everything it's on the package (no need to find your class in all the project). That's why I put the Spring config too.

If you want to change it, don't forget to remove the annotation @EnableJpaRepositories in the config file SocialConfiguration.java.

jdubois · 2015-10-21T12:58:05Z

Yes I understand, but the idea is that all the repos are in the same place, etc (including so that the configurations are all in one place)
I'm not saying it's better -> those are 2 ways to modularize the application, and both are correct in their own way. Here I'm just trying to have something homogenous in the generated app.

moifort · 2015-10-21T13:02:23Z

sorry for the refacto :(

jvence · 2015-10-21T13:13:59Z

Is there anyway to enable Social sign in with oAuth based authentication. At a minimum to enable easy registration and synching relationships?

jdubois · 2015-10-21T13:17:37Z

@jvence not yet, this is needs to be coded. This would be another issue.

jvence · 2015-10-21T13:22:33Z

@moifort Out of curiosity why doesn't social sign in work with oAuth based authentication?

moifort · 2015-10-21T13:23:40Z

I don't know, I don't looked more than that.

jvence · 2015-10-21T13:29:07Z

So why is it disabled when you create an oAuth app with jhipster?

jdubois · 2015-10-21T13:33:39Z

@jvence as I said, this is another issue -> at the moment we only provide the core feature, then we will improve it.
This other issue isn't created yet, let's first wait until we have some feedback on this one.

jahu · 2015-11-02T11:28:29Z

Guys, I've just started to play with social login with jHipster and after success login in facebook app I retrieve following exception:

[ERROR] pl.app.web.rest.SocialController - Exception creating social user:
org.springframework.social.UncategorizedApiException: (#3) Application does not have the capability to make this API call.

I believe it's related to changes of facebook API several days ago (spring-attic/spring-social-facebook#171)

Are those changed already fixed and merged to jHipster repo (and I am doing something wrong) or facebook login simply does not work at the moment (due to bug in spring social)?

EDIT: I've checked with some of my older facebook application which is not using latest facebook API and it is working OK, so the problem is definetally not yet solved.

Thibaut added 5 commits October 15, 2015 23:44

.

deb3b22

Add social signin with, Google, Facebook

4526f6b

Merge branch 'master' into feature/social

3b331c5

Merge branch 'master' of https://github.com/jhipster/generator-jhipster…

4750563

… into feature/social # Conflicts: # app/index.js # app/templates/_pom.xml

delete Facebook key because not working

56c77d2

moifort reviewed Oct 17, 2015
View reviewed changes

fix english social.json by default

a5f5d05

jdubois reviewed Oct 17, 2015
View reviewed changes

Thibaut added 4 commits October 17, 2015 14:17

add space on import and remove final key word

9479161

remove font-awesome

d86a0ea

change position of the question

26c6426

Revert "remove font-awesome"

01c26f3

This reverts commit d86a0ea.

jdubois reviewed Oct 18, 2015
View reviewed changes

Thibaut added 4 commits October 18, 2015 20:23

Merge branch 'master' of https://github.com/moifort/generator-jhipster …

3b3a9a8

…into feature/social

remove font-awesome and bootsrtap-social

3d71ee9

Merge branch 'master' of https://github.com/jhipster/generator-jhipster…

0dab5e1

… into feature/social # Conflicts: # app/index.js

Add error message when no keys for social connection

7fbae52

jdubois mentioned this pull request Oct 19, 2015

Add Gradle support for the Social login #2174

Closed

Thibaut added 3 commits October 19, 2015 17:08

Merge branch 'master' of https://github.com/jhipster/generator-jhipster…

d471568

… into feature/social # Conflicts: # app/index.js # app/templates/_pom.xml

Add gradle dependencies

91de8e5

Close #2174

add style in css with test

1e80d28

Thibaut added 2 commits October 20, 2015 02:04

Compatibility with DB Table naming

e6145ab

- add package-info - add cache - add repository + domain - only available for session authentification

Merge branch 'master' of https://github.com/jhipster/generator-jhipster…

12f4161

… into feature/social

jdubois reviewed Oct 20, 2015
View reviewed changes

Thibaut added 2 commits October 20, 2015 11:43

Add missing packageName

29bd005

Add test (From Spring) for ConnectionRepository

00bd03a

jdubois modified the milestone: 2.23.0 Oct 21, 2015

jdubois added a commit that referenced this pull request Oct 21, 2015

Merge pull request #2155 from moifort/feature/social

3f411dc

Add social sign in functionality (Google, Facebook, Twitter)

jdubois merged commit 3f411dc into jhipster:master Oct 21, 2015

pascalgrimaud mentioned this pull request Nov 4, 2015

Fix galician language with social #2276

Merged

moifort deleted the feature/social branch March 9, 2016 11:35

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add social sign in functionality (Google, Facebook, Twitter) #2155

Add social sign in functionality (Google, Facebook, Twitter) #2155

moifort commented Oct 16, 2015

moifort Oct 17, 2015

jdubois Oct 17, 2015

moifort Oct 17, 2015

jdubois Oct 17, 2015

moifort Oct 17, 2015

moifort Oct 17, 2015

mraible Oct 17, 2015

jdubois Oct 18, 2015

moifort Oct 19, 2015

jdubois Oct 18, 2015

jdubois Oct 18, 2015

moifort Oct 18, 2015

jdubois commented Oct 19, 2015

moifort commented Oct 19, 2015

jdubois commented Oct 19, 2015

moifort commented Oct 20, 2015

jdubois Oct 20, 2015

jdubois commented Oct 21, 2015

moifort commented Oct 21, 2015

jdubois commented Oct 21, 2015

moifort commented Oct 21, 2015

jdubois commented Oct 21, 2015

jdubois commented Oct 21, 2015

moifort commented Oct 21, 2015

jdubois commented Oct 21, 2015

moifort commented Oct 21, 2015

jvence commented Oct 21, 2015

jdubois commented Oct 21, 2015

jvence commented Oct 21, 2015

moifort commented Oct 21, 2015

jvence commented Oct 21, 2015

jdubois commented Oct 21, 2015

jahu commented Nov 2, 2015

		@@ -0,0 +1,116 @@
		package <%=packageName%>.social.config;

		import com.mycompany.myapp.social.repository.SocialUserConnectionRepository;

Add social sign in functionality (Google, Facebook, Twitter) #2155

Add social sign in functionality (Google, Facebook, Twitter) #2155

Conversation

moifort commented Oct 16, 2015

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jdubois commented Oct 19, 2015

moifort commented Oct 19, 2015

jdubois commented Oct 19, 2015

moifort commented Oct 20, 2015

Choose a reason for hiding this comment

jdubois commented Oct 21, 2015

moifort commented Oct 21, 2015

jdubois commented Oct 21, 2015

moifort commented Oct 21, 2015

jdubois commented Oct 21, 2015

jdubois commented Oct 21, 2015

moifort commented Oct 21, 2015

jdubois commented Oct 21, 2015

moifort commented Oct 21, 2015

jvence commented Oct 21, 2015

jdubois commented Oct 21, 2015

jvence commented Oct 21, 2015

moifort commented Oct 21, 2015

jvence commented Oct 21, 2015

jdubois commented Oct 21, 2015

jahu commented Nov 2, 2015