Connexion aux réseaux sociaux avec Facebook et Twitter

La connexion sociale permet de présenter à un visiteur de site l’option de connexion avec son compte Facebook ou Twitter. Par conséquent, inclure les données Facebook ou Twitter autorisées dans leur profil membre AEM.

socialloginweretail

Pour inclure la connexion sociale, il est nécessaire de créer des applications Facebook et Twitter personnalisées.

Bien que l’exemple de vente au détail Web fournisse des exemples d’applications Facebook et Twitter et de services cloud, elles ne sont pas disponibles sur un site Web de production.

Les étapes requises sont les suivantes :

Activez l’ authentification OAuth sur toutes les instances de publication AEM.

Si OAuth n'est pas activé, les tentatives de connexion échouent.
Créez une application sociale et un service cloud.
- Pour prendre en charge la connexion à Facebook :
  - Créez une application Facebook.
  - Créez et publiez un service cloud Facebook Connect.
- Pour prendre en charge la connexion avec Twitter :
  - Créez une application Twitter.
  - Créez et publiez un service cloud Twitter Connect.
Activation de la connexion sociale pour un site communautaire.

Il existe deux concepts de base :

Scope (permissions) spécifie les données que l'application est autorisée à demander.
- Les instances Facebook et Twitter Adobe Granite OAuth Application et Provider, par défaut, incluent les autorisations de base de l’application dans leur étendue.
Fields (params) spécifie les données réelles demandées à l’aide des paramètres d’URL.
- Ces champs sont spécifiés dans Fournisseur OAuth Facebook AEM Communities et Fournisseur OAuth Twitter AEM Communities.
- Les champs par défaut sont suffisants pour la plupart des cas d’utilisation, mais peuvent être modifiés.

Version de l'API Facebook

La connexion aux réseaux sociaux et l’exemple Facebook de vente au détail ont été développés lorsque l’API graphique Facebook était la version 1.0.
À la date d'AEM 6.4 GA et AEM 6.3 SP1, la connexion sociale a été mise à jour pour fonctionner avec la nouvelle version de l'API graphique Facebook 2.5.

REMARQUE

Pour les versions AEM plus anciennes, si vous rencontrez une exception dans les journaux Impossible d'extraire un jeton de cette, effectuez la mise à niveau vers le CFP le plus récent pour cette AEM version.

Pour plus d’informations sur la version de l’API de graphique Facebook, voir le changelog d’API de Facebook.

Créer une application Facebook

Une application Facebook correctement configurée est nécessaire pour activer la connexion sociale Facebook.

Pour créer une application Facebook, suivez les instructions de Facebook à l’adresse https://developers.facebook.com/apps/. Les modifications apportées à leurs instructions ne sont pas répercutées dans les informations suivantes.

En général, à partir de l’API Facebook v2.7 :

Ajouter une nouvelle application Facebook
- Pour Plateforme, choisissez Site Web :
  - Pour URL du site, saisissez https://<server>:<port>.
  - Pour Nom d’affichage, saisissez un titre à utiliser comme titre du service de connexion Facebook.
  - Pour Catégorie, il est recommandé de choisir Applications pour les pages, mais cela peut être tout.
  - Ajouter le produit : Connexion Facebook
  - Pour URI de redirection OAuth valides, saisissez https://<server>:<port>.

REMARQUE

Pour le développement, http://localhost:4503 fonctionne.

Une fois l’application créée, recherchez les paramètres ID d’application et Secret d’application. Ces informations sont requises pour configurer le service cloud Facebook.

Créer un Cloud Service de connexion Facebook

L'instance Adobe Granite OAuth Application and Provider, instanciée par la création d'une configuration de service cloud, identifie l'application Facebook et le ou les groupes de membres auxquels les nouveaux utilisateurs sont ajoutés.

Sur l’instance d’auteur AEM, connectez-vous avec les droits d’administrateur.
Dans la navigation globale, sélectionnez Outils > Cloud Services > Configuration de connexion Facebook Social.
Sélectionnez le chemin de contexte de configuration .

