Skip to content

Commit fc2b845

Browse files
committed
Merge branch 'main' of https://github.com/MicrosoftDocs/azure-docs-pr into ipv6ds-portal
2 parents 59c8da1 + 13b6952 commit fc2b845

File tree

179 files changed

+1675
-737
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

179 files changed

+1675
-737
lines changed

.openpublishing.redirection.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12848,6 +12848,16 @@
1284812848
"redirect_url": "/azure/cloudfoundry/cloudfoundry-deploy-your-first-app",
1284912849
"redirect_document_id": true
1285012850
},
12851+
{
12852+
"source_path_from_root": "/articles/virtual-machines/linux/overview.md",
12853+
"redirect_url": "/azure/virtual-machines/overview",
12854+
"redirect_document_id": true
12855+
},
12856+
{
12857+
"source_path_from_root": "/articles/virtual-machines/windows/overview.md",
12858+
"redirect_url": "/azure/virtual-machines/overview",
12859+
"redirect_document_id": false
12860+
},
1285112861
{
1285212862
"source_path_from_root": "/articles/virtual-machines/linux/cloudfoundry-get-started.md",
1285312863
"redirect_url": "/azure/cloudfoundry/cloudfoundry-get-started",

articles/active-directory/app-proxy/application-proxy-application-gateway-waf.md

Lines changed: 9 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ To ensure the connector VMs send requests to the Application Gateway, an [Azure
7171

7272
### Test the application.
7373

74-
After [adding a user for testing](/azure/active-directory/app-proxy/application-proxy-add-on-premises-application#add-a-user-for-testing), you can test the application by accessing https://www.fabrikam.one. The user will be prompted to authenticate in Azure AD, and upon successful authentication, will access the application.
74+
After [adding a user for testing](./application-proxy-add-on-premises-application.md#add-a-user-for-testing), you can test the application by accessing https://www.fabrikam.one. The user will be prompted to authenticate in Azure AD, and upon successful authentication, will access the application.
7575

7676
![Screenshot of authentication step.](./media/application-proxy-waf/sign-in-2.png)
7777
![Screenshot of server response.](./media/application-proxy-waf/application-gateway-response.png)
@@ -90,13 +90,12 @@ The Application Gateway [Firewall logs][waf-logs] provide more details about the
9090

9191
## Next steps
9292

93-
To prevent false positives, learn how to [Customize Web Application Firewall rules](/azure/web-application-firewall/ag/application-gateway-customize-waf-rules-portal), configure [Web Application Firewall exclusion lists](/azure/web-application-firewall/ag/application-gateway-waf-configuration?tabs=portal), or [Web Application Firewall custom rules](/azure/web-application-firewall/ag/create-custom-waf-rules).
94-
95-
[waf-overview]: /azure/web-application-firewall/ag/ag-overview
96-
[appgw_quick]: /azure/application-gateway/quick-create-portal
97-
[appproxy-add-app]: /azure/active-directory/app-proxy/application-proxy-add-on-premises-application
98-
[appproxy-optimize]: /azure/active-directory/app-proxy/application-proxy-network-topology
99-
[appproxy-custom-domain]: /azure/active-directory/app-proxy/application-proxy-configure-custom-domain
100-
[private-dns]: /azure/dns/private-dns-getstarted-portal
101-
[waf-logs]: /azure/application-gateway/application-gateway-diagnostics#firewall-log
93+
To prevent false positives, learn how to [Customize Web Application Firewall rules](../../web-application-firewall/ag/application-gateway-customize-waf-rules-portal.md), configure [Web Application Firewall exclusion lists](../../web-application-firewall/ag/application-gateway-waf-configuration.md?tabs=portal), or [Web Application Firewall custom rules](../../web-application-firewall/ag/create-custom-waf-rules.md).
10294

95+
[waf-overview]: ../../web-application-firewall/ag/ag-overview.md
96+
[appgw_quick]: ../../application-gateway/quick-create-portal.md
97+
[appproxy-add-app]: ./application-proxy-add-on-premises-application.md
98+
[appproxy-optimize]: ./application-proxy-network-topology.md
99+
[appproxy-custom-domain]: ./application-proxy-configure-custom-domain.md
100+
[private-dns]: ../../dns/private-dns-getstarted-portal.md
101+
[waf-logs]: ../../application-gateway/application-gateway-diagnostics.md#firewall-log
Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title: "Quickstart: Sign in users in JavaScript Angular single-page apps (SPA) with auth code and call Microsoft Graph"
3+
description: In this quickstart, learn how a JavaScript Angular single-page application (SPA) can sign in users of personal accounts, work accounts, and school accounts by using the authorization code flow and call Microsoft Graph.
4+
services: active-directory
5+
author: Dickson-Mwendia
6+
manager: CelesteDG
7+
ms.service: active-directory
8+
ms.subservice: develop
9+
ms.topic: portal
10+
ms.workload: identity
11+
ms.date: 08/16/2022
12+
ROBOTS: NOINDEX
13+
ms.author: dmwendia
14+
ms.custom: aaddev, "scenarios:getting-started", "languages:JavaScript", devx-track-js, mode-other
15+
#Customer intent: As an app developer, I want to learn how to get access tokens and refresh tokens by using the Microsoft identity platform so that my JavaScript Angular app can sign in users of personal accounts, work accounts, and school accounts.
16+
---
17+
18+
# Quickstart: Sign in and get an access token in an Angular SPA using the auth code flow
19+
20+
21+
> [!div renderon="docs"]
22+
> Welcome! This probably isn't the page you were expecting. While we work on a fix, this link should take you to the right article:
23+
>
24+
> > [Quickstart: Angular single-page app with user sign-in](single-page-app-quickstart.md?pivots=devlang-angular)
25+
>
26+
> We apologize for the inconvenience and appreciate your patience while we work to get this resolved.
27+
28+
> [!div renderon="portal" id="display-on-portal" class="sxs-lookup"]
29+
> # Quickstart: Sign in and get an access token in an Angular SPA using the auth code flow
30+
>
31+
> In this quickstart, you download and run a code sample that demonstrates how a JavaScript Angular single-page application (SPA) can sign in users and call Microsoft Graph using the authorization code flow. The code sample demonstrates how to get an access token to call the Microsoft Graph API or any web API.
32+
>
33+
> See [How the sample works](#how-the-sample-works) for an illustration.
34+
>
35+
> This quickstart uses MSAL Angular v2 with the authorization code flow.
36+
>
37+
> ## Prerequisites
38+
>
39+
> * Azure subscription - [Create an Azure subscription for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F)
40+
> * [Node.js](https://nodejs.org/en/download/)
41+
> * [Visual Studio Code](https://code.visualstudio.com/download) or another code editor
42+
>
43+
> #### Step 1: Configure your application in the Azure portal
44+
> For the code sample in this quickstart to work, add a **Redirect URI** of `http://localhost:4200/`.
45+
>
46+
> <button id="makechanges" class="nextstepaction configure-app-button"> Make these changes for me </button>
47+
>
48+
> > [!div id="appconfigured" class="alert alert-info"]
49+
> > ![Already configured](media/quickstart-v2-javascript/green-check.png) Your application is configured with these attributes.
50+
>
51+
> #### Step 2: Download the project
52+
>
53+
> Run the project with a web server by using Node.js
54+
>
55+
> > [!div class="nextstepaction"]
56+
> > <button id="downloadsample" class="download-sample-button">Download the code sample</button>
57+
>
58+
> > [!div class="sxs-lookup"]
59+
> > > [!NOTE]
60+
> > > `Enter_the_Supported_Account_Info_Here`
61+
>
62+
>
63+
> #### Step 3: Your app is configured and ready to run
64+
>
65+
> We have configured your project with values of your app's properties.
66+
>
67+
> #### Step 4: Run the project
68+
>
69+
> Run the project with a web server by using Node.js:
70+
>
71+
> 1. To start the server, run the following commands from within the project directory:
72+
> ```console
73+
> npm install
74+
> npm start
75+
> ```
76+
> 1. Browse to `http://localhost:4200/`.
77+
>
78+
> 1. Select **Login** to start the sign-in process and then call the Microsoft Graph API.
79+
>
80+
> The first time you sign in, you're prompted to provide your consent to allow the application to access your profile and sign you in. After you're signed in successfully, click the **Profile** button to display your user information on the page.
81+
>
82+
> ## More information
83+
>
84+
> ### How the sample works
85+
>
86+
> ![Diagram showing the authorization code flow for a single-page application.](media/quickstart-v2-javascript-auth-code/diagram-01-auth-code-flow.png)
87+
>
88+
> ### msal.js
89+
>
90+
> The MSAL.js library signs in users and requests the tokens that are used to access an API that's protected by the Microsoft identity platform.
91+
>
92+
> If you have Node.js installed, you can download the latest version by using the Node.js Package Manager (npm):
93+
>
94+
> ```console
95+
> npm install @azure/msal-browser @azure/msal-angular@2
96+
> ```
97+
>
98+
> ## Next steps
99+
>
100+
> For a detailed step-by-step guide on building the auth code flow application using vanilla JavaScript, see the following tutorial:
101+
>
102+
> > [!div class="nextstepaction"]
103+
> > [Tutorial: Sign in users and call Microsoft Graph](./tutorial-v2-javascript-auth-code.md)
Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
---
2+
title: "Quickstart: Sign in users in JavaScript React single-page apps (SPA) with auth code and call Microsoft Graph"
3+
description: In this quickstart, learn how a JavaScript React single-page application (SPA) can sign in users of personal accounts, work accounts, and school accounts by using the authorization code flow and call Microsoft Graph.
4+
services: active-directory
5+
author: Dickson-Mwendia
6+
manager: CelesteDG
7+
ms.service: active-directory
8+
ms.subservice: develop
9+
ms.topic: portal
10+
ms.workload: identity
11+
ms.date: 08/16/2022
12+
ROBOTS: NOINDEX
13+
ms.author: dmwendia
14+
ms.custom: aaddev, "scenarios:getting-started", "languages:JavaScript", devx-track-js, mode-other
15+
#Customer intent: As an app developer, I want to learn how to login, logout, conditionally render components to authenticated users, and acquire an access token for a protected resource such as Microsoft Graph by using the Microsoft identity platform so that my JavaScript React app can sign in users of personal accounts, work accounts, and school accounts.
16+
---
17+
> # Quickstart: Sign in and get an access token in a React SPA using the auth code flow
18+
19+
20+
> [!div renderon="docs"]
21+
> Welcome! This probably isn't the page you were expecting. While we work on a fix, this link should take you to the right article:
22+
>
23+
> > [Quickstart: React single-page app with user sign-in](single-page-app-quickstart.md?pivots=devlang-react)
24+
>
25+
> We apologize for the inconvenience and appreciate your patience while we work to get this resolved.
26+
27+
> [!div renderon="portal" id="display-on-portal" class="sxs-lookup"]
28+
> # Quickstart: Sign in and get an access token in a React SPA using the auth code flow
29+
> In this quickstart, you download and run a code sample that demonstrates how a JavaScript React single-page application (SPA) can sign in users and call Microsoft Graph using the authorization code flow. The code sample demonstrates how to get an access token to call the Microsoft Graph API or any web API.
30+
>
31+
> See [How the sample works](#how-the-sample-works) for an illustration.
32+
>
33+
> ## Prerequisites
34+
>
35+
> * Azure subscription - [Create an Azure subscription for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F)
36+
> * [Node.js](https://nodejs.org/en/download/)
37+
> * [Visual Studio Code](https://code.visualstudio.com/download) or another code editor
38+
>
39+
> #### Step 1: Configure your application in the Azure portal
40+
>
41+
> This code samples requires a **Redirect URI** of `http://localhost:3000/`.
42+
>
43+
> <button id="makechanges" class="nextstepaction configure-app-button"> Make these changes for me </button>
44+
>
45+
> > [!div id="appconfigured" class="alert alert-info"]
46+
> > ![Already configured](media/quickstart-v2-javascript/green-check.png) Your application is configured with these attributes.
47+
>
48+
> #### Step 2: Download the project
49+
>
50+
> Run the project with a web server by using Node.js
51+
>
52+
> > [!div class="nextstepaction"]
53+
> > <button id="downloadsample" class="download-sample-button">Download the code sample</button>
54+
>
55+
> > [!div class="sxs-lookup"]
56+
> > > [!NOTE]
57+
> > > `Enter_the_Supported_Account_Info_Here`
58+
>
59+
>
60+
> #### Step 3: Your app is configured and ready to run
61+
> We have configured your project with values of your app's properties.
62+
>
63+
> #### Step 4: Run the project
64+
>
65+
> Run the project with a web server by using Node.js:
66+
>
67+
> 1. To start the server, run the following commands from within the project directory:
68+
> ```console
69+
> npm install
70+
> npm start
71+
> ```
72+
> 1. Browse to `http://localhost:3000/`.
73+
>
74+
> 1. Select **Sign In** to start the sign-in process and then call the Microsoft Graph API.
75+
>
76+
> The first time you sign in, you're prompted to provide your consent to allow the application to access your profile and sign you in. After you're signed in successfully, click on the **Request Profile Information** to display your profile information on the page.
77+
>
78+
> ## More information
79+
>
80+
> ### How the sample works
81+
>
82+
> ![Diagram showing the authorization code flow for a single-page application.](media/quickstart-v2-javascript-auth-code/diagram-01-auth-code-flow.png)
83+
>
84+
> ### msal.js
85+
>
86+
> The MSAL.js library signs in users and requests the tokens that are used to access an API that's protected by the Microsoft identity platform.
87+
>
88+
> If you have Node.js installed, you can download the latest version by using the Node.js Package Manager (npm):
89+
>
90+
> ```console
91+
> npm install @azure/msal-browser @azure/msal-react
92+
> ```
93+
>
94+
> ## Next steps
95+
>
96+
> Next, try a step-by-step tutorial to learn how to build a React SPA from scratch that signs in users and calls the > Microsoft Graph API to get user profile data:
97+
>
98+
> > [!div class="nextstepaction"]
99+
> > [Tutorial: Sign in users and call Microsoft Graph from a React single-page app](tutorial-v2-react.md)
Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
---
2+
title: "Quickstart: Sign in users in JavaScript single-page apps (SPA) with auth code"
3+
description: In this quickstart, learn how a JavaScript single-page application (SPA) can sign in users of personal accounts, work accounts, and school accounts by using the authorization code flow.
4+
services: active-directory
5+
author: Dickson-Mwendia
6+
manager: CelesteDG
7+
ms.service: active-directory
8+
ms.subservice: develop
9+
ms.topic: portal
10+
ms.workload: identity
11+
ms.date: 08/16/2022
12+
ROBOTS: NOINDEX
13+
ms.author: dmwendia
14+
ms.custom: aaddev, "scenarios:getting-started", "languages:JavaScript", devx-track-js, mode-other
15+
#Customer intent: As an app developer, I want to learn how to get access tokens and refresh tokens by using the Microsoft identity platform so that my JavaScript app can sign in users of personal accounts, work accounts, and school accounts.
16+
---
17+
18+
# Quickstart: Sign in users and get an access token in a JavaScript SPA using the auth code flow with PKCE
19+
20+
> [!div renderon="docs"]
21+
> Welcome! This probably isn't the page you were expecting. While we work on a fix, this link should take you to the right article:
22+
>
23+
> > [Quickstart: JavaScript single-page app with user sign-in](single-page-app-quickstart.md?pivots=devlang-javascript)
24+
>
25+
> We apologize for the inconvenience and appreciate your patience while we work to get this resolved.
26+
27+
> [!div renderon="portal" id="display-on-portal" class="sxs-lookup"]
28+
> # Quickstart: Sign in users and get an access token in a JavaScript SPA using the auth code flow with PKCE
29+
>
30+
> In this quickstart, you download and run a code sample that demonstrates how a JavaScript single-page application (SPA) can sign in users and call Microsoft Graph using the authorization code flow with Proof Key for Code Exchange (PKCE). The code sample demonstrates how to get an access token to call the Microsoft Graph API or any web API.
31+
>
32+
> See [How the sample works](#how-the-sample-works) for an illustration.
33+
>
34+
> ## Prerequisites
35+
>
36+
> * Azure subscription - [Create an Azure subscription for free](https://azure.microsoft.com/free/?WT.mc_id=A261C142F)
37+
> * [Node.js](https://nodejs.org/en/download/)
38+
> * [Visual Studio Code](https://code.visualstudio.com/download) or another code editor
39+
>
40+
>
41+
> ### Step 1: Configure your application in the Azure portal
42+
> For the code sample in this quickstart to work, add a **Redirect URI** of `http://localhost:3000/`.
43+
>
44+
> <button id="makechanges" class="nextstepaction configure-app-button"> Make these changes for me </button>
45+
>
46+
> > [!div class="alert alert-info"]
47+
> > ![Already configured](media/quickstart-v2-javascript/green-check.png) Your application is configured with these attributes.
48+
>
49+
> ### Step 2: Download the project
50+
>
51+
> Run the project with a web server by using Node.js
52+
>
53+
> > [!div class="nextstepaction"]
54+
> > <button id="downloadsample" class="download-sample-button">Download the code sample</button>
55+
>
56+
> > [!div class="sxs-lookup"]
57+
> > > [!NOTE]
58+
> > > `Enter_the_Supported_Account_Info_Here`
59+
>
60+
> #### Step 3: Your app is configured and ready to run
61+
>
62+
> We have configured your project with values of your app's properties.
63+
>
64+
> Run the project with a web server by using Node.js.
65+
>
66+
> 1. To start the server, run the following commands from within the project directory:
67+
>
68+
> ```console
69+
> npm install
70+
> npm start
71+
> ```
72+
>
73+
> 1. Go to `http://localhost:3000/`.
74+
>
75+
> 1. Select **Sign In** to start the sign-in process and then call the Microsoft Graph API.
76+
>
77+
> The first time you sign in, you're prompted to provide your consent to allow the application to access your profile and sign you in. After you're signed in successfully, your user profile information is displayed on the page.
78+
>
79+
> ## More information
80+
>
81+
> ### How the sample works
82+
>
83+
> ![Diagram showing the authorization code flow for a single-page application.](media/quickstart-v2-javascript-auth-code/diagram-01-auth-code-flow.png)
84+
>
85+
> ### MSAL.js
86+
>
87+
> The MSAL.js library signs in users and requests the tokens that are used to access an API that's protected by Microsoft > identity platform. The sample's *index.html* file contains a reference to the library:
88+
>
89+
> ```html
90+
> <script type="text/javascript" src="https://alcdn.msauth.net/browser/2.0.0-beta.0/js/msal-browser.js" integrity=
91+
> "sha384-r7Qxfs6PYHyfoBR6zG62DGzptfLBxnREThAlcJyEfzJ4dq5rqExc1Xj3TPFE/9TH" crossorigin="anonymous"></script>
92+
> ```
93+
>
94+
> If you have Node.js installed, you can download the latest version by using the Node.js Package Manager (npm):
95+
>
96+
> ```console
97+
> npm install @azure/msal-browser
98+
> ```
99+
>
100+
> ## Next steps
101+
>
102+
> For a more detailed step-by-step guide on building the application used in this quickstart, see the following tutorial:
103+
>
104+
> > [!div class="nextstepaction"]
105+
> > [Tutorial: Sign in users and call Microsoft Graph](./tutorial-v2-javascript-auth-code.md)

0 commit comments

Comments
 (0)