syndesisio / syndesis-ui

The front end application or UI for Syndesis - a flexible, customizable, cloud-hosted platform that provides core integration capabilities as a service. It leverages Red Hat's existing product architecture using OpenShift Online/Dedicated and Fuse Integration Services.
https://syndesis.io/
14 stars 28 forks source link

As a not so expert user I have no idea how to get twitter and salesforce tokens #858

Open jludvice opened 6 years ago

jludvice commented 6 years ago

As a citizen user I have no idea how to get twitter and salesforce tokens. Imagine I'll be able to google out proper pages to register oauth apps. How am I supposed to know what to put there as a callback url ??

settings

CC @mmelko @rhuss @sjcox-rh

Link "Syndesis help" doesn't work

dongniwang commented 6 years ago

There's actually a link in the UX design which is supposed to help user find out how to get client id and client secret. The link would connect to one section in the help documentation that specifies how to get client id/secret as far as I understand.

https://github.com/syndesisio/syndesis-ux/blob/master/designs/global-settings-page/global_settings_page_overview.md

jludvice commented 6 years ago

Yes, this link is present on the settings page exactly as was designed, but it doesn't actually work @dongniwang.

User must fill Callback URL on Twitter or Salesforce websites to create OAuth app. How does user know how what is the corect url if we don't show it to him ?

dongniwang commented 6 years ago

Ok, the "Callback URL" piece was not make clear to me during the design stage.

Can someone clarify the requirements for this page then?

@rhuss @gashcrumb @kahboom

rhuss commented 6 years ago

@jludvice you are absolutely right, we need to give the user the information which callback URL to use. This information can be easily provided by the backend and should be shown here.