Le chemin de contexte doit être identique au chemin de configuration du cloud que vous avez sélectionné lors de la création/modification d’un site communautaire.
Vérifiez si votre chemin de contexte est activé pour créer des services cloud en dessous.
Accédez à Outils > Général > Navigateur de configuration. Sélectionnez votre contexte et modifiez les propriétés. Activez les Configurations de cloud si elles ne sont pas encore activées.
- Pour plus d’informations, consultez la documentation de Navigateur de configuration.
Créez/ modifiez la configuration du service cloud Facebook.
- Titre (Obligatoire) Saisissez un titre d’affichage qui identifie l’application Facebook. Il est recommandé d’utiliser le même nom saisi que le nom d’affichage pour l’application Facebook.
- ID d’application/clé d’API (Obligatoire) Saisissez l’ ID d’ applicationpour l’application Facebook. Ceci identifie l'instance Adobe Granite OAuth Application et Provider créée à partir de la boîte de dialogue.
- Secret de l’application (Obligatoire) Saisissez le Secrétariat de l’ application pour l’application Facebook.
- Créer des utilisateursSi cette case est cochée, la connexion avec un compte Facebook créera une entrée d'utilisateur AEM et l'ajoutera en tant que membre au ou aux groupes d'utilisateurs sélectionnés. La valeur par défaut est cochée (fortement recommandé).
- Masquer les identifiants utilisateur : Laissez-le désélectionné.
- Adresse électronique de l'étendue : l’ID d’adresse électronique de l’utilisateur doit être récupéré à partir de Facebook.
- Ajouter aux groupes d’utilisateurs sélectionnez Ajouter un groupe d’utilisateurs pour choisir un ou plusieurs groupes de membres pour le site communautaire auquel les utilisateurs seront ajoutés.
REMARQUE

Les groupes peuvent être ajoutés ou supprimés à tout moment. Mais les adhésions des utilisateurs existants ne seront pas affectées. L’abonnement automatique s’applique uniquement aux nouveaux utilisateurs créés après la mise à jour de ce champ. Pour les sites où les utilisateurs anonymes sont désactivés, choisissez d’ajouter des utilisateurs au groupe de membres de la communauté correspondant destiné à ce site communautaire fermé.
- Sélectionnez SAVE.
- Publication.

Le résultat est une instance Adobe Granite OAuth Application et Provider qui ne nécessite pas de modification supplémentaire à moins d'ajouter une étendue supplémentaire (autorisations). La portée par défaut est les autorisations standard pour la connexion à Facebook. Si une étendue supplémentaire est souhaitée, il est nécessaire de modifier directement la configuration OSGI. Si des modifications sont effectuées directement par le biais du système/de la console, évitez de modifier les configurations du service cloud à partir de l’interface utilisateur tactile afin d’éviter tout remplacement.

Fournisseur OAuth Facebook AEM Communities

Le fournisseur AEM Communities étend l’instance de l’application OAuth Granite de l’Adobe et l’instance Provider.

Ce fournisseur devra être modifié pour :

Autoriser les mises à jour des utilisateurs
Ajouter des champs supplémentaires dans scope
- Tous les champs autorisés par défaut ne sont pas inclus par défaut.

Si des modifications sont nécessaires, sur chaque instance de publication AEM :

Connectez-vous avec des droits d’administrateur.
Accédez à la console Web. Par exemple, http://localhost:4503/system/console/configMgr.
Localisez le fournisseur AEM Communities Facebook OAuth.
Sélectionnez l'icône représentant un crayon à ouvrir pour modification.
- ID du fournisseur OAuth
  
  (Obligatoire) La valeur par défaut est soco-facebook. Ne modifiez pas.
- Configuration du Cloud Service
  
  La valeur par défaut est /etc/ cloudservices / facebookconnect. Ne modifiez pas.
- Configuration du service du fournisseur OAuth
  
  La valeur par défaut est /apps/social/facebookprovider/config/. Ne modifiez pas.
- Activer les balises
  
  Ne pas modifier.
- Chemin d’accès utilisateur
  
  Emplacement dans le référentiel dans lequel les données utilisateur sont stockées. Pour un site communautaire, afin d’assurer aux membres l’autorisation de vue de leur profil, le chemin d’accès doit être le chemin par défaut /home/users/community.
- Activer les champs
  
  Si cette case est cochée, les champs répertoriés sont spécifiés dans la demande à Facebook pour l’authentification et les informations de l’utilisateur. La valeur par défaut est désélectionnée.
- Champs
  
  Lorsque l’option Champs est activée, les champs suivants sont inclus lors de l’appel de l’API graphique Facebook. Les champs doivent être autorisés dans l’étendue définie dans la configuration du service cloud. Les champs supplémentaires peuvent nécessiter l’approbation de Facebook. Reportez-vous à la section Autorisations de connexion Facebook de la documentation Facebook. Les champs par défaut ajoutés en tant que paramètres sont les suivants :
  - id
  - name
  - first_name
  - last_name
  - lien
  - paramètres régionaux
  - picture
  - timezone
  - update_time
  - vérifié
  - email
