{"id":354125,"date":"2024-05-20T22:42:08","date_gmt":"2024-05-20T22:42:08","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=354125"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=354125","title":{"rendered":"<span>\u0410\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0432 React \u2014 \u044d\u0442\u043e \u043f\u0440\u043e\u0441\u0442\u043e<\/span>"},"content":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/xd\/de\/vx\/xddevxdw3piyx4ak8e38okbl6f0.png\" data-src=\"https:\/\/habrastorage.org\/webt\/xd\/de\/vx\/xddevxdw3piyx4ak8e38okbl6f0.png\"\/><\/p>\n<p>  \u0410\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u2014 \u044d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u0442\u0435\u0445 \u0432\u0435\u0449\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043e\u0442 \u043d\u0430\u0441 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0443\u0441\u0438\u043b\u0438\u0439, \u0447\u0435\u043c \u043d\u0430\u043c \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e, \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u0442\u0435\u043c\u0430\u0445, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u044b \u043d\u0435 \u0432\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u0438 \u0441 \u0442\u0435\u0445 \u043f\u043e\u0440, \u043a\u0430\u043a \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0440\u0430\u0437 \u0434\u0435\u043b\u0430\u043b\u0438 \u0435\u0435 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u0435\u0434\u044c \u044d\u0442\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0430 \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0437\u0430 \u043f\u0440\u043e\u0448\u0435\u0434\u0448\u0435\u0435 \u0441 \u0442\u0435\u0445 \u043f\u043e\u0440 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0446\u0435\u043b\u0430\u044f \u043a\u0443\u0447\u0430 \u0432\u0441\u0435\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e: \u043d\u043e\u0432\u044b\u0435 \u0443\u0433\u0440\u043e\u0437\u044b, \u043d\u043e\u0432\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u043d\u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0432\u0430\u043c\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0438\u0437-\u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0430\u043c\u0438 \u043a\u043e\u043f\u0430\u0442\u044c\u0441\u044f \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0438 \u0432\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0448\u043b\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 (\u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u043c, SSO \u0438 \u0442.\u0434.) \u0432 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445.<a name=\"habracut\"><\/a><\/p>\n<p>  \u0412\u043c\u0435\u0441\u0442\u043e \u0442\u043e\u0433\u043e \u0447\u0442\u043e\u0431\u044b \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0442\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043d\u0443\u0436\u043d\u043e \u043f\u043e\u0441\u0442\u043e\u044f\u043d\u043d\u043e \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0442\u044c \u0438 \u0437\u0430\u043d\u043e\u0432\u043e \u0432\u043d\u0438\u043a\u0430\u0442\u044c \u0432 \u043d\u0435\u0435 \u0432\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0433\u0434\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e, \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0441\u0435\u0440\u0432\u0438\u0441, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u0438 \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0443\u043f\u0440\u043e\u0449\u0435\u043d\u043d\u043e\u0439 \u0430\u043b\u044c\u0442\u0435\u0440\u043d\u0430\u0442\u0438\u0432\u043e\u0439 Auth0, Okta \u0438 \u0438\u0445 \u0430\u043d\u0430\u043b\u043e\u0433\u043e\u0432.<\/p>\n<p>  Github-\u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440\u0430: <a href=\"https:\/\/github.com\/userfront\/react-example\">github.com\/userfront\/react-example<\/a><\/p>\n<h2>\u0410\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0432 React<\/h2>\n<p>  \u041e\u0431\u044b\u0447\u043d\u043e \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0432 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438 \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c: \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u0435\u043b\u0430\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441 \u043a \u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0432\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u0442 \u0442\u043e\u043a\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0430 (access token), \u0437\u0430\u0442\u0435\u043c \u044d\u0442\u043e\u0442 \u0442\u043e\u043a\u0435\u043d \u0441\u043e\u0445\u0440\u0430\u043d\u044f\u0435\u0442\u0441\u044f \u0432 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0435 \u0438 \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d \u043f\u0440\u0438 \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0445 \u0437\u0430\u043f\u0440\u043e\u0441\u0430\u0445 \u043a \u0432\u0430\u0448\u0435\u043c\u0443 \u0441\u0435\u0440\u0432\u0435\u0440\u0443 (\u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u043c \u0441\u0435\u0440\u0432\u0435\u0440\u0430\u043c, \u0435\u0441\u043b\u0438 \u044d\u0442\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e).<\/p>\n<p>  \u0411\u0443\u0434\u044c \u0442\u043e \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u0430\u044f \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u043f\u043e \u043b\u043e\u0433\u0438\u043d\u0443 (\u044d\u043b\u0435\u043a\u0442\u0440\u043e\u043d\u043d\u043e\u0439 \u043f\u043e\u0447\u0442\u0435) \u0438 \u043f\u0430\u0440\u043e\u043b\u044e \u0438\u043b\u0438 \u0447\u0435\u0440\u0435\u0437 \u043c\u0430\u0433\u0438\u0447\u0435\u0441\u043a\u0438\u0435 \u0441\u0441\u044b\u043b\u043a\u0438 (magic links) \u0438 \u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0435\u0434\u0438\u043d\u043e\u0433\u043e \u0432\u0445\u043e\u0434\u0430 (SSO) \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a Google, Azure \u0438 Facebook, \u043c\u044b \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043d\u0430\u0448\u0435 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u043b\u043e \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u044b\u0439 \u0437\u0430\u043f\u0440\u043e\u0441 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0438 \u0447\u0442\u043e\u0431\u044b \u044d\u0442\u043e\u0442 \u0441\u0435\u0440\u0432\u0435\u0440, \u0432 \u0441\u0432\u043e\u044e \u043e\u0447\u0435\u0440\u0435\u0434\u044c, \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043b \u0442\u043e\u043a\u0435\u043d.<\/p>\n<p>  \u0417\u0430\u0434\u0430\u0447\u0438 React<\/p>\n<ul>\n<li>\u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u043d\u0430 \u0441\u0435\u0440\u0432\u0435\u0440 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438<\/li>\n<li>\u041f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u0435 \u0438 \u0445\u0440\u0430\u043d\u0435\u043d\u0438\u0435 \u0442\u043e\u043a\u0435\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430<\/li>\n<li>\u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0442\u043e\u043a\u0435\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043d\u0430 \u0432\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435.<\/li>\n<\/ul>\n<h2>JWT (JSON Web Tokens)<\/h2>\n<p>  JSON Web Tokens (JWT) \u2014 \u044d\u0442\u043e \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u0435 \u0438 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u044b\u0435 \u0442\u043e\u043a\u0435\u043d\u044b, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u043b\u044f \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u043c \u0432 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445.<\/p>\n<p>  \u041a\u0430\u0436\u0434\u044b\u0439 JWT \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u0442 \u0432 \u0441\u0435\u0431\u0435 \u043f\u0440\u043e\u0441\u0442\u043e\u0439 JSON-\u043e\u0431\u044a\u0435\u043a\u0442, \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u043c\u044b\u0439 \u00ab\u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439\u00bb (payload), \u0438 \u043f\u043e\u0434\u043f\u0438\u0441\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0441\u043f\u0435\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0447\u0442\u043e\u0431\u044b \u0432\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440 \u043c\u043e\u0433 \u0443\u0434\u043e\u0441\u0442\u043e\u0432\u0435\u0440\u0438\u0442\u044c\u0441\u044f \u0432 \u043f\u043e\u0434\u043b\u0438\u043d\u043d\u043e\u0441\u0442\u0438 \u0435\u0433\u043e \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0438.<\/p>\n<p>  \u0412\u0430\u0436\u043d\u043e \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u044d\u0442\u0430 \u043f\u043e\u043b\u0435\u0437\u043d\u0430\u044f \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0430 JWT \u043c\u043e\u0436\u0435\u0442 \u0431\u044b\u0442\u044c \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u043d\u0430 \u043a\u0435\u043c \u0443\u0433\u043e\u0434\u043d\u043e: \u0438 \u0432\u0430\u0448\u0438\u043c React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435\u043c, \u0438 \u043b\u044e\u0431\u044b\u043c\u0438 \u0442\u0440\u0435\u0442\u044c\u0438\u043c\u0438 \u043b\u0438\u0446\u0430\u043c\u0438, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u0438\u0434\u044f\u0442 \u0442\u043e\u043a\u0435\u043d.<\/p>\n<p>  \u0422\u043e\u043a\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0430 JWT \u0432\u044b\u0433\u043b\u044f\u0434\u0438\u0442 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<pre><code class=\"json\">eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IjRjMDUxZTg3LTU2ZWEtNGUzNC05ZmE3LThkYWNkOThkOWUzMyJ9.eyJtb2RlIjoidGVzdCIsInRlbmFudElkIjoiZGVtbzEyMzQiLCJ1c2VySWQiOjEsInVzZXJVdWlkIjoiNGU2ODgwZTMtZDU0YS00NTNlLTgwMDQtMmJmMGNjNWM1MmY2IiwiaXNDb25maXJtZWQiOnRydWUsImF1dGhvcml6YXRpb24iOnsiZGVtbzEyMzQiOnsicm9sZXMiOlsiY29udHJpYnV0b3IiLCJ2aWV3ZXIiLCJhZG1pbiJdfX0sImlzcyI6InVzZXJmcm9udCIsInNlc3Npb25JZCI6IjNlYTUxOTNjLWE3ZWEtNGM1Zi05ZmRlLTZhZjk0ZTgyNGQ3NCIsImlhdCI6MTY1ODUxNzc2OSwiZXhwIjoxNjU5MTIyNTY5fQ.LB7IyP09G6f64Ho0CdjA8xDe-s7KAjJGPe5lC9GRwSrWHZSnvmoMb1HTRkrO1oabDcpMOvDmyjjkK0Nb-0RoK-bKX3i5PPtvKGu18VKgShxgg0bXYsA-HRrh8bsOExXhKO_I7gS7GVGCMDlSlbGFDRVdtqSqv1rfKj0pRP9PScFjuB9bbdGlmJXbQSw8V_zRxPYEUOnoTqW7-vfyn3DONbo0cElm1mRVMZzK1W8-Kpg6MRTt7nlMj60ysoBktM4w6KdOlDTmlyLzy6kjkqSylT_pDk0ALWW2tCRV8qZcrzJhWu-g8x6MIEUCo8TArELdl6aUGLdItVi-WmQCZNwajQ<\/code><\/pre>\n<p>  \u041f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u043e\u0439 \u0432 \u044d\u0442\u043e\u043c JWT \u044f\u0432\u043b\u044f\u0435\u0442\u0441\u044f \u0441\u0440\u0435\u0434\u043d\u044f\u044f \u0447\u0430\u0441\u0442\u044c (\u043e\u0442\u0434\u0435\u043b\u0435\u043d\u043d\u0430\u044f \u0442\u043e\u0447\u043a\u0430\u043c\u0438):<\/p>\n<pre><code class=\"json\">eyJtb2RlIjoidGVzdCIsInRlbmFudElkIjoiZGVtbzEyMzQiLCJ1c2VySWQiOjEsInVzZXJVdWlkIjoiNGU2ODgwZTMtZDU0YS00NTNlLTgwMDQtMmJmMGNjNWM1MmY2IiwiaXNDb25maXJtZWQiOnRydWUsImF1dGhvcml6YXRpb24iOnsiZGVtbzEyMzQiOnsicm9sZXMiOlsiY29udHJpYnV0b3IiLCJ2aWV3ZXIiLCJhZG1pbiJdfX0sImlzcyI6InVzZXJmcm9udCIsInNlc3Npb25JZCI6IjNlYTUxOTNjLWE3ZWEtNGM1Zi05ZmRlLTZhZjk0ZTgyNGQ3NCIsImlhdCI6MTY1ODUxNzc2OSwiZXhwIjoxNjU5MTIyNTY5fQ<\/code><\/pre>\n<p>  JSON-\u043e\u0431\u044a\u0435\u043a\u0442 \u0432 \u043f\u043e\u043b\u0435\u0437\u043d\u043e\u0439 \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0435 JWT \u0437\u0430\u0448\u0438\u0444\u0440\u043e\u0432\u0430\u043d \u0432 base64:<\/p>\n<pre><code class=\"json\">JSON.parse(atob(\"eyJtb2RlIjoidGVzdCIsInRlbmFudElkIjoiZGVtbzEyMzQiLCJ1c2VySWQiOjEsInVzZXJVdWlkIjoiNGU2ODgwZTMtZDU0YS00NTNlLTgwMDQtMmJmMGNjNWM1MmY2IiwiaXNDb25maXJtZWQiOnRydWUsImF1dGhvcml6YXRpb24iOnsiZGVtbzEyMzQiOnsicm9sZXMiOlsiY29udHJpYnV0b3IiLCJ2aWV3ZXIiLCJhZG1pbiJdfX0sImlzcyI6InVzZXJmcm9udCIsInNlc3Npb25JZCI6IjNlYTUxOTNjLWE3ZWEtNGM1Zi05ZmRlLTZhZjk0ZTgyNGQ3NCIsImlhdCI6MTY1ODUxNzc2OSwiZXhwIjoxNjU5MTIyNTY5fQ\"));<\/code><\/pre>\n<pre><code class=\"json\">\/** * { *   \"userId\": 1, *   \"userUuid\": \"4e6880e3-d54a-453e-8004-2bf0cc5c52f6\", *   \"isEmailConfirmed\": true, *   ... * } *\/<\/code><\/pre>\n<h3>\u0422\u043e\u043a\u0435\u043d\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u0430 JWT<\/h3>\n<p>  \u0411\u043b\u0430\u0433\u043e\u0434\u0430\u0440\u044f \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u043e\u0439 \u043a\u0440\u0438\u043f\u0442\u043e\u0441\u0438\u0441\u0442\u0435\u043c\u0435 RSA \u0441\u0435\u0440\u0432\u0435\u0440 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0441\u043f\u043e\u0441\u043e\u0431\u0435\u043d \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u043d\u044b\u0435 JWT, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043b\u044e\u0431\u0430\u044f \u0434\u0440\u0443\u0433\u0430\u044f \u043c\u0430\u0448\u0438\u043d\u0430 \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0447\u0438\u0442\u0430\u0442\u044c \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0433\u043e (\u043e\u0442\u043a\u0440\u044b\u0442\u043e\u0433\u043e) \u043a\u043b\u044e\u0447\u0430.<\/p>\n<p>  \u0412\u0430\u0448 \u0431\u044d\u043a\u0435\u043d\u0434-\u0441\u0435\u0440\u0432\u0435\u0440 \u043c\u043e\u0436\u0435\u0442 \u043f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c \u043f\u043e\u0434\u043b\u0438\u043d\u043d\u043e\u0441\u0442\u044c \u0442\u043e\u043a\u0435\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 JWT, \u0441\u0432\u0435\u0440\u0438\u0432 \u0435\u0433\u043e \u0441 \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u044b\u043c \u043a\u043b\u044e\u0447\u043e\u043c.<\/p>\n<p>  \u042d\u0442\u043e \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0431\u044d\u043a\u0435\u043d\u0434-\u0441\u0435\u0440\u0432\u0435\u0440\u0443 \u043e\u0442\u043a\u043b\u043e\u043d\u044f\u0442\u044c \u043b\u044e\u0431\u044b\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u0434\u043e\u0441\u0442\u0443\u043f\u0430 JWT, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043d\u0435 \u0431\u044b\u043b\u0438 \u0441\u0433\u0435\u043d\u0435\u0440\u0438\u0440\u043e\u0432\u0430\u043d\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 (\u0438\u043b\u0438 \u0441\u0440\u043e\u043a \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0438\u0441\u0442\u0435\u043a).<\/p>\n<p>  <b>JWT \u0432 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438:<\/b>  <\/p>\n<ul>\n<li>\u0412\u0430\u0448\u0435 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0437\u0430\u043f\u0440\u0430\u0448\u0438\u0432\u0430\u0435\u0442 \u0442\u043e\u043a\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0430 JWT \u0432\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0445\u043e\u0447\u0435\u0442 \u0432\u043e\u0439\u0442\u0438 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443.<\/li>\n<li>\u0421\u0435\u0440\u0432\u0435\u0440 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0433\u0435\u043d\u0435\u0440\u0438\u0440\u0443\u0435\u0442 \u0442\u043e\u043a\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0430 JWT \u043d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0433\u043e (\u0437\u0430\u043a\u0440\u044b\u0442\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0430) \u0438 \u0437\u0430\u0442\u0435\u043c \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u0433\u043e \u043e\u0431\u0440\u0430\u0442\u043d\u043e \u0432 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435.<\/li>\n<li>React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0445\u0440\u0430\u043d\u0438\u0442 \u044d\u0442\u043e\u0442 \u0442\u043e\u043a\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0430 JWT \u0438 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u044f\u0435\u0442 \u0435\u0433\u043e \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434-\u0441\u0435\u0440\u0432\u0435\u0440 \u0432\u0441\u044f\u043a\u0438\u0439 \u0440\u0430\u0437, \u043a\u043e\u0433\u0434\u0430 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0437\u0430\u043f\u0440\u043e\u0441.<\/li>\n<li>\u0412\u0430\u0448 \u0431\u044d\u043a\u0435\u043d\u0434-\u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442 \u0442\u043e\u043a\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0430 JWT \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0430, \u0430 \u0437\u0430\u0442\u0435\u043c \u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442 \u043f\u043e\u043b\u0435\u0437\u043d\u0443\u044e \u043d\u0430\u0433\u0440\u0443\u0437\u043a\u0443, \u0447\u0442\u043e\u0431\u044b \u043e\u043f\u0440\u0435\u0434\u0435\u043b\u0438\u0442\u044c, \u043a\u0430\u043a\u043e\u0439 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u044f\u0435\u0442 \u0437\u0430\u043f\u0440\u043e\u0441.<\/li>\n<\/ul>\n<p>  <i>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/i><br \/>  \u0412\u0441\u0435 \u044d\u0442\u0438 \u0448\u0430\u0433\u0438 \u043d\u0430 \u0431\u0443\u043c\u0430\u0433\u0435 \u0432\u044b\u0433\u043b\u044f\u0434\u044f\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e, \u043d\u043e \u043a\u0430\u0436\u0434\u044b\u0439 \u0438\u0437 \u043d\u0438\u0445 \u0438\u043c\u0435\u0435\u0442 \u0441\u0432\u043e\u0439 \u043d\u0430\u0431\u043e\u0440 \u00ab\u043f\u043e\u0434\u0432\u043e\u0434\u043d\u044b\u0445 \u043a\u0430\u043c\u043d\u0435\u0439\u00bb, \u043d\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0432\u044b \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u043d\u0430\u0442\u043a\u043d\u0435\u0442\u0435\u0441\u044c, \u043a\u043e\u0433\u0434\u0430 \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0431\u0443\u0434\u0435\u0442 \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0438\u0445 \u043d\u0430 \u043f\u0440\u0430\u043a\u0442\u0438\u043a\u0435 \u0438 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0438\u0442\u044c \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u044c. \u041e\u0441\u043e\u0431\u0435\u043d\u043d\u043e \u043a\u043e\u0433\u0434\u0430 \u0441 \u0442\u0435\u0447\u0435\u043d\u0438\u0435\u043c \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u043f\u043e\u044f\u0432\u043b\u044f\u044e\u0442\u0441\u044f \u043d\u043e\u0432\u044b\u0435 \u0438\u0441\u0442\u043e\u0447\u043d\u0438\u043a\u0438 \u0443\u0433\u0440\u043e\u0437 \u0438 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u0438\u0441\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0438\u043b\u0438 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0430 \u043d\u043e\u0432\u044b\u0445 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c \u2014 \u0432\u0430\u043c \u0432\u0441\u0435\u0433\u0434\u0430 \u0431\u0443\u0434\u0435\u0442 \u043d\u0443\u0436\u043d\u043e \u0441\u043e\u0432\u0435\u0440\u0448\u0430\u0442\u044c \u043a\u0430\u043a\u0438\u0435-\u043d\u0438\u0431\u0443\u0434\u044c \u0434\u0435\u0439\u0441\u0442\u0432\u0438\u044f, \u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u043d\u044b\u0435 \u043d\u0430 \u043e\u0431\u0435\u0441\u043f\u0435\u0447\u0435\u043d\u0438\u0435 \u0431\u0435\u0437\u043e\u043f\u0430\u0441\u043d\u043e\u0441\u0442\u0438.<\/p>\n<h3>Userfront \u0443\u0441\u0442\u0440\u0430\u043d\u044f\u0435\u0442 \u0432\u0441\u044e \u044d\u0442\u0443 \u043c\u043e\u0440\u043e\u043a\u0443 \u0441 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0435\u0439 \u0432 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 <\/h3>\n<p>  Userfront \u2014 \u044d\u0442\u043e \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0432\u0430\u043c \u0430\u0431\u0441\u0442\u0440\u0430\u0433\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f \u043e\u0442 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0435\u0439 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438. \u042d\u0442\u043e \u043f\u043e\u043b\u043d\u043e\u0444\u0443\u043d\u043a\u0446\u0438\u043e\u043d\u0430\u043b\u044c\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435, \u043a\u043e\u0442\u043e\u0440\u043e\u0435 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u044f\u0435\u0442\u0441\u044f.<\/p>\n<p>  \u042d\u0442\u043e \u0437\u043d\u0430\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u043e \u0443\u043f\u0440\u043e\u0449\u0430\u0435\u0442 \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439 \u0432 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445 \u0438, \u0447\u0442\u043e, \u043f\u043e\u0436\u0430\u043b\u0443\u0439, \u043d\u0430\u0438\u0431\u043e\u043b\u0435\u0435 \u0432\u0430\u0436\u043d\u043e, \u0431\u0435\u0440\u0435\u0442 \u043d\u0430 \u0441\u0435\u0431\u044f \u0437\u0430\u0431\u043e\u0442\u0443 \u043e\u0431 \u0430\u043a\u0442\u0443\u0430\u043b\u044c\u043d\u043e\u0441\u0442\u0438 \u0432\u0441\u0435\u0445 \u043f\u0440\u043e\u0442\u043e\u043a\u043e\u043b\u043e\u0432 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438.<\/p>\n<h3>\u041d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0430 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0432 React<\/h3>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u043f\u0440\u043e\u0446\u0435\u0441\u0441 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u0432\u0441\u0435\u0445 \u043e\u0441\u043d\u043e\u0432\u043d\u044b\u0445 \u0430\u0441\u043f\u0435\u043a\u0442\u043e\u0432 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0432 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438.<\/p>\n<p>  \u0414\u043b\u044f \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044f \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f \u043c\u044b \u0431\u0443\u0434\u0435\u043c \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c Create React App, \u0430 \u0434\u043b\u044f \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0438 \u043d\u0430 \u0441\u0442\u043e\u0440\u043e\u043d\u0435 \u043a\u043b\u0438\u0435\u043d\u0442\u0430 \u2014 React Router.<\/p>\n<p>  GitHub \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0439 \u043f\u0440\u0438\u043c\u0435\u0440\u0430: <a href=\"https:\/\/github.com\/userfront\/react-example\">github.com\/userfront\/react-example<\/a><\/p>\n<h3>\u041e\u0431\u043e\u0440\u043e\u0442 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 JWT<\/h3>\n<p>  \u041d\u0430 \u0432\u044b\u0441\u043e\u043a\u043e\u043c \u0443\u0440\u043e\u0432\u043d\u0435 \u043e\u0442\u0432\u0435\u0442\u0441\u0442\u0432\u0435\u043d\u043d\u043e\u0441\u0442\u044c React \u043f\u043e \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0430\u0435\u0442\u0441\u044f \u0432 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c:<\/p>\n<ul>\n<li>\u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u043f\u0435\u0440\u0432\u043e\u043d\u0430\u0447\u0430\u043b\u044c\u043d\u043e\u0433\u043e \u0437\u0430\u043f\u0440\u043e\u0441\u0430 \u0432 Userfront \u0434\u043b\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 JWT. \u042d\u0442\u043e \u0434\u0435\u043b\u0430\u044e\u0442 \u0444\u043e\u0440\u043c\u044b \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0438 \u043b\u043e\u0433\u0438\u043d\u0430 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443.<\/li>\n<li>\u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430 \u0442\u043e\u043a\u0435\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 JWT \u043d\u0430 \u0432\u0430\u0448 \u0441\u0435\u0440\u0432\u0435\u0440 \u043f\u0440\u0438 \u043a\u0430\u0436\u0434\u043e\u043c \u043f\u043e\u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435.<\/li>\n<\/ul>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/xv\/8x\/cf\/xv8xcf3ilw_29svfq_5jzkyhqeq.png\" data-src=\"https:\/\/habrastorage.org\/webt\/xv\/8x\/cf\/xv8xcf3ilw_29svfq_5jzkyhqeq.png\"\/><\/p>\n<h3>\u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 Create React App<\/h3>\n<p>  \u0427\u0442\u043e\u0431\u044b \u043d\u0430\u0447\u0430\u0442\u044c \u0440\u0430\u0431\u043e\u0442\u0443 \u0441 React, \u043d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u044c <a href=\"https:\/\/reactjs.org\/docs\/create-a-new-react-app.html\">Create React App<\/a> \u0438 <a href=\"https:\/\/github.com\/remix-run\/react-router\">React Router<\/a>.<\/p>\n<pre><code class=\"bash\">npx create-react-app my-app cd my-app npm install react-router-dom --save npm start<\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043d\u0430\u0448\u0435 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u043e \u043f\u043e \u0430\u0434\u0440\u0435\u0441\u0443 <a href=\"http:\/\/localhost\">localhost<\/a>:3000.<\/p>\n<p>  \u041a\u0430\u043a \u0441\u043a\u0430\u0437\u0430\u043d\u043e \u043d\u0430 \u043f\u0440\u0435\u0432\u044c\u044e, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043d\u0430\u0447\u0430\u0442\u044c \u0441 \u0440\u0435\u0434\u0430\u043a\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f \u0444\u0430\u0439\u043b\u0430 <code>src\/App.js<\/code>.<\/p>\n<p>  <i>\u041f\u0440\u0435\u0432\u044c\u044e<\/i><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/oq\/uz\/k0\/oquzk0v3yilqjhjetffu114ezza.gif\" data-src=\"https:\/\/habrastorage.org\/webt\/oq\/uz\/k0\/oquzk0v3yilqjhjetffu114ezza.gif\"\/><\/p>\n<h3>\u041c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u044f<\/h3>\n<p>  \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u043c \u043d\u0435\u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0438\u0437\u0430\u0446\u0438\u0435\u0439. \u042d\u0442\u043e\u0433\u043e \u043d\u0430\u043c \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0434\u043b\u044f \u043d\u0430\u0447\u0430\u043b\u0430 \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438.  <\/p>\n<div class=\"scrollable-table\">\n<table>\n<tbody>\n<tr>\n<td>\u041c\u0430\u0440\u0448\u0440\u0443\u0442<\/td>\n<td>\u041e\u043f\u0438\u0441\u0430\u043d\u0438\u0435<\/td>\n<\/tr>\n<tr>\n<td><code>\/<\/code><\/td>\n<td>\u0413\u043b\u0430\u0432\u043d\u0430\u044f \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0430<\/td>\n<\/tr>\n<tr>\n<td><code>\/login<\/code><\/td>\n<td>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0432\u0445\u043e\u0434\u0430 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443<\/td>\n<\/tr>\n<tr>\n<td><code>\/reset<\/code><\/td>\n<td>\u0421\u0442\u0440\u0430\u043d\u0438\u0446\u0430 \u0441\u0431\u0440\u043e\u0441\u0430 \u043f\u0430\u0440\u043e\u043b\u044f<\/td>\n<\/tr>\n<tr>\n<td><code>\/dashboard<\/code><\/td>\n<td>\u0418\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u0430\u044f \u043f\u0430\u043d\u0435\u043b\u044c, \u0442\u043e\u043b\u044c\u043a\u043e \u0434\u043b\u044f \u0432\u043e\u0448\u0435\u0434\u0448\u0438\u0445 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<p>  \u0417\u0430\u043c\u0435\u043d\u0438\u0442\u0435 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0444\u0430\u0439\u043b\u0430 src\/App.js \u043d\u0430 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0439 \u043a\u043e\u0434 (\u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0431\u044b\u043b \u0432\u0437\u044f\u0442 \u0438\u0437 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0430 React Router):<\/p>\n<pre><code class=\"javascript\">\/\/ src\/App.js  import React from \"react\"; import { BrowserRouter as Router, Routes, Route, Link } from \"react-router-dom\";  export default function App() {   return (     &lt;Router>       &lt;div>         &lt;nav>           &lt;ul>             &lt;li>               &lt;Link to=\"\/\">Home&lt;\/Link>             &lt;\/li>             &lt;li>               &lt;Link to=\"\/login\">Login&lt;\/Link>             &lt;\/li>             &lt;li>               &lt;Link to=\"\/reset\">Reset&lt;\/Link>             &lt;\/li>             &lt;li>               &lt;Link to=\"\/dashboard\">Dashboard&lt;\/Link>             &lt;\/li>           &lt;\/ul>         &lt;\/nav>          &lt;Routes>           &lt;Route path=\"\/\" element={&lt;Home \/>} \/>           &lt;Route path=\"\/login\" element={&lt;Login \/>} \/>           &lt;Route path=\"\/reset\" element={&lt;PasswordReset \/>} \/>           &lt;Route path=\"\/dashboard\" element={&lt;DefaultLayout \/>} \/>         &lt;\/Routes>       &lt;\/div>     &lt;\/Router>   ); }  function Home() {   return &lt;h2>Home&lt;\/h2>; }  function Login() {   return &lt;h2>Login&lt;\/h2>; }  function PasswordReset() {   return &lt;h2>Password Reset&lt;\/h2>; }  function Dashboard() {   return &lt;h2>Dashboard&lt;\/h2>; }<\/code><\/pre>\n<p>  \u041c\u044b \u0441\u043e\u0437\u0434\u0430\u043b\u0438 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u044b \u0438 \u0433\u043e\u0442\u043e\u0432\u044b \u0437\u0430\u043d\u044f\u0442\u044c\u0441\u044f \u043d\u0435\u043f\u043e\u0441\u0440\u0435\u0434\u0441\u0442\u0432\u0435\u043d\u043d\u043e \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0435\u0439.<\/p>\n<p>  <i>\u041f\u0440\u0435\u0432\u044c\u044e<\/i><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/wu\/uj\/oc\/wuujochdbqyprejumf67gxdaowo.gif\" data-src=\"https:\/\/habrastorage.org\/webt\/wu\/uj\/oc\/wuujochdbqyprejumf67gxdaowo.gif\"\/><\/p>\n<h2>\u0420\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f, \u043b\u043e\u0433\u0438\u043d \u0438 \u0441\u0431\u0440\u043e\u0441 \u043f\u0430\u0440\u043e\u043b\u044f<\/h2>\n<p>  \u041d\u0430\u0447\u043d\u0435\u043c \u043c\u044b \u0441 \u0442\u043e\u0433\u043e, \u0447\u0442\u043e \u0434\u043e\u0431\u0430\u0432\u0438\u043c \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0444\u043e\u0440\u043c\u0443 \u0434\u043b\u044f \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438.<\/p>\n<p>  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044e \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u044e \u0444\u043e\u0440\u043c\u044b \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0432 \u0440\u0430\u0437\u0434\u0435\u043b\u0435 Toolkit \u043d\u0430 \u0432\u0430\u0448\u0435\u0439 \u043f\u0430\u043d\u0435\u043b\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f.<\/p>\n<p>  \u041e\u043d\u0430 \u0431\u0443\u0434\u0435\u0442 \u0432\u044b\u0433\u043b\u044f\u0434\u0435\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c:<\/p>\n<p>  Userfront Toolkit<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/dk\/6h\/-j\/dk6h-jcaf_qbgtc2eoc1y_djcfe.png\" data-src=\"https:\/\/habrastorage.org\/webt\/dk\/6h\/-j\/dk6h-jcaf_qbgtc2eoc1y_djcfe.png\"\/><\/p>\n<p>  \u041e\u0441\u0442\u0430\u0432\u044c\u0442\u0435 Toolkit \u043e\u0442\u043a\u0440\u044b\u0442\u044b\u043c \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u0432\u043a\u043b\u0430\u0434\u043a\u0435 \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u0437\u0436\u0435 \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0444\u043e\u0440\u043c\u044b \u0432\u0445\u043e\u0434\u0430 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0438 \u0441\u0431\u0440\u043e\u0441\u0430 \u043f\u0430\u0440\u043e\u043b\u044f.<\/p>\n<p>  \u0421\u043b\u0435\u0434\u0443\u044f \u0438\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u044f\u043c, \u0443\u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0435 Userfront Toolkit \u0434\u043b\u044f React \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0439 \u043a\u043e\u043c\u0430\u043d\u0434\u044b:<\/p>\n<pre><code class=\"bash\">npm install @userfront\/toolkit --save npm start<\/code><\/pre>\n<p>  \u0417\u0430\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u044c\u0442\u0435 \u0444\u043e\u0440\u043c\u0443 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u0443\u044e \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443, \u0438\u043c\u043f\u043e\u0440\u0442\u0438\u0440\u043e\u0432\u0430\u0432 \u0438 \u0438\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0438\u0440\u043e\u0432\u0430\u0432 Userfront, \u0438 \u043e\u0431\u043d\u043e\u0432\u0438\u0432 \u0444\u0443\u043d\u043a\u0446\u0438\u044e Home(), \u0447\u0442\u043e\u0431\u044b \u043e\u043d\u0430 \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0430\u043b\u0430 \u0444\u043e\u0440\u043c\u0443:<\/p>\n<pre><code class=\"javascript\">\/\/ src\/App.js  import React from \"react\"; import { BrowserRouter as Router, Routes, Route, Link } from \"react-router-dom\"; import Userfront, { SignupForm } from \"@userfront\/toolkit\/react\";  Userfront.init(\"demo1234\");  export default function App() {   return (     &lt;Router>       &lt;div>         &lt;nav>           &lt;ul>             &lt;li>               &lt;Link to=\"\/\">Home&lt;\/Link>             &lt;\/li>             &lt;li>               &lt;Link to=\"\/login\">Login&lt;\/Link>             &lt;\/li>             &lt;li>               &lt;Link to=\"\/reset\">Reset&lt;\/Link>             &lt;\/li>             &lt;li>               &lt;Link to=\"\/dashboard\">Dashboard&lt;\/Link>             &lt;\/li>           &lt;\/ul>         &lt;\/nav>          &lt;Routes>           &lt;Route path=\"\/\" element={&lt;Home \/>} \/>           &lt;Route path=\"\/login\" element={&lt;Login \/>} \/>           &lt;Route path=\"\/reset\" element={&lt;PasswordReset \/>} \/>           &lt;Route path=\"\/dashboard\" element={&lt;DefaultLayout \/>} \/>         &lt;\/Routes>       &lt;\/div>     &lt;\/Router>   ); }  function Home() {   return (     &lt;div>       &lt;h2>Home&lt;\/h2>       &lt;SignupForm \/>     &lt;\/div>   ); }  function Login() {   return &lt;h2>Login&lt;\/h2>; }  function PasswordReset() {   return &lt;h2>Password Reset&lt;\/h2>; }  function Dashboard() {   return &lt;h2>Dashboard&lt;\/h2>; }<\/code><\/pre>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0444\u043e\u0440\u043c\u0430 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438 \u0440\u0430\u0437\u043c\u0435\u0449\u0435\u043d\u0430 \u043d\u0430 \u0433\u043b\u0430\u0432\u043d\u043e\u0439 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435. \u0414\u0430\u0432\u0430\u0439\u0442\u0435 \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0435\u043c \u0437\u0430\u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c \u043d\u043e\u0432\u043e\u0433\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f.<\/p>\n<p>  <i>\u041f\u0440\u0435\u0432\u044c\u044e<\/i><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/dq\/6w\/w7\/dq6ww7wcajncbo2kritdlv-rahs.png\" data-src=\"https:\/\/habrastorage.org\/webt\/dq\/6w\/w7\/dq6ww7wcajncbo2kritdlv-rahs.png\"\/><\/p>\n<h4>\u0422\u0435\u0441\u0442\u043e\u0432\u044b\u0439 \u0440\u0435\u0436\u0438\u043c<\/h4>\n<p>  \u041f\u043e \u0443\u043c\u043e\u043b\u0447\u0430\u043d\u0438\u044e \u0444\u043e\u0440\u043c\u0430 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0432 \u00ab\u0422\u0435\u0441\u0442\u043e\u0432\u043e\u043c \u0440\u0435\u0436\u0438\u043c\u0435\u00bb (Test mode), \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u044e\u0449\u0435\u043c \u0441\u043e\u0437\u0434\u0430\u0432\u0430\u0442\u044c \u0443\u0447\u0435\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u0439 \u0432 \u0442\u0435\u0441\u0442\u043e\u0432\u043e\u0439 \u0441\u0440\u0435\u0434\u0435, \u043a\u043e\u0442\u043e\u0440\u0443\u044e \u043c\u043e\u0436\u043d\u043e \u043e\u0442\u0434\u0435\u043b\u044c\u043d\u043e \u043f\u0440\u043e\u0441\u043c\u043e\u0442\u0440\u0435\u0442\u044c \u043d\u0430 \u043f\u0430\u043d\u0435\u043b\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f Userfront.<\/p>\n<p>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/bp\/px\/d1\/bppxd1sddu8werbm8wwc_ijm-vg.png\" data-src=\"https:\/\/habrastorage.org\/webt\/bp\/px\/d1\/bppxd1sddu8werbm8wwc_ijm-vg.png\"\/><\/p>\n<p>  \u0424\u043e\u0440\u043c\u044b \u043b\u043e\u0433\u0438\u043d\u0430 \u0438 \u0441\u0431\u0440\u043e\u0441\u0430 \u043f\u0430\u0440\u043e\u043b\u044f \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0442\u0435\u043c \u0436\u0435 \u0441\u043f\u043e\u0441\u043e\u0431\u043e\u043c, \u0447\u0442\u043e \u0438 \u0444\u043e\u0440\u043c\u0443 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438. \u0427\u0442\u043e\u0431\u044b \u043f\u043e\u0437\u0432\u043e\u043b\u0438\u0442\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044e \u0432\u044b\u0439\u0442\u0438 \u0438\u0437 \u0441\u0438\u0441\u0442\u0435\u043c\u044b, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0432\u044b\u0437\u0432\u0430\u0442\u044c \u0432\u0441\u0442\u0440\u043e\u0435\u043d\u043d\u044b\u0439 \u043c\u0435\u0442\u043e\u0434 <code>Userfront.logout<\/code>.<\/p>\n<p>  \u041d\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0438\u0435 \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0432 \u0444\u0430\u0439\u043b\u0435 src\/App.js:  <\/p>\n<ul>\n<li>\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043c\u0435\u0442\u043e\u0434 Login() \u0432\u043e\u0437\u0432\u0440\u0430\u0442 \u0444\u043e\u0440\u043c\u044b \u0432\u0445\u043e\u0434\u0430 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443.<\/li>\n<li>\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043c\u0435\u0442\u043e\u0434 PasswordReset() \u0432\u043e\u0437\u0432\u0440\u0430\u0442 \u0444\u043e\u0440\u043c\u044b \u0441\u0431\u0440\u043e\u0441\u0430 \u043f\u0430\u0440\u043e\u043b\u044f.<\/li>\n<li>\u0414\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 \u043c\u0435\u0442\u043e\u0434 Dashboard() \u043e\u0442\u043e\u0431\u0440\u0430\u0436\u0435\u043d\u0438\u0435 \u0434\u0430\u043d\u043d\u044b\u0445 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0438 \u043a\u043d\u043e\u043f\u043a\u0438 \u0432\u044b\u0445\u043e\u0434\u0430 \u0438\u0437 \u0441\u0438\u0441\u0442\u0435\u043c\u044b.<\/li>\n<\/ul>\n<p>  \u041e\u0431\u0440\u0430\u0442\u0438\u0442\u0435 \u0432\u043d\u0438\u043c\u0430\u043d\u0438\u0435 \u043d\u0430 <code>toolId<\/code> \u0434\u043b\u044f \u043a\u0430\u0436\u0434\u043e\u0439 \u0444\u043e\u0440\u043c\u044b \u0432 \u0432\u0430\u0448\u0435\u043c Toolkit. \u041f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u043d\u044b\u0435 \u0432 \u0434\u0430\u043d\u043d\u043e\u043c \u043f\u0440\u0438\u043c\u0435\u0440\u0435 \u043a\u043e\u0434\u0430 <code>toolId<\/code> \u043d\u0435 \u043f\u043e\u0434\u043e\u0439\u0434\u0443\u0442 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f.<\/p>\n<pre><code class=\"javascript\">\/\/ src\/App.js  import React from \"react\"; import { BrowserRouter as Router, Routes, Route, Link } from \"react-router-dom\"; import Userfront, {   SignupForm,   LoginForm,   PasswordResetForm } from \"@userfront\/toolkit\/react\";  Userfront.init(\"demo1234\");  export default function App() {   return (     &lt;Router>       &lt;div>         &lt;nav>           &lt;ul>             &lt;li>               &lt;Link to=\"\/\">Home&lt;\/Link>             &lt;\/li>             &lt;li>               &lt;Link to=\"\/login\">Login&lt;\/Link>             &lt;\/li>             &lt;li>               &lt;Link to=\"\/reset\">Reset&lt;\/Link>             &lt;\/li>             &lt;li>               &lt;Link to=\"\/dashboard\">Dashboard&lt;\/Link>             &lt;\/li>           &lt;\/ul>         &lt;\/nav>          &lt;Routes>           &lt;Route path=\"\/\" element={&lt;Home \/>} \/>           &lt;Route path=\"\/login\" element={&lt;Login \/>} \/>           &lt;Route path=\"\/reset\" element={&lt;PasswordReset \/>} \/>           &lt;Route path=\"\/dashboard\" element={&lt;DefaultLayout \/>} \/>         &lt;\/Routes>       &lt;\/div>     &lt;\/Router>   ); }  function Home() {   return (     &lt;div>       &lt;h2>Home&lt;\/h2>       &lt;SignupForm \/>     &lt;\/div>   ); }  function Login() {   return (     &lt;div>       &lt;h2>Login&lt;\/h2>       &lt;LoginForm \/>     &lt;\/div>   ); }  function PasswordReset() {   return (     &lt;div>       &lt;h2>Password Reset&lt;\/h2>       &lt;PasswordResetForm \/>     &lt;\/div>   ); }  function Dashboard() {   const userData = JSON.stringify(Userfront.user, null, 2);   return (     &lt;div>       &lt;h2>Dashboard&lt;\/h2>       &lt;pre>{userData}&lt;\/pre>       &lt;button onClick={Userfront.logout}>Logout&lt;\/button>     &lt;\/div>   ); }<\/code><\/pre>\n<p>  \u041d\u0430 \u044d\u0442\u043e\u043c \u044d\u0442\u0430\u043f\u0435 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u044f, \u0432\u0445\u043e\u0434 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0438 \u0441\u0431\u0440\u043e\u0441 \u043f\u0430\u0440\u043e\u043b\u044f \u0434\u043e\u043b\u0436\u043d\u044b \u0443\u0436\u0435 \u0431\u044b\u0442\u044c \u0432\u043f\u043e\u043b\u043d\u0435 \u0440\u0430\u0431\u043e\u0442\u043e\u0441\u043f\u043e\u0441\u043e\u0431\u043d\u044b. \u0421\u043b\u0435\u0434\u0443\u0435\u0442 \u043e\u0442\u043c\u0435\u0442\u0438\u0442\u044c, \u0447\u0442\u043e \u0444\u043e\u0440\u043c\u0430 \u0432\u0445\u043e\u0434\u0430 \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0435 <code>\/login<\/code> \u0431\u0443\u0434\u0435\u0442 \u0430\u0432\u0442\u043e\u043c\u0430\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u044f\u0442\u044c \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 <code>\/dashboard<\/code>, \u0435\u0441\u043b\u0438 \u0432\u044b \u0443\u0436\u0435 \u0432\u043e\u0448\u043b\u0438 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u0443\u0442 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0438\u0440\u043e\u0432\u0430\u0442\u044c\u0441\u044f, \u043b\u043e\u0433\u0438\u043d\u0438\u0442\u044c\u0441\u044f, \u0440\u0430\u0437\u043b\u043e\u0433\u0438\u043d\u0438\u0432\u0430\u0442\u044c\u0441\u044f \u0438 \u0441\u0431\u0440\u0430\u0441\u044b\u0432\u0430\u0442\u044c \u043f\u0430\u0440\u043e\u043b\u044c.<\/p>\n<p>  <i>\u041f\u0440\u0435\u0432\u044c\u044e<\/i><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/webt\/qi\/q7\/70\/qiq770ulpfr7c9zouspzakzw-tc.gif\" data-src=\"https:\/\/habrastorage.org\/webt\/qi\/q7\/70\/qiq770ulpfr7c9zouspzakzw-tc.gif\"\/><\/p>\n<h2>\u0417\u0430\u0449\u0438\u0449\u0435\u043d\u043d\u044b\u0439 \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u0432 React<\/h2>\n<p>  \u041c\u044b \u043d\u0435 \u0445\u043e\u0442\u0438\u043c, \u0447\u0442\u043e\u0431\u044b \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0438 \u043c\u043e\u0433\u043b\u0438 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c, \u0435\u0441\u043b\u0438 \u043e\u043d\u0438 \u043d\u0435 \u0432\u043e\u0448\u043b\u0438 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443. \u042d\u0442\u043e \u043d\u0430\u0437\u044b\u0432\u0430\u0435\u0442\u0441\u044f \u0437\u0430\u0449\u0438\u0442\u043e\u0439 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u0430.<\/p>\n<p>  \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0432\u043e\u0448\u0435\u043b \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043d\u043e \u043f\u044b\u0442\u0430\u0435\u0442\u0441\u044f \u043f\u043e\u0441\u0435\u0442\u0438\u0442\u044c \/dashboard, \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0430 \u044d\u043a\u0440\u0430\u043d \u0432\u0445\u043e\u0434\u0430 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u044d\u0442\u043e \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u043e\u0431\u0435\u0440\u043d\u0443\u0442\u044c \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 &lt;DefaultLayout \/> \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u043e\u043c , \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u0442, \u0432\u043e\u0448\u0435\u043b \u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443. \u0415\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0437\u0430\u043b\u043e\u0433\u0438\u043d\u0438\u043b\u0441\u044f, \u0435\u0433\u043e \u0442\u043e\u043a\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0431\u0443\u0434\u0435\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u0435\u043d \u0432 \u0432\u0438\u0434\u0435 Userfront.tokens.accessToken, \u043f\u043e\u044d\u0442\u043e\u043c\u0443 \u043d\u0430\u043c \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u043f\u0440\u043e\u0441\u0442\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0435\u0433\u043e \u043d\u0430\u043b\u0438\u0447\u0438\u0435.<\/p>\n<p>  \u0414\u043b\u044f \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f \u0431\u0440\u0430\u0443\u0437\u0435\u0440\u0430 \u0432 \u0441\u043b\u0443\u0447\u0430\u0435 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u044f \u0442\u043e\u043a\u0435\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 RequireAuth \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442 Navigate \u0438 useLocation \u0438\u0437 React Router.<\/p>\n<pre><code class=\"javascript\">\/\/ src\/App.js  import React from \"react\"; import {   BrowserRouter as Router,   Routes,   Route,   Link,   Navigate,   useLocation, } from \"react-router-dom\"; import Userfront, {   SignupForm,   LoginForm,   PasswordResetForm } from \"@userfront\/toolkit\/react\";  export default function App() {   return (     &lt;Router>       &lt;div>         &lt;nav>           &lt;ul>             &lt;li>               &lt;Link to=\"\/\">Home&lt;\/Link>             &lt;\/li>             &lt;li>               &lt;Link to=\"\/login\">Login&lt;\/Link>             &lt;\/li>             &lt;li>               &lt;Link to=\"\/reset\">Reset&lt;\/Link>             &lt;\/li>             &lt;li>               &lt;Link to=\"\/dashboard\">Dashboard&lt;\/Link>             &lt;\/li>           &lt;\/ul>         &lt;\/nav>          &lt;Routes>           &lt;Route path=\"\/\" element={&lt;Home \/>} \/>           &lt;Route path=\"\/login\" element={&lt;Login \/>} \/>           &lt;Route path=\"\/reset\" element={&lt;PasswordReset \/>} \/>           &lt;Route             path=\"\/dashboard\"             element={               &lt;RequireAuth>                 &lt;DefaultLayout \/>               &lt;\/RequireAuth>             }           \/>         &lt;\/Routes>       &lt;\/div>     &lt;\/Router>   ); }  function Home() {   return (     &lt;div>       &lt;h2>Home&lt;\/h2>       &lt;SignupForm \/>     &lt;\/div>   ); }  function Login() {   return (     &lt;div>       &lt;h2>Login&lt;\/h2>       &lt;LoginForm \/>     &lt;\/div>   ); }  function PasswordReset() {   return (     &lt;div>       &lt;h2>Password Reset&lt;\/h2>       &lt;PasswordResetForm \/>     &lt;\/div>   ); }  function Dashboard() {   const userData = JSON.stringify(Userfront.user, null, 2);   return (     &lt;div>       &lt;h2>Dashboard&lt;\/h2>       &lt;pre>{userData}&lt;\/pre>       &lt;button onClick={Userfront.logout}>Logout&lt;\/button>     &lt;\/div>   ); }  function RequireAuth({ children }) {   let location = useLocation();   if (!Userfront.tokens.accessToken) {     \/\/ Redirect to the \/login page     return &lt;Navigate to=\"\/login\" state={{ from: location }} replace \/>;   }    return children; }<\/code><\/pre>\n<p>  \u0422\u0430\u043a\u0438\u043c \u043e\u0431\u0440\u0430\u0437\u043e\u043c, \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u0432\u043e\u0448\u0435\u043b \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u043e\u043d \u043c\u043e\u0436\u0435\u0442 \u043f\u0440\u043e\u0441\u043c\u0430\u0442\u0440\u0438\u0432\u0430\u0442\u044c \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u043e\u043d\u043d\u0443\u044e \u043f\u0430\u043d\u0435\u043b\u044c. \u0410 \u0435\u0441\u043b\u0438 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044c \u043d\u0435 \u0437\u0430\u043b\u043e\u0433\u0438\u043d\u0438\u043b\u0441\u044f, \u043e\u043d \u0431\u0443\u0434\u0435\u0442 \u043f\u0435\u0440\u0435\u043d\u0430\u043f\u0440\u0430\u0432\u043b\u0435\u043d \u043d\u0430 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443 \u0432\u0445\u043e\u0434\u0430 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443.<\/p>\n<p>  \u0422\u0435\u043f\u0435\u0440\u044c \u0443 \u043d\u0430\u0441 \u0435\u0441\u0442\u044c \u0432\u0435\u0431-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u0433\u043e\u0442\u043e\u0432\u044b\u043c\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u044f\u043c\u0438 \u0440\u0435\u0433\u0438\u0441\u0442\u0440\u0430\u0446\u0438\u0438, \u0432\u0445\u043e\u0434\u0430 \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443, \u0432\u044b\u0445\u043e\u0434\u0430 \u0438\u0437 \u043d\u0435\u0435, \u0441\u0431\u0440\u043e\u0441\u0430 \u043f\u0430\u0440\u043e\u043b\u044f \u0438 \u0437\u0430\u0449\u0438\u0449\u0435\u043d\u043d\u044b\u043c \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u043c.<\/p>\n<p>  <i>\u041f\u0440\u0435\u0432\u044c\u044e<\/i><br \/>  <img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/cl\/-4\/mi\/cl-4mit_fdwktza7oimmbt8jale.png\" data-src=\"https:\/\/habrastorage.org\/webt\/cl\/-4\/mi\/cl-4mit_fdwktza7oimmbt8jale.png\"\/><\/p>\n<h2>\u0410\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u0447\u0435\u0440\u0435\u0437 API \u0432 React <\/h2>\n<p>  \u041a\u0430\u043a \u043c\u044b \u0443\u0436\u0435 \u0432\u0438\u0434\u0435\u043b\u0438 \u0432\u044b\u0448\u0435, \u043d\u0430 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434\u0435 \u043f\u0440\u0438 \u0432\u0445\u043e\u0434\u0435 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f \u0432 \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u0441\u043e\u0437\u0434\u0430\u0435\u0442\u0441\u044f \u0442\u043e\u043a\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0430 <code>Userfront.tokens.accessToken<\/code>. \u042d\u0442\u043e \u0442\u043e\u043a\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0430 JWT, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u043d\u0430 \u0431\u044d\u043a\u0435\u043d\u0434\u0435 \u0434\u043b\u044f \u0437\u0430\u0449\u0438\u0442\u044b \u043a\u043e\u043d\u0435\u0447\u043d\u044b\u0445 \u0442\u043e\u0447\u0435\u043a API.<\/p>\n<p>  \u0411\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 JWT \u0434\u043e\u0441\u0442\u0430\u0442\u043e\u0447\u043d\u043e \u0431\u043e\u043b\u044c\u0448\u043e\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u0430\u043a\u0442\u0438\u0447\u0435\u0441\u043a\u0438 \u043d\u0430 \u043a\u0430\u0436\u0434\u043e\u043c \u044f\u0437\u044b\u043a\u0435. \u0412 \u0441\u043f\u0438\u0441\u043a\u0435 \u043d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d\u044b \u043d\u0435\u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u043f\u043e\u043f\u0443\u043b\u044f\u0440\u043d\u044b\u0435 \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f \u0440\u0430\u0431\u043e\u0442\u044b \u0441 JWT.<\/p>\n<p>  JWT-\u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0438 \u0434\u043b\u044f:  <\/p>\n<ul>\n<li><a href=\"https:\/\/github.com\/auth0\/node-jsonwebtoken\">Node.js<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/jpadilla\/pyjwt\/\">Python<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/auth0\/java-jwt\">Java<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/firebase\/php-jwt\">PHP<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/jwt-dotnet\/jwt\">.NET<\/a><\/li>\n<\/ul>\n<p>  \u0412\u0430\u0448\u0435 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u0435\u0442 \u043f\u0435\u0440\u0435\u0434\u0430\u0432\u0430\u0442\u044c \u0442\u043e\u043a\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0430 JWT \u0432 \u0432\u0438\u0434\u0435 Bearer-\u0442\u043e\u043a\u0435\u043d\u0430 \u0432\u043d\u0443\u0442\u0440\u0438 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 <code>Authorization<\/code>. \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440:<\/p>\n<pre><code class=\"javascript\">async function getInfo() {   const res = await window.fetch(\"\/your-endpoint\", {     method: \"GET\",     headers: {       \"Content-Type\": \"application\/json\",       Authorization: `Bearer ${Userfront.tokens.accessToken}`,     },   });    console.log(res); }  getInfo();<\/code><\/pre>\n<p>  \u041f\u0435\u0440\u0435\u0434 \u0442\u0435\u043c \u043a\u0430\u043a \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0430\u0442\u044c \u0442\u0430\u043a\u043e\u0439 \u0437\u0430\u043f\u0440\u043e\u0441, \u0431\u044d\u043a\u0435\u043d\u0434 \u0434\u043e\u043b\u0436\u0435\u043d \u0441\u043d\u0430\u0447\u0430\u043b\u0430 \u0441\u0447\u0438\u0442\u0430\u0442\u044c \u0442\u043e\u043a\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0430 JWT \u0438\u0437 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 <code>Authorization<\/code> \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u0438\u0442\u044c \u0435\u0433\u043e \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u043e\u0441\u0442\u044c \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0430 JWT, \u043a\u043e\u0442\u043e\u0440\u044b\u0439 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 \u043f\u0430\u043d\u0435\u043b\u0438 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f Userfront.<\/p>\n<p>  \u041d\u0438\u0436\u0435 \u043f\u0440\u0438\u0432\u0435\u0434\u0435\u043d \u043f\u0440\u0438\u043c\u0435\u0440 Node.js middleware \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f \u0438 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0442\u043e\u043a\u0435\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 JWT:<\/p>\n<pre><code class=\"javascript\">\/\/ \u041f\u0440\u0438\u043c\u0435\u0440 Node.js (Express.js)  const jwt = require(\"jsonwebtoken\");  function authenticateToken(req, res, next) {   \/\/ \u0421\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u043c \u0442\u043e\u043a\u0435\u043d \u0434\u043e\u0441\u0442\u0443\u043f\u0430 JWT \u0438\u0437 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u0430 \u0437\u0430\u043f\u0440\u043e\u0441\u0430   const authHeader = req.headers[\"authorization\"];   const token = authHeader &amp;&amp; authHeader.split(\" \")[1];   if (token == null) return res.sendStatus(401); \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c 401 \u043f\u0440\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0438\u0438 \u0442\u043e\u043a\u0435\u043d\u0430    \/\/ \u041f\u0440\u043e\u0432\u0435\u0440\u044f\u0435\u043c \u0442\u043e\u043a\u0435\u043d \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u043f\u0443\u0431\u043b\u0438\u0447\u043d\u043e\u0433\u043e \u043a\u043b\u044e\u0447\u0430 Userfront   jwt.verify(token, process.env.USERFRONT_PUBLIC_KEY, (err, auth) => {     if (err) return res.sendStatus(403); \/\/ \u0412\u043e\u0437\u0432\u0440\u0430\u0449\u0430\u0435\u043c 403 \u043f\u0440\u0438 \u043d\u0435\u043f\u0440\u043e\u0439\u0434\u0435\u043d\u043d\u043e\u0439 \u0432\u0435\u0440\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438     req.auth = auth;     next();   }); }<\/code><\/pre>\n<p>  \u041f\u0440\u0438 \u0442\u0430\u043a\u043e\u043c \u043f\u043e\u0434\u0445\u043e\u0434\u0435 \u0432\u0441\u0435 \u043d\u0435\u0434\u0435\u0439\u0441\u0442\u0432\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0438\u043b\u0438 \u043e\u0442\u0441\u0443\u0442\u0441\u0442\u0432\u0443\u044e\u0449\u0438\u0435 \u0442\u043e\u043a\u0435\u043d\u044b \u0431\u0443\u0434\u0443\u0442 \u043e\u0442\u043a\u043b\u043e\u043d\u0435\u043d\u044b \u0441\u0435\u0440\u0432\u0435\u0440\u043e\u043c. \u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0441\u0441\u044b\u043b\u0430\u0442\u044c\u0441\u044f \u043d\u0430 \u0441\u043e\u0434\u0435\u0440\u0436\u0438\u043c\u043e\u0435 \u0442\u043e\u043a\u0435\u043d\u0430 \u0432 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u0447\u0438\u043a\u0430\u0445 \u043c\u0430\u0440\u0448\u0440\u0443\u0442\u043e\u0432, \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u044f \u043e\u0431\u044a\u0435\u043a\u0442 <code>req.auth<\/code>:<\/p>\n<pre><code class=\"javascript\">console.log(req.auth);  \/\/ => {   mode: 'test',   tenantId: 'demo1234',   userId: 1,   userUuid: 'ab53dbdc-bb1a-4d4d-9edf-683a6ca3f609',   isEmailConfirmed: false,   authorization: {     demo1234: {       roles: [\"admin\"]     },   },   sessionId: '35d0bf4a-912c-4429-9886-cd65a4844a4f',   iat: 1614114057,   exp: 1616706057 }<\/code><\/pre>\n<p>  \u041d\u0430 \u043e\u0441\u043d\u043e\u0432\u0435 \u044d\u0442\u043e\u0439 \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u0438 \u043c\u043e\u0436\u043d\u043e \u0432\u044b\u043f\u043e\u043b\u043d\u0438\u0442\u044c \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u043f\u0440\u043e\u0432\u0435\u0440\u043a\u0438 \u0438\u043b\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c <code>userId<\/code> \u0438\u043b\u0438 <code>userUuid<\/code> \u0434\u043b\u044f \u043f\u043e\u0438\u0441\u043a\u0430 \u0434\u0430\u043d\u043d\u044b\u0445, \u0441\u0432\u044f\u0437\u0430\u043d\u043d\u044b\u0445 \u0441 \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u0435\u043c.<\/p>\n<p>  \u041d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, \u0435\u0441\u043b\u0438 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u043c\u0430\u0440\u0448\u0440\u0443\u0442 \u0434\u043e\u0441\u0442\u0443\u043f\u043d\u044b\u043c \u0442\u043e\u043b\u044c\u043a\u043e \u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u0435\u043b\u044f\u043c-\u0430\u0434\u043c\u0438\u043d\u0438\u0441\u0442\u0440\u0430\u0442\u043e\u0440\u0430\u043c, \u043c\u043e\u0436\u043d\u043e \u043f\u0440\u043e\u0432\u0435\u0440\u044f\u0442\u044c \u043e\u0431\u044a\u0435\u043a\u0442 <code>authorization<\/code> \u0438\u0437 \u0432\u0430\u043b\u0438\u0434\u043d\u043e\u0433\u043e \u0442\u043e\u043a\u0435\u043d\u0430 \u0434\u043e\u0441\u0442\u0443\u043f\u0430:<\/p>\n<pre><code class=\"javascript\">\/\/ \u041f\u0440\u0438\u043c\u0435\u0440 Node.js (Express.js)  app.get(\"\/users\", (req, res) => {   const authorization = req.auth.authorization[\"demo1234\"] || {};    if (authorization.roles.includes(\"admin\")) {     \/\/ \u0420\u0430\u0437\u0440\u0435\u0448\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f   } else {     \/\/ \u0417\u0430\u043f\u0440\u0435\u0449\u0430\u0435\u043c \u0434\u043e\u0441\u0442\u0443\u043f   } });<\/code><\/pre>\n<p>  <\/p>\n<h2>React SSO (\u0442\u0435\u0445\u043d\u043e\u043b\u043e\u0433\u0438\u0438 \u0435\u0434\u0438\u043d\u043e\u0433\u043e \u0432\u0445\u043e\u0434\u0430)<\/h2>\n<p>  \u0422\u0430\u043a\u0436\u0435 \u043c\u044b \u043c\u043e\u0436\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0432 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441\u043e\u0446\u0438\u0430\u043b\u044c\u043d\u044b\u0445 \u043f\u043e\u0441\u0442\u0430\u0432\u0449\u0438\u043a\u043e\u0432 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u043e\u043d\u043d\u044b\u0445 \u0434\u0430\u043d\u043d\u044b\u0445, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a Google, Facebook \u0438 LinkedIn, \u0438\u043b\u0438 \u0431\u0438\u0437\u043d\u0435\u0441 \u043f\u043e\u0441\u0442\u0430\u0432\u0449\u0438\u043a\u043e\u0432 \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438, \u0442\u0430\u043a\u0438\u0445 \u043a\u0430\u043a Azure AD, Office365 \u0438 \u0442.\u0434.<\/p>\n<p>  \u0414\u043b\u044f \u044d\u0442\u043e\u0433\u043e \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e \u0441\u043e\u0437\u0434\u0430\u0442\u044c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u0441 \u043f\u043e\u0441\u0442\u0430\u0432\u0449\u0438\u043a\u043e\u043c \u0438\u0434\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 (\u043d\u0430\u043f\u0440\u0438\u043c\u0435\u0440, Google), \u0430 \u0437\u0430\u0442\u0435\u043c \u0434\u043e\u0431\u0430\u0432\u0438\u0442\u044c \u0443\u0447\u0435\u0442\u043d\u044b\u0435 \u0434\u0430\u043d\u043d\u044b\u0435 SSO \u0432 \u043f\u0430\u043d\u0435\u043b\u044c \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044f Userfront. \u0412 \u0440\u0435\u0437\u0443\u043b\u044c\u0442\u0430\u0442\u0435 \u043c\u044b \u043f\u043e\u043b\u0443\u0447\u0430\u0435\u043c \u043c\u043e\u0434\u0438\u0444\u0438\u0446\u0438\u0440\u043e\u0432\u0430\u043d\u043d\u0443\u044e \u0441\u0438\u0441\u0442\u0435\u043c\u0443 \u043b\u043e\u0433\u0438\u043d\u0430.<\/p>\n<p>  \u0414\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 Single Sign On \u0441 \u043f\u043e\u043c\u043e\u0449\u044c\u044e \u044d\u0442\u043e\u0433\u043e \u043f\u043e\u0434\u0445\u043e\u0434\u0430 \u043d\u0435 \u0442\u0440\u0435\u0431\u0443\u0435\u0442\u0441\u044f \u043d\u0438\u043a\u0430\u043a\u043e\u0433\u043e \u0434\u043e\u043f\u043e\u043b\u043d\u0438\u0442\u0435\u043b\u044c\u043d\u043e\u0433\u043e \u043a\u043e\u0434\u0430: \u043c\u043e\u0436\u043d\u043e \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043f\u043e\u0441\u0442\u0430\u0432\u0449\u0438\u0435\u043e\u0432, \u043d\u0435 \u0438\u0437\u043c\u0435\u043d\u044f\u044f \u0444\u043e\u0440\u043c\u044b \u0438\u043b\u0438 \u0441\u043f\u043e\u0441\u043e\u0431 \u043e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0438 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u0434\u043e\u0441\u0442\u0443\u043f\u0430 JWT.<\/p>\n<h2>\u0417\u0430\u043a\u043b\u044e\u0447\u0435\u043d\u0438\u0435<\/h2>\n<p>  \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0435 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0438 \u043a\u043e\u043d\u0442\u0440\u043e\u043b\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u0432 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043d\u0435 \u043e\u0431\u044f\u0437\u0430\u0442\u0435\u043b\u044c\u043d\u043e \u0434\u043e\u043b\u0436\u043d\u043e \u0431\u044b\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0439 \u0437\u0430\u0434\u0430\u0447\u0435\u0439. \u0418 \u044d\u0442\u0430\u043f \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438, \u0438, \u0447\u0442\u043e \u0435\u0449\u0435 \u0432\u0430\u0436\u043d\u0435\u0435, \u0441\u043e\u043f\u0440\u043e\u0432\u043e\u0436\u0434\u0435\u043d\u0438\u0435 \u0432 \u0442\u0435\u0447\u0435\u043d\u0438\u0435 \u0434\u043e\u043b\u0433\u043e\u0433\u043e \u0432\u0440\u0435\u043c\u0435\u043d\u0438 \u2014 \u0432\u0441\u0435 \u044d\u0442\u043e \u043c\u043e\u0436\u043d\u043e \u043f\u0435\u0440\u0435\u043b\u043e\u0436\u0438\u0442\u044c \u043d\u0430 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0435 \u043f\u043b\u0430\u0442\u0444\u043e\u0440\u043c\u044b, \u0442\u0430\u043a\u0438\u0435 \u043a\u0430\u043a Userfront.<\/p>\n<p>  JSON Web Tokens \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0447\u0435\u0442\u043a\u043e \u043e\u0442\u0434\u0435\u043b\u0438\u0442\u044c \u0441\u043b\u043e\u0439 \u0433\u0435\u043d\u0435\u0440\u0430\u0446\u0438\u0438 \u0442\u043e\u043a\u0435\u043d\u043e\u0432 \u043e\u0442 \u043e\u0441\u0442\u0430\u043b\u044c\u043d\u043e\u0439 \u0447\u0430\u0441\u0442\u0438 \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f, \u0447\u0442\u043e \u0434\u0435\u043b\u0430\u0435\u0442 \u0435\u0433\u043e \u0431\u043e\u043b\u0435\u0435 \u043f\u043e\u043d\u044f\u0442\u043d\u044b\u043c \u0438 \u043c\u043e\u0434\u0443\u043b\u044c\u043d\u044b\u043c. \u0422\u0430\u043a\u0430\u044f \u0430\u0440\u0445\u0438\u0442\u0435\u043a\u0442\u0443\u0440\u0430 \u0442\u0430\u043a\u0436\u0435 \u043f\u043e\u0437\u0432\u043e\u043b\u044f\u0435\u0442 \u0441\u043e\u0441\u0440\u0435\u0434\u043e\u0442\u043e\u0447\u0438\u0442\u044c \u0443\u0441\u0438\u043b\u0438\u044f \u043d\u0430 \u0441\u0430\u043c\u043e\u043c \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0438, \u0433\u0434\u0435 \u0432\u044b, \u0441\u043a\u043e\u0440\u0435\u0435 \u0432\u0441\u0435\u0433\u043e, \u0441\u043e\u0437\u0434\u0430\u0434\u0438\u0442\u0435 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u043f\u043e\u043b\u044c\u0437\u044b \u0434\u043b\u044f \u0441\u0435\u0431\u044f \u0438 \u0441\u0432\u043e\u0438\u0445 \u043a\u043b\u0438\u0435\u043d\u0442\u043e\u0432.<\/p>\n<p>  \u0411\u043e\u043b\u0435\u0435 \u043f\u043e\u0434\u0440\u043e\u0431\u043d\u0443\u044e \u0438\u043d\u0444\u043e\u0440\u043c\u0430\u0446\u0438\u044e \u043e \u0434\u043e\u0431\u0430\u0432\u043b\u0435\u043d\u0438\u0438 \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0432 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u0435 \u043c\u043e\u0436\u043d\u043e \u043d\u0430\u0439\u0442\u0438 \u0432 \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 Userfront, \u0433\u0434\u0435 \u043e\u043f\u0438\u0441\u0430\u043d\u043e \u0432\u0441\u0435: \u043e\u0442 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0438 \u0444\u043e\u0440\u043c \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 \u0434\u043e \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u043f\u043e API, \u043f\u0440\u0438\u043c\u0435\u0440\u044b \u0440\u0435\u043f\u043e\u0437\u0438\u0442\u043e\u0440\u0438\u0435\u0432, \u0440\u0430\u0431\u043e\u0442\u0430 \u0441 \u0440\u0430\u0437\u043b\u0438\u0447\u043d\u044b\u043c\u0438 \u044f\u0437\u044b\u043a\u0430\u043c\u0438 \u0438 \u0444\u0440\u0435\u0439\u043c\u0432\u043e\u0440\u043a\u0430\u043c\u0438 \u0438 \u0442.\u0434.<\/p>\n<p>  <a href=\"https:\/\/otus.pw\/CIr7\/\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/qt\/mz\/yf\/qtmzyfwkrn1snee-zgcykifv7yq.png\" alt=\"image\" data-src=\"https:\/\/habrastorage.org\/webt\/qt\/mz\/yf\/qtmzyfwkrn1snee-zgcykifv7yq.png\"\/><\/a><\/div>\n<\/div>\n<\/div>\n<p><!----><!----><\/div>\n<p><!----><!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/articles\/759222\/\"> https:\/\/habr.com\/ru\/articles\/759222\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><!--[--><!--]--><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body article-formatted-body_version-1\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"><img decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/webt\/xd\/de\/vx\/xddevxdw3piyx4ak8e38okbl6f0.png\" data-src=\"https:\/\/habrastorage.org\/webt\/xd\/de\/vx\/xddevxdw3piyx4ak8e38okbl6f0.png\"\/><\/p>\n<p>  \u0410\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044f \u2014 \u044d\u0442\u043e \u043e\u0434\u043d\u0430 \u0438\u0437 \u0442\u0435\u0445 \u0432\u0435\u0449\u0435\u0439, \u043a\u043e\u0442\u043e\u0440\u044b\u0435 \u0437\u0430\u0447\u0430\u0441\u0442\u0443\u044e \u0442\u0440\u0435\u0431\u0443\u044e\u0442 \u043e\u0442 \u043d\u0430\u0441 \u0433\u043e\u0440\u0430\u0437\u0434\u043e \u0431\u043e\u043b\u044c\u0448\u0435 \u0443\u0441\u0438\u043b\u0438\u0439, \u0447\u0435\u043c \u043d\u0430\u043c \u0445\u043e\u0442\u0435\u043b\u043e\u0441\u044c \u0431\u044b.<\/p>\n<p>  \u0427\u0442\u043e\u0431\u044b \u0440\u0435\u0430\u043b\u0438\u0437\u043e\u0432\u0430\u0442\u044c \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u044e, \u043f\u0440\u0438\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u0437\u0430\u043d\u043e\u0432\u043e \u0440\u0430\u0437\u0431\u0438\u0440\u0430\u0442\u044c\u0441\u044f \u0432 \u0442\u0435\u043c\u0430\u0445, \u043e \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u044b \u043d\u0435 \u0432\u0441\u043f\u043e\u043c\u0438\u043d\u0430\u043b\u0438 \u0441 \u0442\u0435\u0445 \u043f\u043e\u0440, \u043a\u0430\u043a \u0432 \u043f\u043e\u0441\u043b\u0435\u0434\u043d\u0438\u0439 \u0440\u0430\u0437 \u0434\u0435\u043b\u0430\u043b\u0438 \u0435\u0435 \u0434\u043b\u044f \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f. \u0412\u0435\u0434\u044c \u044d\u0442\u0430 \u043e\u0431\u043b\u0430\u0441\u0442\u044c \u043e\u0447\u0435\u043d\u044c \u0431\u044b\u0441\u0442\u0440\u043e \u0440\u0430\u0437\u0432\u0438\u0432\u0430\u0435\u0442\u0441\u044f, \u0430 \u044d\u0442\u043e \u043e\u0437\u043d\u0430\u0447\u0430\u0435\u0442, \u0447\u0442\u043e \u0437\u0430 \u043f\u0440\u043e\u0448\u0435\u0434\u0448\u0435\u0435 \u0441 \u0442\u0435\u0445 \u043f\u043e\u0440 \u0432\u0440\u0435\u043c\u044f \u043f\u043e\u044f\u0432\u0438\u043b\u0430\u0441\u044c \u0446\u0435\u043b\u0430\u044f \u043a\u0443\u0447\u0430 \u0432\u0441\u0435\u0433\u043e \u043d\u043e\u0432\u043e\u0433\u043e: \u043d\u043e\u0432\u044b\u0435 \u0443\u0433\u0440\u043e\u0437\u044b, \u043d\u043e\u0432\u044b\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0438 \u043e\u0431\u043d\u043e\u0432\u043b\u0435\u043d\u0438\u044f \u0440\u0430\u043d\u0435\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u043c\u044b\u0445 \u0432\u0430\u043c\u0438 \u0438\u043d\u0441\u0442\u0440\u0443\u043c\u0435\u043d\u0442\u043e\u0432, \u0438\u0437-\u0437\u0430 \u043a\u043e\u0442\u043e\u0440\u044b\u0445 \u0432\u0430\u043c \u043f\u0440\u0438\u0434\u0435\u0442\u0441\u044f \u0447\u0430\u0441\u0430\u043c\u0438 \u043a\u043e\u043f\u0430\u0442\u044c\u0441\u044f \u0432 \u0434\u043e\u043a\u0443\u043c\u0435\u043d\u0442\u0430\u0446\u0438\u0438 \u0438 \u0432\u0430\u0448\u0438\u0445 \u043f\u0440\u043e\u0448\u043b\u044b\u0445 \u043f\u0440\u043e\u0435\u043a\u0442\u0430\u0445.<\/p>\n<p>  \u0412 \u044d\u0442\u043e\u043c \u0440\u0443\u043a\u043e\u0432\u043e\u0434\u0441\u0442\u0432\u0435 \u043c\u044b \u0440\u0430\u0441\u0441\u043c\u043e\u0442\u0440\u0438\u043c \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u043e\u0434\u0445\u043e\u0434 \u043a \u0430\u0443\u0442\u0435\u043d\u0442\u0438\u0444\u0438\u043a\u0430\u0446\u0438\u0438 (\u0430 \u0442\u0430\u043a\u0436\u0435 \u0443\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0438\u044e \u0434\u043e\u0441\u0442\u0443\u043f\u043e\u043c, SSO \u0438 \u0442.\u0434.) \u0432 React-\u043f\u0440\u0438\u043b\u043e\u0436\u0435\u043d\u0438\u044f\u0445.<\/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-354125","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/354125","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=354125"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/354125\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=354125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=354125"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=354125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}