Mise en œuvre d'OAuth 2.0 pour la connexion via les réseaux sociaux à votre vitrine

Vous pouvez implémenter la connexion via les réseaux sociaux à votre vitrine HCL Commerce pour permettre aux utilisateurs de se connecter à votre magasin à l'aide d'un compte de réseau social, plutôt que d'utiliser des informations d'identification dédiées à HCL Commerce.

Important : HCL Commerce Version 9.1.7.0 or laterCette intégration a été améliorée dans HCL Commerce version 9.1.7.0 et nécessite des mises à jour de votre configuration pour continuer à fonctionner. Si vous avez déjà configuré cette intégration, vous devez chiffrer et migrer manuellement les valeurs de client_id et client_secret et les stocker dans la table CSEDITAT. Ces valeurs doivent ensuite être supprimées de votre table STORECONF.

Pourquoi et quand exécuter cette tâche

De nouvelles API de connexion HCL Commerce ont été introduites pour prendre en charge l'authentification des vitrines avec les réseaux sociaux (SNS), comme Facebook, Google, etc.

Les réseaux sociaux fournissent généralement des API ou des SDK standard dans plusieurs langues pour faciliter la connexion des développeurs sur leur site Web ou leurs applications. Les flux d'interaction sont basés sur le protocole OAuth 2.0. Pour les applications Web, le SDK JavaScript est la méthode d'intégration recommandée.

Cette tâche suppose que vous suivez le guide du réseau social pour l'utilisation de son SDK JavaScript pour activer la connexion sur le magasin. Si vous faites une intégration à Google ou à Facebook, vous pouvez utiliser la documentation suivante :

La procédure suivante vous indique comment terminer l'intégration du côté de HCL Commerce, en configurant le processus de connexion pour utiliser le jeton d'accès fourni par le réseau social.