Si un champ est ajouté ou modifié, mettez à jour la configuration correspondante du gestionnaire de synchronisation par défaut pour corriger le mappage.
- Mettre à jour l'utilisateur
  
  Si cette option est cochée, actualise les données utilisateur dans le référentiel à chaque connexion afin de refléter les modifications de profil ou les données supplémentaires demandées. La valeur par défaut est désélectionnée.

Étapes suivantes

Les étapes suivantes sont les mêmes pour Facebook et Twitter :

Publication des configurations de service cloud
Activation pour un site communautaire

Créer une application Twitter

Une application Twitter configurée est requise pour activer la connexion sociale Twitter.

Suivez les dernières instructions pour créer une nouvelle application Twitter à l’adresse https://apps.twitter.com.

En général :

Entrez un nom qui identifie votre application Twitter aux utilisateurs de votre site Web.
Saisissez une description.
Pour site Web - entrez https://<server>.
Pour URL de rappel - saisissez https://server.

REMARQUE

Il n'est pas nécessaire de spécifier le port.

Pour le développement, https://127.0.0.1/ fonctionne.
Une fois l'application créée, recherchez la clé Consommateur (API) et la clé Consommateur (API). Ces informations seront nécessaires pour configurer le service de cloud Twitter.

Autorisations

Dans la section des autorisations de la gestion des applications Twitter, procédez comme suit :

Accès : Sélectionnez Read only.
- Les autres options ne sont pas prises en charge
Autres autorisations : Vous pouvez également choisir Request email addresses from users.
- Si cette option n’est pas sélectionnée, l’profil utilisateur AEM n’inclut pas son adresse électronique.
- Les instructions de Twitter indiquent les étapes supplémentaires à suivre.

La seule demande REST envoyée pour la connexion sociale est de GET account/verify credentials.

Créer un Cloud Service Twitter Connect

L'instance Adobe Granite OAuth Application and Provider, instanciée par la création d'une configuration de service cloud, identifie l'application Twitter et le ou les groupes de membres auxquels les nouveaux utilisateurs sont ajoutés.

Sur l’instance d’auteur, connectez-vous avec les droits d’administrateur.
Dans la navigation globale, sélectionnez Outils > Cloud Services > Configuration de connexion Twitter Social.
Sélectionnez la configuration context path.

Le chemin de contexte doit être identique au chemin de configuration du cloud que vous avez sélectionné lors de la création/modification d’un site communautaire.
Vérifiez si votre chemin de contexte est activé pour créer des services cloud en dessous.
Accédez à Outils > Général > Navigateur de configuration. Sélectionnez votre contexte et modifiez les propriétés. Activez les Configurations de cloud si elles ne sont pas encore activées.
- Pour plus d’informations, consultez la documentation de Navigateur de configuration.
Créez/modifiez la configuration du service cloud Twitter.
- Titre
  
  (Obligatoire) Entrez un titre d’affichage qui identifie l’application Twitter. Il est recommandé d’utiliser le même nom saisi que le nom d’affichage pour l’application Twitter.
- Clé du client
  
  (Obligatoire) Saisissez la clé du client (API) pour l’application Twitter. Ceci identifie l'instance Adobe Granite OAuth Application et Provider créée à partir de la boîte de dialogue.
- Secret de consommateur
  
  (Obligatoire) Saisissez la Secret Consommateur(API) pour l’application Twitter.
- Créer des utilisateurs
  
  Si cette case est cochée, la connexion avec un compte Twitter créera une entrée d’utilisateur AEM et l’ajoutera en tant que membre au ou aux groupes d’utilisateurs sélectionnés. La valeur par défaut est cochée (fortement recommandé).
- Masquer les identifiants utilisateur
  
  Laissez-le désélectionné.
- Ajouter aux groupes d’utilisateurs
  
  Sélectionnez Ajouter un groupe d’utilisateurs pour sélectionner un ou plusieurs groupes de membres pour le site communautaire auquel les utilisateurs seront ajoutés.
REMARQUE

Les groupes peuvent être ajoutés ou supprimés à tout moment. Mais les adhésions des utilisateurs existants ne seront pas affectées. L’abonnement automatique s’applique uniquement aux nouveaux utilisateurs créés après la mise à jour de ce champ. Pour les sites sur lesquels les utilisateurs anonymes sont désactivés, ajoutez des utilisateurs au groupe de membres de la communauté correspondant destiné à ce site de la communauté fermé.
Sélectionnez SAVE et Publier.

Le résultat est une instance Adobe Granite OAuth Application et Provider qui ne nécessite pas de modification supplémentaire. La portée par défaut est les autorisations standard pour la connexion à Twitter.

Fournisseur OAuth Twitter AEM Communities

