Add oauth2 keys setup in installer

[Cyclonecode]

Related issues

#1842

Short description and why it's useful

We can now use the installer to specify the oauth2 keys for magento2 integration.

Screenshots of visual changes before/after (if there are any)

(if you made any changes in the UI layer please provide before/after screenshots)

Screenshot of passed e2e tests (if you are using our standard setup as a backend)

(run yarn tests:e2e and paste the results. If you are not using our standard backend setup or demo.vuestorefront.io you can ommit this step)

Upgrade Notes and Changelog

• No upgrade steps required (100% backward compatibility)
• I've updated the Upgrade notes and Changelog on how to port existing VS sites with this new feature

Contribution and curently important rules acceptance

• I read and followed contribution rules
• I read the TypeScript Action Plan and adjusted my PR according to it
• I read about Vue Storefront Modules and refactoring plan for them

[Cyclonecode]

@pkarw - I am a little bit confused on how to actually setup the configuration in this case. How should the url, imgUrl and assetPath settings be configured depending on the answers from the user?
Should we not also add the hostname of the api.url to the imageable.whitelist.allowedHosts?

One other thing is that it would be nice if we could set the timeout for the magento2-rest-client api call used to validate the settings. I was also wondering if there is possible to turn of the debug messages used in the magento2-rest-client when validating the oauth settings?

  "magento2": {
    "url": "http://magento2.demo-1.xyz.com",
    "imgUrl": "http://localhost:8080/media/catalog/product",
    "assetPath": "/../var/magento2-sample-data/pub/media",
    "magentoUserName": "",
    "magentoUserPassword": "",
    "httpUserName": "",
    "httpUserPassword": "",
    "api": {
      "url": "<URL>",
      "consumerKey": "<CONSUMER>",
      "consumerSecret": "<CONSUMER_SECRET>",
      "accessToken": "<ACCESS_TOKEN>",
      "accessTokenSecret": "<ACCESS_TOKEN_SECRET>"
    }
  },
  "imageable": {
    "namespace": "",
    "maxListeners": 512,
    "imageSizeLimit": 1024,
    "whitelist": {
      "allowedHosts": [
        ".*divante.pl",
        ".*vuestorefront.io",
        "demo.vuestorefront.io"
      ]
    },

[pkarw]

H! The allowedHosts section is set up by some other snippet in the installer - not need to modify it.
You can skip assetPath as well - is used just with the sample data when no Magento2 instance is available either configured: this is not our case. imgUrl is also set by other snippet in the installer - not need to worry about it

[pkarw]

The only missing part of this solution as it seems is ... actually executing mage2vs import after all - or did I miss it?

Thanks! It's great job. Let me know when it's ready to be merged in.

[Cyclonecode]

@pkarw - I have added the missing mage2vs but shouldn't this update also set the values for the following settings as well:

• magento2.url
• magento2.imgUrl
• magento2.assetPath

and also add the supplied domain to allowedHosts

[pkarw]

Hi!

allowedHosts is no longer supported (with /resize migrated to sharp): https://github.com/DivanteLtd/vue-storefront/blob/6833a8a8fcf8aee684f7d163a274b816506641dd/core/scripts/installer.js#L225

We should however support magento2.url, magento2.imgUrl - You're right!

assetPath is not used if magento2.imgUrl has been properly set

[Cyclonecode]

The user is now able to set the magento 2 url as well as the magento 2 api url from the installer. Perhaps it would be enough to simply set the magento base URL and then use this as the base URL for the API e.g <magento_base_url>/rest?

[Cyclonecode]

@pkarw - What do you think? Is there more stuff that needs to be done?

[pkarw]

It seems good! Regarding Your question: yes it's just required to give the base magento URl and You can generate the API endpoint automatically

[pkarw]

@Cyclonecode - how about this issue: #1843 ? :)