{"id":115,"date":"2024-02-25T09:16:29","date_gmt":"2024-02-25T09:16:29","guid":{"rendered":"https:\/\/blog.fubuha.com\/?p=115"},"modified":"2024-06-17T05:48:35","modified_gmt":"2024-06-17T05:48:35","slug":"azure-app-registration-role-w-aplikacji-spa-2-2","status":"publish","type":"post","link":"https:\/\/blog.fubuha.com\/index.php\/2024\/02\/25\/azure-app-registration-role-w-aplikacji-spa-2-2\/","title":{"rendered":"Azure App Registration – roles in react SPA (2\/2)"},"content":{"rendered":"\r\n

Part 1<\/a><\/p>\r\n\r\n\r\n\r\n


We continue the implementation of a free and robust authentication and access control mechanism in the SPA application, namely Azure App Registration. In this post, we will use the previously created app registration to create a working demo. Let’s move directly to the example described in the Microsoft documentation. LINK<\/a>.<\/p>\r\n\r\n\r\n\r\n


To start running the example, you should begin by preparing your runtime environment. Here are the steps outlined in the documentation:<\/p>\r\n\r\n\r\n\r\n

Preinstaled Node.js<\/a> (server javascript) \/ installed GIT<\/a>
(tool for working with code repositories) \/ Modern web browser. This example uses ES6 conventions. The tutorial suggests using VS Code, but you can manage without it. We start by downloading the project, so create a new folder on drive C (creating a folder on the desktop may cause problems) and enter ‘cmd’ in the address bar to open the console.<\/p>\r\n\r\n\r\n\r\n

\"\"<\/figure>\r\n\r\n\r\n\r\n


After launching the console, we enter the command:<\/p>\r\n\r\n\r\n\r\n

git clone https:\/\/github.com\/Azure-Samples\/ms-identity-javascript-react-tutorial.git<\/code><\/pre>\r\n\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n

Now, we execute the commands (confirming each line with Enter).<\/p>\r\n\r\n\r\n\r\n
cd ms-identity-javascript-react-tutorial\r\ncd 5-AccessControl\\1-call-api-roles\\SPA\r\nnpm install<\/code><\/pre>\r\n\r\n\r\n\r\n

Installing all dependencies may take a while, and upon completion, we should see the following message:<\/p>\r\n\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n

Now, in the file explorer, open the file authConfig.js (path is \\ms-identity-javascript-react-tutorial\\5-AccessControl\\1-call-api-roles\\API) and fill it out based on the app registration done in part 1 of the blog. Save the changes.<\/p>\r\n\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n

Next, move on to edit the second file authConfig.js (path \\ms-identity-javascript-react-tutorial\\5-AccessControl\\1-call-api-roles\\SPA\\src\\authConfig.js) and fill it out with data from the app registration, and of course, save the changes.<\/p>\r\n\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n
At this point, we are ready to launch the sample application. We have two applications: one Frontend (React) and the other Backend (Node.js server). We go to the directory created at the beginning of the blog:<\/p>\r\n\r\n\r\n\r\n
\/\/FRONTEND\r\ncd ms-identity-javascript-react-tutorial\r\ncd 5-AccessControl\\1-call-api-roles\\SPA\r\nnpm start<\/code><\/pre>\r\n\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n
\/\/FRONTEND\r\ncd ms-identity-javascript-react-tutorial\r\ncd 5-AccessControl\\1-call-api-roles\\SPA\r\nnpm start<\/code><\/pre>\r\n\r\n\r\n\r\n

The application should start automatically; if not, launch the browser and enter the address http:\/\/localhost:3000\/<\/a>. The next step is to start the backend application:<\/p>\r\n\r\n\r\n\r\n
\/\/BACKEND\r\ncd ms-identity-javascript-react-tutorial\r\ncd 5-AccessControl\\1-call-api-roles\\API\r\nnpm install\r\nnpm start<\/code><\/pre>\r\n\r\n\r\n\r\n
\"\"<\/figure>\r\n\r\n\r\n\r\n

At this point, we have a working example of authentication using SPA application registration in Microsoft Entra, in which the data embedded in the authorization token are detailed. A detailed description of the functionalities implemented in the example and a discussion of the source codes can be found in the Microsoft documentation. Microsoft<\/a> .<\/p>\r\n\r\n\r\n\r\n
The topic is extensive and complex, but it is an excellent starting point for building your own application with authentication and roles defined in Microsoft Entra.<\/p>\r\n\r\n\r\n\r\n
\"\"<\/figure>\r\n","protected":false},"excerpt":{"rendered":"
Part 1 We continue the implementation of a free and robust authentication and access control mechanism in the SPA application, namely Azure App Registration. In this post, we will use the previously created app registration to create a working demo. Let’s move directly to the example described in the Microsoft documentation. LINK. To start running…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"footnotes":""},"categories":[2],"tags":[8,10,15,16,14,13,6,12],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/blog.fubuha.com\/index.php\/wp-json\/wp\/v2\/posts\/115"}],"collection":[{"href":"https:\/\/blog.fubuha.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.fubuha.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.fubuha.com\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.fubuha.com\/index.php\/wp-json\/wp\/v2\/comments?post=115"}],"version-history":[{"count":4,"href":"https:\/\/blog.fubuha.com\/index.php\/wp-json\/wp\/v2\/posts\/115\/revisions"}],"predecessor-version":[{"id":151,"href":"https:\/\/blog.fubuha.com\/index.php\/wp-json\/wp\/v2\/posts\/115\/revisions\/151"}],"wp:attachment":[{"href":"https:\/\/blog.fubuha.com\/index.php\/wp-json\/wp\/v2\/media?parent=115"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.fubuha.com\/index.php\/wp-json\/wp\/v2\/categories?post=115"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.fubuha.com\/index.php\/wp-json\/wp\/v2\/tags?post=115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}