La configuration AEM Communities étend l'instance de l'application OAuth Granite de l'Adobe et de Provider. Ce fournisseur devra être modifié pour autoriser les mises à jour des utilisateurs.

Si des modifications sont nécessaires, sur chaque instance de publication AEM :

Connectez-vous avec des droits d’administrateur.
Accédez à la console Web.

Par exemple, http://localhost:4503/system/console/configMgr.
Localisez le fournisseur OAuth Twitter AEM Communities.
Sélectionnez l'icône représentant un crayon à ouvrir pour modification.
- ID du fournisseur OAuth
(Obligatoire) La valeur par défaut est soco-twitter. Ne modifiez pas.
- Configuration du Cloud Service
  
  La valeur par défaut est conf. Ne modifiez pas.
- Configuration du service du fournisseur OAuth
  
  La valeur par défaut est /apps/social/twitterprovider/config/. Ne modifiez pas.
- Chemin d’accès utilisateur
  
  Emplacement dans le référentiel dans lequel les données utilisateur sont stockées. Pour un site communautaire, afin d’assurer aux membres l’autorisation de vue de leur profil, le chemin d’accès doit être le /home/users/community par défaut.
- Activer les paramètres ne pas modifier
- Les paramètres d’URL ne sont pas modifiés
- Mettre à jour l'utilisateur
  
  Si cette option est cochée, actualise les données utilisateur dans le référentiel à chaque connexion afin de refléter les modifications de profil ou les données supplémentaires demandées. La valeur par défaut est désélectionnée.

Étapes suivantes

Les étapes suivantes sont les mêmes pour Facebook et Twitter :

Publication des configurations de service cloud
Activation pour un site communautaire

Console Sites AEM Communities

Une fois qu’un service cloud est configuré, il peut être activé pour le paramètre Connexion sociale approprié pour un site communautaire à l’aide du sous-panneau Paramètres de gestion des utilisateurs pendant la création du site communautaire ou la gestion.

Sélectionnez le contexte de configuration de votre site dans lequel vous avez enregistré vos configurations de connexion sociale.
Sous l’onglet Général, définissez les configurations de cloud.
Sous l’onglet Paramètres, activez Connexions aux réseaux sociaux et Enregistrer.

Assurez-vous que Adobe Granite OAuth Authentication Handler a été activé sur toutes les instances de publication.
Vérifiez que les services cloud ont été publiés.
Vérifier que le site communautaire a été publié.
Lancez le site publié dans un navigateur.
Par exemple, http://localhost:4503/content/sites/engage/en.html
Sélectionnez Connexion.
Sélectionnez Se connecter avec Facebook ou Se connecter avec Twitter.
Si vous n’êtes pas encore connecté à Facebook ou Twitter, connectez-vous avec les informations d’identification appropriées.
Il peut s’avérer nécessaire d’accorder une autorisation en fonction de la boîte de dialogue affichée par l’application Facebook ou Twitter.
Notez que la barre d’outils située en haut de la page est mise à jour pour refléter la connexion réussie.
Sélectionnez Profil : la page de Profil affiche l’avatar, le prénom et le nom de l’utilisateur. Il affiche également les informations du profil Facebook ou Twitter en fonction des champs/paramètres autorisés.

Configurations OAuth de la plateforme AEM

Gestionnaire d'authentification OAuth Granite Adobe

Adobe Granite OAuth Authentication Handler n'est pas activé par défaut et doit être activé sur toutes les instances de publication AEM.

Pour activer le gestionnaire d’authentification lors de la publication, il vous suffit d’ouvrir la configuration OSGi et de l’enregistrer :

Connectez-vous avec des droits d’administrateur.
Accédez à la console Web.
Par exemple, http://localhost:4503/system/console/configMgr
Recherchez Adobe Granite OAuth Authentication Handler.
Sélectionnez cette option pour ouvrir la configuration à modifier.
Sélectionnez Enregistrer.

graniteoauth

ATTENTION

Veillez à ne pas confondre le gestionnaire d’authentification avec une instance Facebook ou Twitter de Adobe Granite OAuth Application et Provider.

graniteoauth1

Adobe Granite OAuth Application et fournisseur

Lorsqu’un service cloud pour Facebook ou Twitter est créé, une instance de Adobe Granite OAuth Authentication Handler est créée.

Pour localiser l’instance créée pour une application Facebook ou Twitter :

Connectez-vous avec des droits d’administrateur.
Accédez à la console Web.

Par exemple, http://localhost:4503/system/console/configMgr.
Localisez l’application et le fournisseur OAuth Granite Adobe.
- Localisez l’instance où ID client correspond à ID d’application.
  
  A l’exception des propriétés suivantes, ne modifiez pas les autres propriétés de la configuration :
