您查看的帮助内容对应的版本是:

Social login is the ability to present the option for a site visitor to sign in with their Facebook or Twitter account, thus including permitted Facebook or Twitter data in their AEM member profile.

2012-05-11 banner_notext

Social Login Overview

To include social login, it is required to create custom Facebook and/or Twitter applications.

While the Geometrixx sample provides sample Facebook and Twitter apps and cloud services, they are not available on a production website.

The required steps are :

  1. Enable OAuth authentication on all AEM publish instances
    • without OAuth enabled, attempts to login will fail
  2. Create a social app and cloud service
  3. Enable social login for a community site

There are two basic concepts :

  1. scope (permissions)
  2. fields (params)

Facebook Login

Facebook API Version

Social login and the Geometrixx Facebook sample were developed when the Facebook Graph API was version 1.0.

As of AEM 6.2 GA , social login was updated to work with the newer Facebook Graph API 2.5 version.

As of AEM 6.2 Communities FP1, social login is more supportive of newer versions by default, with further customizations possible.  

For Facebook Graph API version information, see the Facebook API changelog.

Create a Facebook App

A properly configured Facebook application is required to enable Facebook social login.  

Follow Facebook's instructions to create a new Facebook application at https://developers.facebook.com/apps/.  Changes to their instructions might not be reflected in the following information.

In general, as of Facebook API v2.7 :

  • Add a New Facebook App
    • for Platform, choose Website
      • for Site URL - enter http://<server>:<port>
    • for Display Name - enter a title for use as the Title of the Facebook connect service
    • for Category, recommended to choose Apps for Pages, but may be anything
    • Add Product : Facebook Login
      • for Valid OAuth redirect URIs - enter http://<server>:<port>

Note :  For development, http://localhost:4503 will work

Once the application has been created, locate the App ID and App Secret settings.  This information will be needed for configuring the Facebook cloud service.

Create a Facebook Connect Cloud Service

The Adobe Granite OAuth Application and Provider instance, instantiated by creating a cloud service configuration, identifies the Facebook application and the member group(s) to which the new users are added.

  • on the author instance, sign in with administrator privileges
  • from global navigation, choose Tools, Deployment, Cloud Services
  • locate Facebook Connect under Third Party Services
  • select Show Configurations
  • select [+] icon to the right of Available Configurations
chlImage_1
  • Parent Configuration
    Leave set to default of /etc/coudservices/facebookconnect
  • Title
    (Required) Enter a display title that identifies the Facebook App.  It is recommended to use the same name entered as the Display Name for the Facebook app.
  • Name
    (Optional) Enter a name for the saved cloud service configuration. If no name is provided, a valid node name will be generated from the Title
  • Template
    Facebook Connect Configuration
  • select Create

A dialog will open where identifiers from the created Facebook app are entered :

chlImage_1

Under the Settings tab :

  • App ID/API Key
    (Required)  Enter the App ID for the Facebook App.  This identifies the Adobe Granite OAuth Application and Provider instance created from the dialog.
  • App Secret
    (Required)  Enter the App Secret for the Facebook App
  • Create Users
    If checked, logging in with a Facebook account will create an AEM user entry and add them as a member to the selected user group(s).  Default is checked (strongly recommended).
  • Mask User IDs
    Leave unchecked.
  • Add to User Groups
    select Add User Group to choose one or more member groups for the community site to which users will be added.
    Note : groups may be added or removed at any time.
  • select OK

The result is an Adobe Granite OAuth Application and Provider instance which does not require further modification, unless adding additional scope (permissions).  The default scope is the standard permissions for Facebook login.  If additional scope is desired, it is necessary to edit the OSGI configuration directly.

The other tabs available in the UI are obsolete.  There were intended to set the scope and fields, but reflect the permissions available for the Facebook API v1.0.  The obsolete tabs are :  User Permissions | Friend Permissions | Extended Permissions | URL Parameters

AEM Communities Facebook OAuth Provider

The AEM Communities provider extends the Adobe Granite OAuth Application and Provider instance.

This provider will require editing in order to

  • disable tags
  • allow user updates 
  • add additional fields within scope
    • not all fields permitted by default are included by default