Actually, I also agree that this part needs more documentation. As mentioned, this section is also targeted to the expert user, not the citizen user. Nevertheless, a walkthrough or step-by-step guide (with screenshots) in an extra page would be very helpful even for the expert user, like the link that @dongniwang mentions. If we create the documentation dynamically (i.e. served by our backend, we could even add the callback-url directly into the documentation where it makes the most sense.

jludvice commented 6 years ago

Might be related to syndesisio/syndesis-project#47 as Roland mentioned

TovaCohen commented 6 years ago

If anyone can help me understand the order of the steps the user has to perform, that would really help. Here's Josef's comment from my email question:

There are definitely more experienced colleagues to respond,

but one must create OAuth app at Twitter and Salesroce. Once created, user can find those keys/secrets on this newly created oauth app (on twitter or salesforce developer sites). But here is small catch. To be able to create working oauth app, user must fill Callback URL during OAuth app creation (for stating it could look like https://syndesis-staging.b6ff.rh-idev.openshiftapps.com/SOME_PATH_I DONT_KNOW) BUT we don't provide this url anywhere.

I think we should provide callback url on the settings page.

But I still can't figure out the workflow. In the T2SF sample integration, to create the Twitter and Salesforce connections, are these the main steps in the correct order:

  1. Click "Create Connector".
  2. Click the Twitter or SF connector.
  3. Click Connect Twitter or click Connect Salesforce. This displays the Twitter login page or the SF login page.
  4. Log in to Twitter or SF.
  5. For Twitter, does the user need to then go to apps.twitter.com? For Salesforce, is this the procedure: [(https://onlinehelp.tableau.com/current/server/en-us/config_oauth_sfdc.htm)]
  6. Return to Syndesis - but to the Settings page? or back to the Create Connection page? I get lost here.
dongniwang commented 6 years ago

Does Twitter and Salesforce each have a different callback URL? Or there's only one callback URL?

If it's just one generic one, we might be able to just add another line in the UI so users don't need to click on a link to get to it.

rhuss commented 6 years ago

@TovaCohen what we are discussing here has is not related to the tw2sf scenario from the POV of the citizen user who defines the connection or integration.

Let me try to clarify:

Before any Twitter or Salesforce connection can be created, the expert user has to connect iPaaS with Twitter and Salesforce via this setup page. There are two parameters which need to be added: The client id and secret (sometimes called "consumer id" and "consumer secret"). These need to be obtained from the respective site at Twitter and Salesforce. In order to get these, a callback URL needs to be entered for Twitter / SF. Actually, this URL is the same for Twitter and Salesforce (and it stays the same for every OAuth connection, but please correct me @zregvart if I'm wrong here). (@dongniwang hope this answers your question ;-).

After the parameters have been added for Twitter and Salesforce, then Twitter & SF connections can be created only by the citizen user. There can be many different Twitter and Salesforce connections be created (without changing these global parameters described here).

@TovaCohen the scenario that you described is independent of this settings page. The citizen user never will (or should) go to this page. He is only using the "Connection" page which provides an OpenAuth flow (which requires this configuration to be properly setup). In no case, the citizen user has to enter the callback URL and he gets always redirected to the actual step in the create connection wizard where he left off (not settings page).

TovaCohen commented 6 years ago

Thanks @rhuss and @zregvart for the info. This might not be the right place for this question, sorry! But.. To register Syndesis with Twitter, is this what the (sort of expert) user needs to do:

  1. Log in to your Syndesis installation.
  2. Copy the Syndesis URL.
  3. Select Settings.
  4. Click Twitter to expand it.
  5. In another browser tab, go to apps.twitter.com.
  6. Log in to Twitter (if not already logged in)
  7. Select: Create New App
  8. Paste your Syndesis URL into the Name, Website, and Callback URL field.
  9. Click Yes, then Create.
  10. Go to Keys and Access Tokens tab.
  11. Copy the Consumer Key field and paste it into the Syndesis Twitter Client ID field in the Syndesis Settings page.
  12. In the Twitter Keys and Access Tokens tab, copy the Consumer Secret field and paste it into the Syndesis Twitter Client Secret field in the Syndesis Settings page.
  13. In Syndesis Settings page, click Save.

With that in place, the citizen integrator can create a Twitter connection, yes? And is this the workflow for that:

  1. Select Create Connection.
  2. Select Twitter.
  3. Click "Connect Twitter", which displays the Twitter log in page in the same browser tab.
  4. If not already logged in to Twitter, log in.
  5. Select "Authorize....", which redirects the browser tab back to Syndesis.
  6. Click Next, give the connection a name, click Create.

Please let me know if these workflows are correct. Thanks!

rhuss commented 6 years ago

@TovaCohen The flow you describe is very accurate. Some remarks:

Paste your Syndesis URL into the Name, Website, and Callback URL field.

The callback URL is a bit more complicated, it looks like https://syndesis.192.168.64.3.nip.io/api/v1/credentials/callback, so not directly the URL a user sees but a bit deeper. The URL can be easily calculated based on the external URL of the installation, though.

Besides this, the workflow absolutely correctly described.

zregvart commented 6 years ago

I think we can make that URL a bit easier I've created #870

TovaCohen commented 6 years ago

Thanks @rhuss! Would an example of a user's Syndesis URL be something like this: https://syndesis.192.123.45.6.nip.io/api/v1 ??? @zregvart I will eagerly watch for resolution of that issue! Thanks!

zregvart commented 6 years ago

Would an example of a user's Syndesis URL be something like this: https://syndesis.192.123.45.6.nip.io/api/v1

User would see or define if the user is the administrator of the environment (i.e OpenShift administrator) the base URL of Syndesis, something like https://syndesis.192.123.45.6.nip.io/ in your example.

dongniwang commented 6 years ago

@rhuss @zregvart @gashcrumb

If it's always the same, would it be helpful to surface that URL on the UI?

zregvart commented 6 years ago

@dongniwang yes it's fixed, so we could add a info panel or a blurb of text with that URL in global settings page, or link to the docs. I'm guessing this - having things simple might also improve overall experience, for instance Keycloak that we use for authentication uses the bare URL (that is one without any path) I think someone mentioned that you can use any URL with Keycloak and it auto-magically receives callback (guessing it looks at the parameters and detects OAuth callbacks).

jludvice commented 6 years ago

I imagine the settings page could look similar to this (sorry for indentation and uglyness :) settings

imho this url should be on settings page, and optionally also in docs.