- ID de configuration
  
  (Obligatoire) Les ID de configuration OAuth doivent être uniques. Généré automatiquement lors de la création du service cloud.
- ID client
  
  (Obligatoire) ID de l'application fourni lors de la création du service cloud.
- Secret client
  
  (Obligatoire) clé secrète fournie lors de la création du service cloud.
- Portée
  
  (Facultatif) Le fournisseur peut demander à un autre fournisseur d’indiquer la portée de ce qui est autorisé. La portée par défaut couvre les autorisations nécessaires pour fournir l’authentification sociale et les données de profil.
- ID du fournisseur
  
  (Obligatoire) L’ID de fournisseur pour AEM Communities est défini lors de la création du service cloud. Ne modifiez pas. Pour Facebook Connect, la valeur est soco-facebook. Pour Twitter Connect, la valeur est soco-twitter.
- Groupes
  
  (Recommandé) Un ou plusieurs groupes de membres auxquels des utilisateurs créés sont ajoutés. Pour AEM Communities, il est recommandé de liste du groupe de membres pour le site communautaire.
- URL de rappel
  
  (Facultatif) URL configurée avec les fournisseurs OAuth pour rediriger le client. Utilisez une URL relative pour utiliser l’hôte de la requête d’origine. Laissez vide pour utiliser l’URL demandée d’origine à la place. Le suffixe "/callback/j_security_check" est automatiquement ajouté à cette URL.
REMARQUE

Le domaine du rappel doit être enregistré auprès du fournisseur (Facebook ou Twitter).

Pour chaque configuration du gestionnaire d’authentification OAuth, deux configurations supplémentaires sont créées dans l’instance :

Gestionnaire de synchronisation par défaut d’Apache Jackrabbit Oak (org.apache.jackrabbit.oak.spi.security.authentication.external.impl.DefaultSyncHandler) - Aucune modification n’est requise, mais vous pouvez examiner les mappages des champs utilisateur comment les champs Facebook sont mappés à un noeud de profil d’utilisateur CQ. Notez également que "Nom du gestionnaire de synchronisation" correspond à l’ID de configuration du fournisseur OAuth.
Module de connexion externe Apache Jackrabbit Oak (org.apache.jackrabbit.oak.spi.security.authentication.external.impl.ExternalLoginModuleFactory) - Aucune modification n'est requise ici, mais vous pouvez remarquer que 'Nom du fournisseur d'identité' et 'Nom du gestionnaire de synchronisation' sont identiques et pointent vers les configurations OAuth et de gestionnaire de synchronisation correspondantes, respectivement.

Pour plus d’informations, voir Authentification avec le module de connexion externe Apache Oak.

Performances de conversion des utilisateurs OAuth

Pour les sites de la communauté qui voient des centaines de milliers d’utilisateurs s’inscrire en utilisant leur connexion Facebook ou Twitter, les performances de traversée de la requête effectuée lorsqu’un visiteur du site utilise sa connexion sociale peuvent être améliorées en ajoutant l’index Oak suivant.

Si des avertissements de traversée sont affichés dans les journaux, il est recommandé d’ajouter cet index.

Sur une instance d’auteur, connectée avec des privilèges d’administration :

A partir de la navigation globale : sélectionnez Outils, CRX/DE Lite.
Créez un index nommé ntBaseLucene-oauth à partir d'une copie de ntBaseLucene :
- Sous le noeud /oak:index
- Sélectionner le noeud ntBaseLucene
- Sélectionner Copier
- Sélectionner /oak:index
- Sélectionner Coller
- Renommez Copie de ntBaseLucene en ntBaseLucene-oauth
Modifiez les propriétés du noeud ntBaseLucene-oauth :
- indexPath : /oak:index/ntBaseLucene-oauth
- name: oauthid-123****
- réindexer : true
- reindexCount : 1
Sous le noeud /oak:index/ntBaseLucene-oauth/indexRules/nt:base/properties :
- Supprimez tous les noeuds enfants, à l’exception de cqTags.
- Renommez cqTags en oauthid-123****
- Modifier les propriétés du noeud oauthid-123****
  - name : oauthid-123****
- Sélectionnez Enregistrer tout.

Pour name oauthid-123, remplacez 123 par l’ID d’application Facebook ou la Clé d’API du consommateur qui correspond à la valeur de l’ID de client dans l’ <a1/Adobe Configuration de l’application et du fournisseur OAuth Granite.

Pour plus d’informations et d’outils, voir Requêtes en chêne et indexation.