{"id":409222,"date":"2024-06-29T20:39:37","date_gmt":"2024-06-29T20:39:37","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=409222"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=409222","title":{"rendered":"Tutorial: Frontity \u2014 Setting Up Authorization for WordPress Private Endpoints<\/span>"},"content":{"rendered":"
<\/div>\n
\n
\n
\n
\n

Foreword<\/h4>\n

This tutorial is intended primarily for those new to Frontity (React framework for WordPress) development.<\/p>\n

Primary goal<\/h4>\n

To collect in one place all the necessary information for setting up authorization for WordPress private endpoints using the example of getting a menu collection (wp-json\/wp\/v2\/menus).<\/p>\n

Step 1 — plugin installation\/configuration<\/h4>\n

Add WordPress plugin — JWT Authentication for WP-API<\/a>.<\/p>\n

Make plugin settings in .htaccess<\/em> and wp-config.php<\/em> files according to the instructions on the plugin website.<\/p>\n

Step 3 — setting environment variables<\/h4>\n

Create .env<\/em> file and fill it (for example):<\/p>\n

USERNAME='SOME USERNAME' PASSWORD='SOME PASSWORD'<\/code><\/pre>\n
Add script to package.json<\/em>:<\/p>\n
\"dev\": \"env-cmd -f .env frontity dev\"<\/code><\/pre>\n
Step 3 — getting a token<\/h4>\n
Add token get action to actions.theme.beforeSSR<\/em>:<\/p>\n
const beforeSSR = async ({ state }) => {   const res = await fetch(     `${state.source.api}jwt-auth\/v1\/token`, {       method: 'POST',       headers: {         'Content-Type': 'application\/json',       },       body: JSON.stringify({         username: process.env.USERNAME,         password: process.env.PASSWORD,       }),       redirect: 'follow',     },   );    const body = await res.json();    \/\/ save to any convenient place (I wrote down this path)   state.theme.token = body.token; };<\/code><\/pre>\n
Step 3 — get data<\/h4>\n
Create a handler to get the list of created menus:<\/p>\n
export const menusHandler = {   name: 'menus',   priority: 10,   pattern: 'menus',   \/\/ This is the function triggered when you use:   \/\/ actions.source.fetch(\"menus\");   func: async ({ state, libraries }) => {     const response = await fetch(`${state.source.api}wp\/v2\/menus`, {       method: 'GET',       headers: {         \/\/ add the token obtained in the previous step to the authorization header         Authorization: `Bearer ${state.theme.token}`,       },     });      \/\/ retrieving data from the response object     const data = await response.json();      state.source.data.menu = {};      \/\/ This is the data returned when you use:     \/\/ state.source.get(\"menu\");     Object.assign(state.source.data.menu, {       data,       isMenu: true,     });   }, };<\/code><\/pre>\n
Add a handler to the following path libraries.source.handlers<\/em>.<\/p>\n
Conclusion<\/h4>\n
As a result of the work done, you will set up an authorization mechanism for WordPress private endpoints.<\/p>\n
Source code<\/h3>\n
You can find here<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
<\/p>\n
<\/p>\n
\n
<\/p>\n
<\/p>\n
\u0422\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u043f\u0440\u043e\u0441\u0435. \u0412\u043e\u0439\u0434\u0438\u0442\u0435<\/a>, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430.<\/span><\/div>\n<\/div>\n<\/div>\n
<\/p>\n
Should I keep posting tutorials like this?<\/div>\n
<\/p>\n
\n
100% <\/span>yes<\/span>2<\/span><\/div>\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
0% <\/span>no<\/span>0<\/span><\/div>\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
0% <\/span>show me results<\/span>0<\/span><\/div>\n
\n
<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
 \u041f\u0440\u043e\u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043b\u0438 2 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.    \u0412\u043e\u0437\u0434\u0435\u0440\u0436\u0430\u0432\u0448\u0438\u0445\u0441\u044f \u043d\u0435\u0442. <\/div>\n
<\/div>\n
<\/div>\n
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/697474\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
<\/div>\n
\n
\n
\n
\n
Foreword<\/h4>\n
This tutorial is intended primarily for those new to Frontity (React framework for WordPress) development.<\/p>\n
Primary goal<\/h4>\n
To collect in one place all the necessary information for setting up authorization for WordPress private endpoints using the example of getting a menu collection (wp-json\/wp\/v2\/menus).<\/p>\n
Step 1 — plugin installation\/configuration<\/h4>\n
Add Wordpress plugin — JWT Authentication for WP-API<\/a>.<\/p>\n
Make plugin settings in .htaccess<\/em> and wp-config.php<\/em> files according to the instructions on the plugin website.<\/p>\n
Step 3 — setting environment variables<\/h4>\n
Create .env<\/em> file and fill it (for example):<\/p>\n
USERNAME='SOME USERNAME' PASSWORD='SOME PASSWORD'<\/code><\/pre>\n
Add script to package.json<\/em>:<\/p>\n
\"dev\": \"env-cmd -f .env frontity dev\"<\/code><\/pre>\n
Step 3 — getting a token<\/h4>\n
Add token get action to actions.theme.beforeSSR<\/em>:<\/p>\n
const beforeSSR = async ({ state }) => {   const res = await fetch(     `${state.source.api}jwt-auth\/v1\/token`, {       method: 'POST',       headers: {         'Content-Type': 'application\/json',       },       body: JSON.stringify({         username: process.env.USERNAME,         password: process.env.PASSWORD,       }),       redirect: 'follow',     },   );    const body = await res.json();    \/\/ save to any convenient place (I wrote down this path)   state.theme.token = body.token; };<\/code><\/pre>\n
Step 3 — get data<\/h4>\n
Create a handler to get the list of created menus:<\/p>\n
export const menusHandler = {   name: 'menus',   priority: 10,   pattern: 'menus',   \/\/ This is the function triggered when you use:   \/\/ actions.source.fetch(\"menus\");   func: async ({ state, libraries }) => {     const response = await fetch(`${state.source.api}wp\/v2\/menus`, {       method: 'GET',       headers: {         \/\/ add the token obtained in the previous step to the authorization header         Authorization: `Bearer ${state.theme.token}`,       },     });      \/\/ retrieving data from the response object     const data = await response.json();      state.source.data.menu = {};      \/\/ This is the data returned when you use:     \/\/ state.source.get(\"menu\");     Object.assign(state.source.data.menu, {       data,       isMenu: true,     });   }, };<\/code><\/pre>\n
Add a handler to the following path libraries.source.handlers<\/em>.<\/p>\n
Conclusion<\/h4>\n
As a result of the work done, you will set up an authorization mechanism for WordPress private endpoints.<\/p>\n
Source code<\/h3>\n
You can find here<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
<\/p>\n
<\/p>\n
\n
<\/p>\n
<\/p>\n
\u0422\u043e\u043b\u044c\u043a\u043e \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0443\u0447\u0430\u0441\u0442\u0432\u043e\u0432\u0430\u0442\u044c \u0432 \u043e\u043f\u0440\u043e\u0441\u0435. \u0412\u043e\u0439\u0434\u0438\u0442\u0435<\/a>, \u043f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430.<\/span><\/div>\n<\/div>\n<\/div>\n
<\/p>\n
Should I keep posting tutorials like this?<\/div>\n
<\/p>\n
\n
100% <\/span>yes<\/span>2<\/span><\/div>\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
0% <\/span>no<\/span>0<\/span><\/div>\n
\n
<\/div>\n<\/div>\n<\/div>\n
\n
0% <\/span>show me results<\/span>0<\/span><\/div>\n
\n
<\/div>\n<\/div>\n<\/div>\n
<\/div>\n
 \u041f\u0440\u043e\u0433\u043e\u043b\u043e\u0441\u043e\u0432\u0430\u043b\u0438 2 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.    \u0412\u043e\u0437\u0434\u0435\u0440\u0436\u0430\u0432\u0448\u0438\u0445\u0441\u044f \u043d\u0435\u0442. <\/div>\n
<\/div>\n
<\/div>\n
 \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438  https:\/\/habr.com\/ru\/articles\/697474\/<\/a>
<\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-409222","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/409222","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=409222"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/409222\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=409222"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=409222"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=409222"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}