Facebook Login Integration in AEM

[akshitaa8272040]

Hi,

I have come across an issue while integrating Facebook login with AEM. 

I took reference from below link

https://docs.adobe.com/docs/en/cq/5-6-1/administering/social_communities/social_connect.html

Although everything is working fine but on welcome page it is not displaying the logged in user name the way it is working for Geometrixx Outdoors website.

Instead it is displaiying the ID only.

Any suggestions who have already worked on this integration? :)

[Opkar_Gill]

When you view the user created in AEM, does the user have a first and last name?

Regards,

Opkar

[akshitaa8272040]

@Opkar,

No I can't see. 

But, when I am loggedin through Geomatrixx Outdoors actual configurations , user profile properties firstname, lastname and email are getting updated automatically. Hence it shows up in the welcome page.

In my case, I have to manually add the first name and lastname of the user in order to display the loggedin username on the welcome page else it will display the id only.

[Jitendra_S_Toma]

@akshitaa82720401 ,

When you are logged-in with social login like Facebook or Twitter, New profile gets created for that user in AEM. But, User profile would be different from what we have in AEM.

There isn't first name & last name in user profile. Instead, it has givenName & family name. So, you want to show first name, fetch givenName otherwise user ID will be displayed.

Let me know if this is clear to you.

Jitendra

[akshitaa8272040]

@Jitendra,

Thanks for the reply.

I am aware of that. In crx console, we have givenName & familyName properties for the newly created user. Those properties are getting populated from the firstname and last name property of the user profile details in useradmin console.

However the question is different. 

I am not doing any code changes, only thing is I am creating a new Facebook Connect Configuration in miscadmin->facebookconnect and selecting this new configuration in Geomatrixx Outdoors Website page properties->Cloud Services tab. 

So that ways I am connecting it with my facebook app id and not Geomatrixx default id.

But the problem is givenName and familyName are not getting populated automatically.Due to which only ID is getting displayed. However if I manually add these details, username is getting displayed on welcome page

I hope you understood what issue I am getting. Also, I have followed the steps from below link::::

https://docs.adobe.com/docs/en/cq/5-6-1/administering/social_communities/social_connect.html

Regards,

Akshita

[Jitendra_S_Toma]

@Akshita,

Thanks for explaining in details. I think, I understand now. 

As you know, When you do cloud configuration, in the cloud config dialog, there are checkboxes for the properties which you want to have when profile gets imported into AEM. 

Did you verify if the geometrixx & your new facebook connect has different selection on the checkboxes?.  Kindly provide snapshot if it is possible.

Jitendra

[akshitaa8272040]

@Jitendra

Geometrixx have around 10 checkox selected by default. For my new facebook connect configuration I am selecting the below permissions:

user_about_me, user_birthday, user_interests, user_likes 

I guess from user_about_me permission only, we are getting the user details like first name, last name, email, etc.

That should not be the issue because I am also selecting this checkbox. :(

Akshita

[JK_Kendall]

Hi Akshita,

Facebook and Twitter have their own instructions for creating apps suitable for a login to a web site.  

I'm guessing you're on AEM 5.6.1, but you might want to glance through 

https://docs.adobe.com/docs/en/aem/6-1/administer/communities/social-login.html

(There is a known issue that links to 6.1 versions don't appear correctly if the path has changed more than simply replacing '5-6-1' or '6-0' with '6-1'.)

- JK

[akshitaa8272040]

@JK

Thanks for the new link. I am working on AEM6.1.

Sorry But I didn't understood what you said in the below line:

(There is a known issue that links to 6.1 versions don't appear correctly if the path has changed more than simply replacing '5-6-1' or '6-0' with '6-1'.)

Could you please explain it to me as to which step I am missing w.r.t AEM 6.1

[JK_Kendall]

akshitaa82720401 wrote...

@JK

Thanks for the new link. I am working on AEM6.1.

Sorry But I didn't understood what you said in the below line:

(There is a known issue that links to 6.1 versions don't appear correctly if the path has changed more than simply replacing '5-6-1' or '6-0' with '6-1'.)

Could you please explain it to me as to which step I am missing w.r.t AEM 6.1

It was only about the online documentation - that if you found the facebook documentation for 5.6.1 or 6.0, you would not have seen the link to 6.1.  That's all.

If you're using AEM 6.1, then definitely the 6.1 documentation should be followed.

Would you provide a screenshot of 

 1) your facebook app configuration

 2) the facebook profile which is signing in for first time

 3) the resulting userid created in AEM

- JK

[akshitaa8272040]

@JK 

Please find the screenshots as asked.

Akshita

[JK_Kendall]

I couldn't reproduce what you're seeing.

I just followed the steps on http://docs.adobe.com/docs/en/aem/6-1/administer/communities/social-login.html

 * on author and publish : from the Web Console, activated the config named "Adobe Granite OAuth Authentication Handler" by simply opening the config and saving it (no more, no less)

* on facebook's site : created a facebook app for a website

* on author : created a cloud service for that app on author

* on author : published the cloud service

* on author : edited the properties of geometrixx-outdoors to change the facebook cloud service to my new one

* on author : published geometrixx-outdoors

* on publish : went to geometrixx-outdoors and signed in with facebook (not the one that created the app)

* on publish : see my username on the screen...

* on publish : logout and login as admin/admin to access security console

see attached screenshots 

So, I'm not sure where you went wrong... 

- JK

[JK_Kendall]

re-upload cloud-service-config

[akshitaa8272040]

@JK

I am doing exactly what you have mentioned in the steps above.

Not sure why it is not working for me. :(

Akshita

[JK_Kendall]

My next thought is a problem with permissions.

WAG : Maybe your Facebook app won't allow reading first_name/last_name (public_profile)?

  On developers.facebook.com, open your app, and under App Review menu

• Approved Items should include, by default, email and public_profile

In CRXDE, look further into /home/users/facebook/..., e.g.

• profile/facebook node properties
• rep:policy/allow node properties

See my screenshots of those node properties.

You might need to open a support ticket.

- JK

[akshitaa8272040]

Hi JK,

Could you please let me know if your,

1)new Facebook Configuration has a property named jcr:mixinType as rep:AccessControllable

2)While creating facebook app id I can see in your screenshot that you have not enter the domain name. Still you were able to login. In my case it was throwing an error so I added localhost as domain

