diff --git a/4-Deployment/2-deploy-static/App/.env b/4-Deployment/2-deploy-static/App/.env new file mode 100644 index 00000000..6119198f --- /dev/null +++ b/4-Deployment/2-deploy-static/App/.env @@ -0,0 +1,4 @@ +REACT_APP_AAD_APP_CLIENT_ID= +REACT_APP_AAD_APP_TENANT_ID= +REACT_APP_AAD_APP_REDIRECT_URI= +REACT_APP_AAD_APP_FUNCTION_SCOPE_URI= \ No newline at end of file diff --git a/4-Deployment/2-deploy-static/App/src/authConfig.js b/4-Deployment/2-deploy-static/App/src/authConfig.js index 248c683c..b6b8de94 100644 --- a/4-Deployment/2-deploy-static/App/src/authConfig.js +++ b/4-Deployment/2-deploy-static/App/src/authConfig.js @@ -12,10 +12,10 @@ import { LogLevel } from "@azure/msal-browser"; */ export const msalConfig = { auth: { - clientId: "Enter_the_Application_Id_Here", // This is the ONLY mandatory field that you need to supply. - authority: "https://login.microsoftonline.com/Enter_the_Tenant_Info_Here", // Defaults to "https://login.microsoftonline.com/common" - redirectUri: "/", // You must register this URI on Azure Portal/App Registration. Defaults to window.location.origin - postLogoutRedirectUri: "/", // Indicates the page to navigate after logout. + clientId: `${process.env["REACT_APP_AAD_APP_CLIENT_ID"]}`, // This is the ONLY mandatory field that you need to supply. + authority: `https://login.microsoftonline.com/${process.env["REACT_APP_AAD_APP_TENANT_ID"]}`, // Defaults to "https://login.microsoftonline.com/common" + redirectUri: `${process.env["REACT_APP_AAD_APP_REDIRECT_URI"]}`, // You must register this URI on Azure Portal/App Registration. Defaults to window.location.origin + postLogoutRedirectUri: `${process.env["REACT_APP_AAD_APP_REDIRECT_URI"]}`, // Indicates the page to navigate after logout. navigateToLoginRequestUrl: false, // If "true", will navigate back to the original request location before processing the auth code response. }, cache: { @@ -68,6 +68,6 @@ export const protectedResources = { }, functionApi: { endpoint: "/api/hello", - scopes: ["Enter_the_Web_Api_Scope_Here"], // e.g. api://xxxxxx/access_as_user + scopes: [`${process.env["REACT_APP_AAD_APP_FUNCTION_SCOPE_URI"]}/access_as_user`], // e.g. api://xxxxxx/access_as_user } } diff --git a/4-Deployment/2-deploy-static/README.md b/4-Deployment/2-deploy-static/README.md index 77284101..de55ab5c 100644 --- a/4-Deployment/2-deploy-static/README.md +++ b/4-Deployment/2-deploy-static/README.md @@ -93,10 +93,10 @@ Open the project in your IDE (like Visual Studio or Visual Studio Code) to confi > In the steps below, "ClientID" is the same as "Application ID" or "AppId". -1. Open the `App/src/authConfig.js` file. -1. Find the key `Enter_the_Application_Id_Here` and replace the existing value with the application ID (clientId) of `msal-react-spa` app copied from the Azure portal. -1. Find the key `Enter_the_Tenant_Info_Here` and replace the existing value with your Azure AD tenant ID. -1. Find the key `Enter_the_Web_Api_Scope_Here` and replace the existing value with APP ID URI that you've registered earlier, e.g. `api://****-****-********-********/access_as_user` +1. Open the `App/src/.env` file. +1. Find the `REACT_APP_AAD_APP_CLIENT_ID` environment variable and add the application ID (clientId) of `msal-react-spa` app copied from the Azure portal. +1. Find the `REACT_APP_AAD_APP_TENANT_ID` environment variable and add your Azure AD tenant ID. +1. Find the `REACT_APP_AAD_APP_REDIRECT_URI` environment variable and add the APP ID URI that you've registered earlier, e.g. `api://****-****-********-********/` ## Deployment