If editing is necessary, on each AEM publish instance :

  • sign in with administrator privileges
  • navigate to the Web Console
      for example, http://localhost:4503/system/console/configMgr
  • Locate AEM Communities Facebook OAuth Provider
  • select the pencil icon to open for edit
chlImage_1
  • OAuth Provider ID
    (Required) Default value is soco-facebook. Do not edit.
  • Cloud Service Config
    Default value is /etc/cloudservices/facebookconnect. Do not edit.
  • OAuth Provider Service Config
    Default value is /apps/social/facebookprovider/config/. Do not edit.
  • Enable Tags
    If not checked, no Facebook tags are generated and all complex data properties are ignored.
    However, AEM will continue to store basic profile properties under the user's Facebook node. Default is checked.
  • User Path
    Location in the repository where user data is stored. For a community site, to ensure permissions for members to view one another's profile, the path should be the default /home/users/community.
  • Enable fields
    If checked, the Fields listed are specified on the request to Facebook for user authentication and information. Default is checked.
  • Fields
    When Fields are enabled, the following fields are included when calling the Facebook Graph API.  The fields must be allowed within the scope defined in the cloud service configuration.  Additional fields may require approval by Facebook. Reference the Facebook Login Permissions section of the Facebook documentation.  The default fields added as parameters are :
    • id
    • name
    • first_name
    • last_name
    • link
    • locale
    • picture
    • timezone
    • updated_time
    • verified
    • email
  • Update User
    If checked, refreshes user data in the repository upon each login to reflect profile changes or additional data requested. Default is unchecked.

Next Steps

The next steps are the same for both Facebook and Twitter :

Twitter Login

Create a Twitter App

A properly configured Twitter application is required to enable Twitter social login.

Follow the latest instructions to create a new Twitter application at https://apps.twitter.com/.

In general :

  1. enter a Name that will identify your Twitter application to the users of your website
  2. enter a Description
  3. for WebSite - enter http://<server>/
  4. for Callback URL - enter http://<server>/

Note :  It is not neccessary to specify the port.
            For development, http://127.0.0.1/ will work

Once the application has been created, locate the Consumer (API) Key and Consumer (API) Secret.  This information will be needed for configuring the Twitter cloud service.

Permissions

In the Twitter application management's permissions section :

  • Access : choose 'Read only' 
    • other options are not supported
  • Additional Permissions : optionally choose 'Request email addresses from users'
    • Twitter's instructions note additional steps to take
    • if not chosen, the user's profile in AEM will not include their email address

The only REST request made for social login is to GET account/verify_credentials .

Create a Twitter Connect Cloud Service

The Adobe Granite OAuth Application and Provider instance, instantiated by creating a cloud service configuration, identifies the Twitter application and the member group(s) to which the new users are added.

  • on the author instance, sign in with administrator privileges
  • from global navigation, choose Tools, Deployment, Cloud Services
  • locate Twitter Connect under Third Party Services
  • select Show Configurations
  • select [+] icon to the right of Available Configurations
chlImage_1
  • Parent Configuration
    Leave set to default of /etc/coudservices/twitterconnect
  • Title
    (Required) Enter a display title that identifies the Twitter App
  • Name
    (Optional) Enter a name for the saved cloud service configuration. If no name is provided, a valid node name will be generated from the Title
  • Template
    Twitter Connect Configuration
  • select Create

A dialog will open where identifiers from the created Twitter App are entered :

chlImage_1

Under the Settings tab :

  • Consumer Key
    (Required)  Enter the Consumer (API) Key for the Twitter App
  • Consumer Secret
    (Required)  Enter the Consumer (API) Secret for the Twitter App
  • Create Users
    If checked, signing in with a Twitter account will create a user and add them as a member to the selected user group(s).  Default is checked (strongly recommended).
  • Mask User IDs
    Leave unchecked.
  • Add to User Groups
    select Add User Group to choose one or more member groups for the community site to which users will be added.
    Note : groups may be added or removed at any time.
  • select OK

The result is an instance of Adobe Granite OAuth Application and Provider which does not require further modification.  The default scope contains the standard permissions for Twitter login.