Procédure

  1. Créez une application de réseau social pour HCL Commerce.

    En utilisant la plateforme de réseaux sociaux ouverte, créez une application pour HCL Commerce. Utilisez le guide de développement spécifique au réseau social auquel vous vous intégrez.

    Après avoir créé l'application, une paire clientId et clientSecret ( ou appId et appSecret) est accordée. Vous pouvez recevoir votre clientId immédiatement après la création de l'application. Vous pouvez rechercher le clientSecret dans les paramètres de l'application. Vous allez utiliser ces valeurs dans l'étape suivante.

  2. Enregistrez votre application de réseau social dans votre base de données HCL Commerce.
    • HCL Commerce Version 9.1.7.0 or laterPour HCL Commerce 9.1.7.0 ou version ultérieure :
      1. Exécutez les instructions SQL suivantes pour enregistrer les détails de l'application dans la table STORECONF.
        insert into storeconf values(store_id, 'SNSName.oauth.clientIdField', 'clientIdFieldName', 0);
        insert into storeconf values(store_id, 'SNSName.oauth.clientSecretField', 'clientSecretFieldName', 0);
        
        Où :
        id_magasin
        Votre ID de magasin HCL Commerce. Par exemple, 1001.
        SNSName
        Nom de votre réseau social. Par exemple, Google ou Facebook. Vous pouvez utiliser plusieurs connexions à des réseaux sociaux Le préfixe de SNSName sur chaque configuration est utilisé pour distinguer les différents réseaux sociaux dans HCL Commerce.
        clientIdFieldName
        Nom du champ ID client du réseau social qui fournit les conventions de noms. Différents réseaux sociaux peuvent avoir des noms de champ différents. Par exemple, le nom de champ pour Google est client_id.
        clientSecretFieldName
        Nom de champ secret client pour le réseau social qui fournit les conventions de nom. Différents réseaux sociaux peuvent avoir des noms de champ différents. Par exemple, le nom de champ de Google est client_secret.
      2. Insérez le store_id et le transport_id dans le tableau STORETRANS.
        Par exemple :
        INSERT INTO STORETRANS (TRANSPORT_ID, STORE_ID, ACTIVE, OPTCOUNTER) VALUES (-123, 1, 1, 0);
      3. Chiffrez les valeurs ID client et secret client et stockez-les dans la table CSEDITATT.
        1. Chiffrez les valeurs client_id et client_secret avec la clé de commerçant à l'aide de wcs_encryptl'utilitaire. Vous devez spécifier la clé de commerçant en tant que paramètre.
        2. Insérez les valeurs chiffrées dans la table CSEDITATT.
          INSERT INTO CSEDITATT (CONNSPECATTNAME, CONNSPECATTVALUE, CSEDITATT_ID, TRANSPORT_ID, STORE_ID, INSTANCE_NUM, CUSTOMIZABLE) VALUES ('OAuthLogin_SNSName_clientIdFieldName', 'encryptedClientId', minCseditattId - 1, -123, 1, -1, 0);  
          INSERT INTO CSEDITATT (CONNSPECATTNAME, CONNSPECATTVALUE, CSEDITATT_ID, TRANSPORT_ID, STORE_ID, INSTANCE_NUM, CUSTOMIZABLE) VALUES ('OAuthLogin_SNSName_clientSecretFieldName', 'encryptedClientSecret', minCseditattId - 2, -123, 1, -1, 0);   
          
          Lieu
          SNSName
          Nom de votre réseau social. Par exemple, Google ou Facebook. Vous pouvez utiliser plusieurs connexions à des réseaux sociaux Le préfixe de SNSName sur chaque configuration est utilisé pour distinguer les différents réseaux sociaux dans HCL Commerce.
          clientIdFieldName
          Nom du champ ID client du réseau social qui fournit les conventions de noms. Différents réseaux sociaux peuvent avoir des noms de champ différents. Par exemple, le nom de champ pour Google est client_id.
          clientSecretFieldName
          Nom de champ secret client pour le réseau social qui fournit les conventions de nom. Différents réseaux sociaux peuvent avoir des noms de champ différents. Par exemple, le nom de champ de Google est client_secret.
          encryptedClientId
          L'ID client est chiffré à l'aide de l'utilitaire wcs_encrypt et de la clé de commerçant.
          encryptedClientSecret
          Le secret client est chiffré à l'aide de l'utilitaire wcs_encrypt et de la clé de commerçant.
          minCseditattId
          Valeur minimale de clé primaire en cours dans la table CSEDITATT. Dans le SQL, elle est réduite de un, puis utilisée pour la clé primaire du nouvel enregistrement. Cela permet d'éviter tout conflit avec d'autres entrées qui pourraient être ajoutées à cette table via Management Center à l'avenir.
        Par exemple, pour stocker un ID client Google, client_id et un secret client, client_secret, les deux instructions SQL apparaissent comme suit.
        INSERT INTO CSEDITATT (CONNSPECATTNAME, CONNSPECATTVALUE, CSEDITATT_ID, TRANSPORT_ID, STORE_ID, INSTANCE_NUM, CUSTOMIZABLE) VALUES ('OAuthLogin_Google_client_id', 'encryptedClientId', -1, -123, 1, -1, 0);  
        INSERT INTO CSEDITATT (CONNSPECATTNAME, CONNSPECATTVALUE, CSEDITATT_ID, TRANSPORT_ID, STORE_ID, INSTANCE_NUM, CUSTOMIZABLE) VALUES ('OAuthLogin_Google_client_secret', 'encryptedClientSecret', -2, -123, 1, -1, 0);
    • Pour versions de HCL Commerce 9.1. x.0 antérieures à la version 9.1.7.0 :
      Exécutez les instructions SQL suivantes pour enregistrer les détails de l'application dans la table STORECONF, en utilisant les ID que vous avez acquis à la suite de l'étape précédente.
      insert into storeconf values(store_id, 'SNSName.oauth.clientIdField', 'clientIdFieldName', 0);
      insert into storeconf values(store_id, 'SNSName.oauth.clientSecretField', 'clientSecretFieldName', 0);
      insert into storeconf values(store_id, 'SNSName_clientIdFieldName', 'ClientId', 0);
      insert into storeconf values(store_id, 'SNSName_clientSecretFieldName', 'ClientSecret', 0);
      Où :
      id_magasin
      Votre ID de magasin HCL Commerce. Par exemple, 1001.
      SNSName
      Nom de votre réseau social. Par exemple, Google ou Facebook. Vous pouvez utiliser plusieurs connexions à des réseaux sociaux Le préfixe de SNSName sur chaque configuration est utilisé pour distinguer les différents réseaux sociaux dans HCL Commerce.
      clientIdFieldName
      Nom du champ ID client du réseau social qui fournit les conventions de noms. Différents réseaux sociaux peuvent avoir des noms de champ différents. Par exemple, le nom de champ pour Google est client_id.
      clientSecretFieldName
      Nom de champ secret client pour le réseau social qui fournit les conventions de nom. Différents réseaux sociaux peuvent avoir des noms de champ différents. Par exemple, le nom de champ de Google est client_secret.
      ClientId
      Valeur d'ID du client pour l'application enregistrée sur le réseau social.
      ClientSecret
      Valeur secrète du client pour l'application enregistrée sur le réseau social.
  3. Suivez le guide d'implémentation de votre réseau social pour activer la connexion via les réseaux sociaux à votre vitrine.
    La réalisation de cette étape comprend les actions suivantes :
    • Configuration du SDK JavaScript, spécification d'un ID d'application à partir de l'étape précédente.
    • Ajout du bouton de connexion au magasin.
    • Définition de la fonction de rappel pour gérer le résultat de connexion.
      Dans la fonction de rappel après une connexion réussie, appelez MyAccountDisplayJS.validateOauthToken() avec le jeton d'accès, l'ID d'utilisateur ou même d'autres informations de profil utilisateur dans la réponse pour démarrer le processus de connexion au serveur. Par exemple :
      function statusChangeCallback(response){
              if(response.status == 'connected'){
                 var param = {id:response.authResponse.userID};
                 MyAccountDisplayJS.validateOauthToken(response.authResponse.accessToken, 1, 'facebook', url, params) ;          
              }       
        }
      Remarque : L'URL du paramètre doit être l'URL post connexion.
  4. Configurez votre processus de connexion HCL Commerce pour utiliser la vérification des jetons et le mappage de profil utilisateur.
    La méthode MyAccountDisplay.validateOauthToken(token, isToken, provider, url, parameters) démarre le processus de connexion du serveur, où :
    token
    Code d'autorisation ou code d'échange pour le jeton.
    isToken
    Valeur de 1, si vous utilisez un code d'autorisation, ou bien 0.
    provider
    Nom du réseau social.
    postLogonUrl
    URL de redirection après une ouverture de session réussie.
    Cette méthode Javascript appelle l'API REST POST /store/{storeId}/loginidentity/oauth_validate pour démarrer le processus de connexion au serveur. Le processus de connexion peut être divisé selon les étapes suivantes.
    • Vérifiez le jeton d'accès qui est transmis du magasin au serveur.

      Pour éviter une attaque contre cette API de connexion via les réseaux sociaux, la vérification des jetons est obligatoire dans le processus de connexion. Différents réseaux sociaux utilisent différents mécanismes de vérification, mais ils fournissent tous des nœuds finaux ou des bibliothèques de clients pour la validation des jetons. Par défaut, l'API appelle un nœud final de validation de jeton préconfiguré, compose la demande en fonction d'un ensemble de champs préconfigurés et vérifie le code d'état HTTP dans la réponse. Si le code d'état est 200 et ne contient aucune erreur, la validation est réussie.

      Si le réseau social que vous intégrez fournit un mécanisme similaire au comportement par défaut, vous devez configurer plusieurs champs dans votre tableau STORECONF. Exécutez les instructions SQL suivantes :
      insert into storeconf values(store_id, 'SNSName_provider_verifytoken_url', 'https://graph.SocialNetworkingSite.com/debug_token', 0);
      insert into storeconf values(store_id, 'SNSName.oauth.verifiedTokenField', 'input_token', 0);
      Remarque : verifiedTokenField correspond au nom de champ ajouté au nœud final de vérification des jetons.

      Si vous avez plus de logique de validation par rapport à la réponse, vous pouvez étendre OAuthTokenValidationCmdImpl.validateResult() pour ajouter votre logique de validation.

      Certains réseaux sociaux fournissent une bibliothèque de clients pour la vérification des jetons. Dans ce cas, vous pouvez écrire une nouvelle implémentation pour OAuthTokenValidationCmd pour utiliser leur bibliothèque client afin d'effectuer la validation. Enregistrez la nouvelle commande .impl dans le tableau CMDREG :

    • Si la validation est réussie, mappez les informations de profil utilisateur que vous avez reçues du réseau social au profil utilisateur de HCL Commerce.
      Remarque : Cela n'est nécessaire que si vous avez utilisé différents noms de champ pour les informations de profil utilisateur. Par défaut, les mappages des quatre champs (id, lastName, email, nickName) sont déjà configurés. Si vous utilisez les noms de champ par défaut, vous pouvez sauter cette étape.

      Les informations de profil utilisateur, y compris le nom, le courrier électronique, etc., peuvent être récupérées via l'API de profil utilisateur du réseau social, qui est encapsulée dans son SDK JavaScript.

      Vous pouvez transmettre ces informations de profil à la mappe param lorsque vous invoquez MyAccountDisplayJS.validateOauthToken(), comme mentionné précédemment. Elles sont ensuite transmises à l'API REST de connexion.

      L'API lit les informations de profil utilisateur de l'entrée API, puis les mappe au profil utilisateur HCL Commerce une fois que la validation du jeton est réussie. Une commande de contrôleur appelée OpenUserRegisterCmd est utilisée pour mapper les profils entre le réseau social et HCL Commerce. Pour assurer un mappage correct, vous devez configurer les noms de champ mappés aux champs utilisateur HCL Commerce, tels que logonId, lastName, email, nickName etc., dans l'entrée de commande. Par exemple :
      1insert into storeconf values(store_id, 'SNSName.user.uniqueIdField', 'id', 0); 
      2insert into storeconf values(store_id, 'SNSName.user.lastNameField', 'name', 0);
      3insert into storeconf values(store_id, 'SNSName.user.emailField', 'email', 0); 
      4insert into storeconf values(store_id, 'SNSName.user.nickNameField', 'name', 0);
      • 1 Lorsque vous mappez à logonId, le userIdField unique du réseau social est obligatoire.
      • 2 Lorsque vous mappez à name, le lastNameField unique du réseau social est obligatoire.
      • 3 Lorsque vous mappez à email, le emailField unique du réseau social est obligatoire.
      • 4 Lorsque vous mappez à name, le nickNameField unique du réseau social est facultatif.

      Si, dans votre cas, les informations de profil utilisateur n'ont pas été récupérées à partir de la vitrine, elles peuvent être récupérées à partir du serveur à l'aide de l'API REST. Pour ce faire, personnalisez OpenUserRegisterCmd pour appeler l'API de profil utilisateur du réseau social, puis mappez la réponse à HCL Commerce.

      Si les informations de profil utilisateur sont récupérées lors de la validation du jeton, retournez-les en étendant OAuthTokenValidationCmd.getProfileMap(). Par défaut, la carte retournée est transmise à OpenUserRegisterCmd.setInputParameters().

    • Continuez le processus de connexion comme un acheteur inscrit.

      Selon les informations de profil utilisateur, en particulier le champ logonId, l'utilisateur est déterminé comme un utilisateur existant, ou un nouvel utilisateur. Si l'utilisateur est un nouvel utilisateur, parcourez la vitrine en tant qu'acheteur inscrit.

      Lorsque le processus de connexion se termine, le magasin redirige vers l'URL post connexion, qui est transmise dans MyAccountDisplayJS.validateOauthToken(). Par exemple :
      'https://host:port/wcs/shop/AjaxLogonForm?myAcctMain=1&catalogId='+${catalogId}+'&langId='+${langId}+'&storeId='+${storeId};
      host est le nom de l'hôte Web pour HCL Commerce et port est le numéro de port Web pour HCL Commerce.