3)If possible please let me know what all setting you did while creating app id in developers.facebook.com

Regarding the questions you asked:

1)In my facebook app, public_profile, email,etc are approved by default.

2)facebook node doesn't have all the properties like yours.

3)allow node has all the properties as in your screenshot.

I guess app id creation is the part where I am missing some settings.

Akshita

[JK_Kendall]

Interesting - my /etc/cloudservices/facebookconnect/engage-facebook-app node does not have the property rep:AccessControllable, but the equivalent geometrixx-outdoorsfacebookapp node does.  

The only hotfixes I have installed on AEM 6.1 are 6640 and 6680 (per Communities deploy).  I also have Communities FP3, but that would not affect the Cloud Services platform feature.

Yes, I should have localhost set as App Domain, per the doc instructions.

An engineer once said Facebook doesn't allow localhost, while another said it was OK.

- JK

[akshitaa8272040]

@JK 

One update on the issue :

Found that it is working as expected with Facebook API v2.3 and below. The issue exists for latest Facebook API v2.5.

Below are some of the findings:

1. OAuth 2.0 implementation for facebook connect is done via provider api by Adobe
2. “FacebookProviderImpl” class is responsible for fetching and storing Facebook User details into AEM. However, this implementation is not able to fetch first_name, last_name and various other details from Facebook profile due to API changes.
3. Tested for Facebook API v2.0(working) and v2.5(not working)

-Akshita

[JK_Kendall]

akshitaa82720401 wrote...

@JK 

One update on the issue :

Found that it is working as expected with Facebook API v2.3 and below. The issue exists for latest Facebook API v2.5.

Below are some of the findings:

1. OAuth 2.0 implementation for facebook connect is done via provider api by Adobe
2. “FacebookProviderImpl” class is responsible for fetching and storing Facebook User details into AEM. However, this implementation is not able to fetch first_name, last_name and various other details from Facebook profile due to API changes.
3. Tested for Facebook API v2.0(working) and v2.5(not working)

-Akshita

Hi Akshita,

Your update is very much appreciated!  I'll see about putting a note on our doc page.

- JK

[akshitaa8272040]

@JK

That would be great. Thanks!! :)

[jayb43402168]

JK Kendall wrote...

akshitaa82720401 wrote...

@JK 

One update on the issue :

Found that it is working as expected with Facebook API v2.3 and below. The issue exists for latest Facebook API v2.5.

Below are some of the findings:

1. OAuth 2.0 implementation for facebook connect is done via provider api by Adobe
2. “FacebookProviderImpl” class is responsible for fetching and storing Facebook User details into AEM. However, this implementation is not able to fetch first_name, last_name and various other details from Facebook profile due to API changes.
3. Tested for Facebook API v2.0(working) and v2.5(not working)

-Akshita

Hi Akshita,

Your update is very much appreciated!  I'll see about putting a note on our doc page.

- JK

Hi there.  I am trying to look into fixing this; however, I have setup an AEM instance to test this, but I don't see the issue.

I registered with my FB account, and my full name appears in the masthead area of the geometrixx-outdoors site.  Also, if I dig into my profile, I see both my first and last name.

Can you describe the scenario to allow me to reproduce what you're seeing.

Thanks in advance.

-Jay