Preview Changes with WordPress REST API (Authentication problem)

I made some further progress:

I created a new nonce when clicking on the preview changes button:

function custom_preview_page_link($link) {
	$id = get_the_ID();
	$nonce = wp_create_nonce( 'wp_rest' );
	$link = 'http://mydomain.dev/api/wp/v2/pages/'. $id. '/revisions/?_wpnonce='. $nonce;
	return $link;
}
add_filter('preview_post_link', 'custom_preview_page_link');

This would actually bring me to my REST API and show me the right page with the current changes. So I got the authentication to work.

A further problem is that I use a lot of ACFs which are not core of WP. So I also use a plugin called
ACT-TO-REST-API. And now my problem just move a bit, because the revisions would not include the (changed) ACF fields.

I know that this problem is shifting the problem away from the original post title, but maybe someone still feels like helping me out :).

Cheers

• This reply was modified 7 years, 5 months ago by nr2012.

Hi @maggiesadler

I got it all sorted as well.
https://github.com/airesvsg/acf-to-rest-api/issues/190
airesvsg answered with something like you are proposing. Maybe you even got that information from there.. :).

Well thanks anyway.
Cheers

@mmeridyth
Hey, no we also have them running completely separately.
I don’t really understand exactly what you are asking. Your functions.php is not in the wordpress codebase?
Maybe you could elaborate this a bit. Your backend has to provide a nonce and with this you should be able to access the API via your vue application.

I indeed did get the preview for drafts to work as well.
Just tell me what kind of help you need. I did this a few months ago, so I don’t have everything present anymore.

Cheers

Ah well, so as far as I understand you don’t know to communicate the nonce between API and frontend, right?

I did something like this:

I send nonce and ID of the page/post in the url. In the frontend I check for the router to get the queries.

// Save query strings
    const wpnonce = rootState.route.query.preview_nonce
    const previewId = rootState.route.query.preview_id

I build my preview URL:
const previewUrl =/api/previews/v1/preview/?id=${previewId}&_wpnonce=${wpnonce}

which is of course different for your endpoint.

We then make an axios call to get the data:

export function getPreviewData (backendUrl, previewUrl) {
  return axios
    .get(<code>${backendUrl + previewUrl}</code>, {
      withCredentials: true
    })
    .then(res => res.data)
}

As you see you of course have to define your backendurl to concat the right string, then make sure to set the withCredentials to true.

And of course as said above you have to create a nonce and then change the link which is called by the preview button:

Here is the link creation code:

function custom_preview_page_link( $link ) {
	$id = get_the_ID();
	// For authentication a nonce must be created
	// otherwise the REST API does not allow users to see previews
	$nonce = wp_create_nonce( 'wp_rest' );
	$post = get_post( $id );
	$slug = $post->post_name;
	$lang = '';
	$isPost = '';

	// if we preview a post, we want to add 'posts/' to the url to link to our posts site in the frontend
	// TODO this URL schould be dynamicly the same for back- and frontend
	if ($post->post_type === 'post') {
		$isPost = '';
	}

	// if we have a new page without a slug we show /preview/ as a page
	if ($slug === '') {
		$slug = 'preview';
	}

	// Get the language of the polylang custom field
	// https://polylang.wordpress.com/documentation/documentation-for-developers/functions-reference/
	$current_lang = pll_get_post_language( $id );
	$default_lang = pll_default_language( 'slug' );

	// Only add a language if it's not the default language
	if ($current_lang !== $default_lang) {
		$lang = $current_lang . '/';
	}

	/* make sure WP_HOME (wp-config.php) always has exactly one trailing slash.
	Remove if it has multiple then add one or add one if it has no slash */
	$home_path = rtrim(WP_HOME, '/') . '/';
	$link = $home_path . $lang . $isPost . $slug . '/?preview_id='. $id. '&preview_nonce=' . $nonce . '&preview=true';
	return $link;
}
add_filter('preview_post_link', 'custom_preview_page_link');

If you preview an unpublished post we don’t have a slug.
What we obviously need to build, which I just realized 😀 – is that we take different templates to show the preview if it is a post or a page, because we have different vue templates for those.

I have not fully dived into the code, but I hope this helps. Otherwise keep asking.

BTW: two generated Urls on click on the preview button:
Published post with changes:
https://www.domain.org/slug/?preview_id=382&preview_nonce=79cde05647&preview=true

And a draft (new post):
https://www.domain.org/preview/?preview_id=411&preview_nonce=79cde05647&preview=true

• This reply was modified 7 years ago by nr2012.

Alright. No worries.
If you have any insights on your side, feel free to share. Our solution is probably still not the best.
I am just about to work on the post preview solution, where I need to get the permalink structure of the backend which should help me choosing the right template in the frontend.