The other tab in the UI, URL Parameters, is obsolete and should be left empty.

AEM Communities Twitter OAuth Provider

The AEM Communities configuration extends the Adobe Granite OAuth Application and Provider instance.

This provider will require editing in order to

  • allow user updates 
  • request email addresses

If editing is necessary, on each AEM publish instance :

  • sign in with administrator privileges
  • navigate to the Web Console
      for example, http://localhost:4503/system/console/configMgr
  • Locate AEM Communities Twitter OAuth Provider
  • select the pencil icon to open for edit
chlImage_1
  • OAuth Provider ID
    (Required) Default value is soco-twitter. Do not edit.
  • Cloud Service Config
    Default value is /etc/cloudservices/twitterconnect. Do not edit.
  • OAuth Provider Service Config
    Default value is /apps/social/twitterprovider/config/. Do not edit.
  • User Path
    Location in the repository where user data is stored. For a community site, to ensure permissions for members to view one another's profile, the path should be the default /home/users/community.
  • Enable Params
    If checked, in addition to the default URL parameters (not listed), the following URL parameters will be included on the request to Twitter for user authentication and information. Default is checked.
  • URL Parmeters
    When params are enabled, the following parameters are additionally included when calling the Twitter API.  These are key=value pairs for which permission has been obtained for the Twitter application.  For example, to request the user's email address (not included by default), the parameter would be :
    • include_email=true
  • Update User
    If checked, refreshes user data in the repository upon each login to reflect profile changes or additional data requested. Default is unchecked.

Next Steps

The next steps are the same for both Facebook and Twitter :

Publish Cloud Services

The Twitter Connect and Facebook Connect cloud services are not automatically published when a community site is published.

To ensure the cloud services are published :

  • with administrator privileges
  • from global navigation : Tools > Operations > Configuration
    • opens the classic UI for tools : http://localhost:4502/miscadmin
  • in left panel
    • locate Tools / Cloud Services Configurations folder
    • select Facebook Connect or Twitter Connect
  • in right panel
    • select the configuration, for example, Engagement Community Facebook App
    • select Activate
chlImage_1

Modifying a Cloud Service

If the Facebook or Twitter cloud service is modified, it is necessary to Deactivate and then Activate it in order for the OSGI configurations to be properly updated on all publish instances.

Enable Social Login

AEM Communities Sites Console

Once a cloud service is configured, it may be selected for the relevant Social Login setting for a community site using the User Management Settings sub-panel during community site creation or management.

chlImage_1

注意:

When the Geometrixx samples are present, social login may be configured with these sample cloud services :

  • Geometrixx Outdoors Facebook App
  • Geometrixx Outdoors Twitter App

For a production server, these sample cloud services will not exist.  A production AEM instance should be launched with the nosamplecontent runmode, in which case the Geometrixx Outdoors cloud services will no longer be present.

Be sure to enable OAuth authentication on all AEM publish instances.

AEM Sites Console

Using the AEM Sites console, a configured Facebook or Twitter cloud service configuration is applied to the root of the target website :

  • open the AEM Site in author edit mode
  • select the Page Information icon
  • select Open Properties
  • select the CLOUD SERVICES tab
  • under Cloud Service Configurations, select Add Configuration
  • select Facebook Connect or Twitter Connect
  • under Configuration Reference, use the drop-down list to select the name of the configured cloud service
    • for example "Engagement Community Facebook App"
  • select the Check icon
apply
properties

Test Social Login

  • ensure Adobe Granite OAuth Authentication Handler has been enabled on all publish instances
  • ensure the cloud services have been published
  • ensure the community site has been published
  • launch the published site in a browser
        for example, http://localhost:4503/content/sites/engage/en.html
  • select Login In
  • select either Sign in with Facebook or Sign in with Twitter
  • if not already logged into Facebook or Twitter, log in with the appropriate credentials
  • it may be necessary to grant permission depending on the dialog displayed by the Facebook or Twitter app
  • notice that the toolbar at the top of the page is updated to reflect the successful login
  • select Profile : the Profile page displays the user's avatar image, first name, and last name.  It also displays the information from the Facebook or Twitter profile according to the fields/params permitted.

