Customizer: Instagram Authentication does not work

[sirbrillig]

Steps to reproduce

1. Visit the Customizer from within Calypso (the /customize URL).
2. Add an Instagram widget.
3. Click "Save and Publish" (this is required for OAuth; can't recall why).
4. In the Instagram widget control panel, click the "Authorize Instagram Access" button.

What I expected

To be redirected to the Instagram login page. (This is the OAuth behavior that occurs if using the Customizer in wp-admin.)

What happened instead

A blank Calypso page is displayed. In the JavaScript console, the following error appears:

Refused to display 'https://www.instagram.com/accounts/login/?force_classic_login=&next=/oauth/…agram%2526instagram_widget_id%3D3%2526is_customizer%3D1%26state%3D...' in a frame because it set 'X-Frame-Options' to 'sameorigin'.`

Browser / OS version

Mac OS 10.12.4
Chrome 57.0.2987.133

[sirbrillig]

Same as #12292 but I think it needs to be solved here.

[sirbrillig]

Should be fixed by r156261-wpcom

[kathrynwp]

@sirbrillig Unfortunately still getting reports of the Instagram connection being broken in the Customizer's widget area.

Three reports in this thread: https://premium-themes.forums.wordpress.com/topic/instagram-widget-not-working-3

Description of issue from a premium-theme seller on WordPress.com:

I've just tested Instagram widget and it works fine on the Widget page in WP Admin but it does not work in the Customizer.

When I click on the Authorize Instagram Access button, it just reloads the Customizer and does not save the widget in the widget area.

[sirbrillig]

@kathrynwp are you sure the user has clicked "Save and Publish" before they clicked "Authorize"? Otherwise it will just reload the Customizer as they described.

It's written in the instructions, but it's horrible UX and I get it wrong quite a lot myself. We have an issue for the customization team to improve it in the customization repo at issue 94.

[kathrynwp]

Oh wow. :) I bet not, I'll ask. I just tested myself moments ago, and didn't notice that you had to click the Save button before authorizing. When I just retested now and included that step, it worked, so I think you're right and it must be that missing step that's the problem.

[kathrynwp]

It's super easy to overlook the current instructions. Until we have a new flow, what about putting some of the text in bold and rewording it slightly, like:

Important: You must first click "Save & Publish" to activate this widget, before connecting your account. After saving the widget, click the button below to authorize your Instagram account.

[sirbrillig]

Thanks. Hopefully this will improve the experience slightly until a better flow can be implemented.