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


Starting work on your new SPA (Single Page Application) and need a solid and FREE authentication and access control mechanism? In that case, the Microsoft Entra service (formerly Azure Active Directory) might be an excellent solution. This post will discuss how to register a SPA in Microsoft Entra step by step, to secure it against unauthorized access and utilize the ability to assign roles to users within a Tenant. The following example is based on a tutorial I found on GitHub here: LINK<\/a><\/p>\r\n\r\n\r\n\r\n

I assume that you already have your own Tenant (according to Microsoft’s Polish translations, it’s called “dzier\u017cawa,” but let’s stick with the original names). If not, you can find out how to create one here: LINK<\/a><\/p>\r\n\r\n\r\n\r\n


We proceed to configure our Tenant in Microsoft Entra, starting with creating a new App registration:<\/p>\r\n\r\n\r\n\r\n

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

<\/p>\r\n\r\n\r\n\r\n


We assign the name: msal-react-spa (we do not change the names of the registrations or descriptions, as the sample application will not work later on).<\/p>\r\n\r\n\r\n\r\n

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


We move to the Authentication tab.<\/p>\r\n\r\n\r\n\r\n

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


We add a configuration for the SPA platform (as shown in the pop-up window in the image below).<\/p>\r\n\r\n\r\n\r\n

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


We fill in two redirect URIs:<\/p>\r\n\r\n\r\n\r\n

    \r\n
  1. http:\/\/localhost:3000\/<\/code><\/li>\r\n\r\n\r\n\r\n
  2. http:\/\/localhost:3000\/redirect<\/code><\/li>\r\n<\/ol>\r\n\r\n\r\n\r\n
    \"\"<\/figure>\r\n\r\n\r\n\r\n


    We go to the Expose an API tab and add an application ID URI (leaving the default setting).<\/p>\r\n\r\n\r\n\r\n

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


    Now, we add a scope by filling in the necessary details:<\/p>\r\n\r\n\r\n\r\n

    access_via_approle_assignments<\/em><\/p>\r\n\r\n\r\n\r\n

    Access ‘msal-react-spa’ as the signed-in user assigned to App role<\/em>.<\/p>\r\n\r\n\r\n\r\n

    Allow the app to access the ‘msal-react-spa’ as a signed-in user assigned to one or more App roles<\/em>.<\/p>\r\n\r\n\r\n\r\n

    Access ‘msal-react-spa’ on your behalf after App role assignment<\/em>.<\/p>\r\n\r\n\r\n\r\n

    Allow the app to access the ‘msal-react-spa’ on your behalf after assignment to one or more App roles<\/em>.<\/p>\r\n\r\n\r\n\r\n

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


    In the Manifest tab, we change the highlighted field from null to 2.<\/p>\r\n\r\n\r\n\r\n

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


    In the API permissions tab, we add a permission.<\/p>\r\n\r\n\r\n\r\n

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

    Attention here! The tutorial suggests searching for APIs under the My APIs tab, but currently, due to changes in Azure, it is likely located in the tab as shown in the screenshot below:<\/p>\r\n\r\n\r\n\r\n

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


    We add a role that will later be transmitted to the application inside a claim.<\/p>\r\n\r\n\r\n\r\n

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


    It is also necessary to set the owner of the application.<\/p>\r\n\r\n\r\n\r\n

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


    Now, in the API permissions tab, click on ‘Grant admin consent’.<\/p>\r\n\r\n\r\n\r\n

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


    At this point, we go one level up to the Microsoft Entra configuration and move to the Enterprise applications tab to assign the newly created roles to specific users.<\/p>\r\n\r\n\r\n\r\n

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


    After correctly assigning roles to users, we return to App registration and move to the Token configuration tab, where we specify the options to be included in the token.<\/p>\r\n\r\n\r\n\r\n

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


    At this point, we need to launch the application to check if all the steps were correctly executed. We will address this topic in the next post. Here is the expected result in the token:<\/p>\r\n\r\n\r\n\r\n

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

    <\/p>\r\n\r\n\r\n\r\n

    <\/p>\r\n","protected":false},"excerpt":{"rendered":"

    Starting work on your new SPA (Single Page Application) and need a solid and FREE authentication and access control mechanism? In that case, the Microsoft Entra service (formerly Azure Active Directory) might be an excellent solution. This post will discuss how to register a SPA in Microsoft Entra step by step, to secure it against…<\/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,15,16,14,13,17,6,12],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/blog.fubuha.com\/index.php\/wp-json\/wp\/v2\/posts\/81"}],"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=81"}],"version-history":[{"count":3,"href":"https:\/\/blog.fubuha.com\/index.php\/wp-json\/wp\/v2\/posts\/81\/revisions"}],"predecessor-version":[{"id":149,"href":"https:\/\/blog.fubuha.com\/index.php\/wp-json\/wp\/v2\/posts\/81\/revisions\/149"}],"wp:attachment":[{"href":"https:\/\/blog.fubuha.com\/index.php\/wp-json\/wp\/v2\/media?parent=81"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.fubuha.com\/index.php\/wp-json\/wp\/v2\/categories?post=81"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.fubuha.com\/index.php\/wp-json\/wp\/v2\/tags?post=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}