AEM Platform OAuth Configurations

Adobe Granite OAuth Authentication Handler

The Adobe Granite OAuth Authentication Handler is not enabled by default and must be enabled on all AEM publish instances.

To enable the authentication handler on publish, simply open the OSGi config and save it :

  • sign in with administrator privileges
  • navigate to the Web Console
      for example, http://localhost:4503/system/console/configMgr
  • Locate Adobe Granite OAuth Authentication Handler
  • select to open the configuration for edit
  • select Save
chlImage_1

注意:

Be careful to not confuse the authentication handler with a Facebook or Twitter instance of Adobe Granite OAuth Application and Provider.

chlImage_1

Adobe Granite OAuth Application and Provider

When a cloud service for Facebook or Twitter is created, an instance of Adobe Granite OAuth Authentication Handler is created.

To locate the created instance for a Facebook or Twitter app :

  • sign in with administrator privileges
  • navigate to the Web Console
    for example, http://localhost:4503/system/console/configMgr
  • Locate Adobe Granite OAuth Application and Provider
    • Locate the instance where Client ID matches the App ID
chlImage_1

Most properties of the config should be left unchanaged. Of interest are the following :

  • Config ID
    (Required) OAuth configuration IDs must be unique. Will be auto-generated when cloud service was created.
  • Client ID
    (Required) The application ID provided when the cloud service was created.
  • Client Secret
    (Required) The application secret provided when the cloud service was created.
  • Scope
    (Optional) Additional scope for what is permitted to be requested from the provider. The default scope covers the permissions necessary for providing social authentication and profile data.
  • Provider ID
    (Required) The provider ID for AEM Communities is set when the cloud service was created.  Do not edit.  For Facebook Connect, the value is soco-facebook.  For Twitter Connect, the value is soco-twitter.
  • Groups
    (Recommended) One or more member groups to which created users are added. For AEM Communities, the member group for the community site is recommended to be listed.
  • Callback URL
    (Optional) URL configured with the OAuth providers to redirect the client back. Use a relative url to use the host of the original request. Leave empty to use the originally requested URL instead. Suffix "/callback/j_security_check" is automatically appended to this url. Note: the domain for the callback must be registered with the provider (Facebook or Twitter).

Oauth User Traversal Performance

For community sites that may see hundreds of thousands of users register using their Facebook or Twitter login, the traversal performance of the query performed when a site visitor uses their social login, may be improved by adding the following Oak index.  

If traversal warnings are seen in the logs, it is recommended to add this index.

On an author instance, signed in with administrative privileges :

  1. from global navigation : select Tools, CRXDE Lite
  2. create an index named ntBaseLucene-oauth from a copy of ntBaseLucene :
    • under node /oak:index
    • select node ntBaseLucene
    • select Copy
    • select /oak:index
    • select Paste
    • rename Copy of ntBaseLucene to  ntBaseLucene-oauth
  3. modify the properties of node ntBaseLucene-oauth :
    • indexPath : /oak:index/ntBaseLucene-oauth
    • name oauthid-123*
    • reindex : true
    • reindexCount : 1
  4. under node /oak:index/ntBaseLucene-oauth/indexRules/nt:base/properties :
    • delete all child nodes, except for cqTags :
    • rename cqTags to oauthid-123*
    • modify the properties of node oauthid-123* :
      • name : oauthid-123*
  • select Save All

 * For the name oauthid-123, replace 123 with the Facebook App ID or Twitter Consumer (API) Key that is the value of the Client ID in the Adobe Granite OAuth Application and Provider configuration.

chlImage_1

For additional information and tools, refer to Oak Queries and Indexing.

Custom OAuth Provider

It is possible to create a social login for other social applications.

Available on GitHub is an example of a basic implementation of an OAuth provider for LinkedIn (AEM Communities Sample OAuth Provider).  To integrate this OAuth provider into your site, a new cloud configuration is needed along with modification of the login script to include a new social login button.

Dispatcher Configuration

本产品经 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 许可  Twitter™ 与 Facebook 中的内容不在 Creative Commons 的条款约束之下。

法律声明   |   在线隐私策略