feat: oauth flow for connections

syndesisio / syndesis-react

[FORK] A flexible, customizable, open source platform that provides core integration capabilities as a service.

Apache License 2.0

3 stars 19 forks source link

feat: oauth flow for connections #426

Closed riccardo-forina closed 5 years ago

riccardo-forina commented 5 years ago

This is implemented up to the redirect back from the server.

Changes

oauth

Todo

[x] proper layout for the "Connect" page
[x] pass the state to the review page (probably as configurationProperties, still have to check this)
[ ] the connection details page

Issues

[x] the connect thing is not working for me at the moment, I'm getting a "timeout" error of some sort from the BE (minishift)

riccardo-forina commented 5 years ago

PR Storybook available here

zregvart commented 5 years ago

This changes the OAuth login to open in a pop-up, should we worry about pop-up blockers?

riccardo-forina commented 5 years ago

The eventuality is trapped and a relative toast is displayed to the user explaining what’s happening. That said, we are opening a pop up as a direct and sole consequence of an user action, pointing to well known domains. I think the risk is quite remote.

riccardo-forina commented 5 years ago

PR Storybook available here

riccardo-forina commented 5 years ago

PR Storybook available here

riccardo-forina commented 5 years ago

@dongniwang the OAuth flow is slightly different than before, instead of redirecting the user to the 3rd party to eventually get back to Syndesis, the 3rd party authorization will happen in a popup. Advantages:

if the connector is not configured correctly, the user will remain in Syndesis and only the popup will show the misconfiguration error. Before you would have seen the 3rd party error page - which is often pretty bad - without any way to get back to Syndesis but the back button.
this makes the process a bit quicker because we don't have to reload the whole app.
technically, it's easier and cleaner

Cons:

the popup could possibly be blocked, but we intercept that eventuality and show an error toast explaining the thing. It's a remote opportunity though, I think.

riccardo-forina commented 5 years ago

This is the error condition I'm talking about.

oauth-misconfigured-angular

riccardo-forina commented 5 years ago

PR Storybook available here

riccardo-forina commented 5 years ago

I think this can be reviewed. Better handle the details page in another PR so to enable QA to do their thing.

dongniwang commented 5 years ago

Thanks for the update @riccardo-forina !

I agreed that having an error on a 3rd party page and no way to return back to Syndesis is bad...
Good to know we have the ability to intercept and display a toast notification.
What would happen when OAuth is successfully done, would the pop-up remain opened? What would be shown in the pop-up at that point?
Does the pop-up apply to all the connectors we have for the create connection flow? Or is it only for connectors like Salesforce?

riccardo-forina commented 5 years ago

PR Storybook available here

riccardo-forina commented 5 years ago

Check the gif in the description, you can see the pop up there. Anyway, it will show a link asking to close the window, and that it will close automatically after 5s. And no, popup and messages are all the same for all the oauth connectors

pure-bot[bot] commented 5 years ago

Pull request approved by @gashcrumb - applying approved label

dongniwang commented 5 years ago

What would happen if the OAuth didn't go as planned? Do we have a toast notification or inline notification - assuming users would stay on step 2 - for that?

riccardo-forina commented 5 years ago

It depends on when the flow broke, if it was on the 3rd party page we have no control over that, it it was on the end of the flow the popup will close and a toast error notification with the error message will be displayed

zregvart commented 5 years ago

Epic work, thank you @riccardo-forina :+1: