You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
title: Test drive an Azure AD B2C web application | Microsoft Docs
2
+
title: Test drive an Azure AD B2C enabled web app | Microsoft Docs
3
3
description: Test drive sign in, sign up, edit profile, and reset password user journeys using a test Azure AD B2C environment
4
4
services: active-directory-b2c
5
5
documentationcenter: .net
@@ -14,22 +14,23 @@ ms.tgt_pltfrm: na
14
14
ms.devlang: dotnet
15
15
ms.topic: article
16
16
ms.date: 10/31/2017
17
-
ms.author: saraford
17
+
ms.author: patricka
18
18
19
19
---
20
-
# Test drive a web application configured with Azure AD B2C
20
+
# Test drive an Azure AD B2C enabled web app
21
21
22
-
Azure Active Directory B2C provides cloud identity management to keep your application, business, and customers protected. This quickstart uses a sample to-do list app to demonstrate:
22
+
Azure Active Directory B2C provides cloud identity management to keep your application, business, and customers protected. This quickstart uses a sample to-do list app to demonstrate:
23
23
24
-
* Using the **Sign Up or Sign In** policy to create or sign in with a social identity provider or a local account using an email address.
25
-
* Calling an API secured by Azure AD B2C to create and edit to-do items.
24
+
> [!div class="checklist"]
25
+
> * Sign-in with a custom login page.
26
+
> * Sign-in using a social identity provider.
27
+
> * Creating and managing your Azure AD B2C account and user profile.
28
+
> * Calling a web API secured by Azure AD B2C.
26
29
27
30
## Prerequisites
28
31
29
-
* Install [Visual Studio 2017](https://www.visualstudio.com/downloads/) with the following workloads:
30
-
-**ASP.NET and web development**
31
-
32
-
* A social account from either Facebook, Google, Microsoft, or Twitter. If you don't have a social account, a valid email address is required.
32
+
*[Visual Studio 2017](https://www.visualstudio.com/downloads/) with the **ASP.NET and web development** workload.
33
+
* A social account from either Facebook, Google, Microsoft, or Twitter.
@@ -41,87 +42,53 @@ Azure Active Directory B2C provides cloud identity management to keep your appli
41
42
42
43
In the sample application project folder, open the `B2C-WebAPI-DotNet.sln` solution in Visual Studio.
43
44
44
-
The solution consists of two projects:
45
+
The solution is a sample to-do list application consisting of two projects:
45
46
46
47
***TaskWebApp** – An ASP.NET MVC web application where a user can manage their to-do list items.
47
-
***TaskService** – An ASP.NET Web API backend that manages all CRUD operations performed on a user's To-do list items. The web app calls this API and displays the results.
48
+
***TaskService** – An ASP.NET Web API backend that manages operations performed on a user's To-do list items. The web app calls this web API and displays the results.
48
49
49
50
For this quickstart, you need to run both the `TaskWebApp` and `TaskService` projects at the same time.
50
51
51
-
1. In Solution Explorer, right-click on the solution and select **Set StartUp Projects...**.
52
+
1. In the Visual Studio menu, select **Projects > Set StartUp Projects...**.
52
53
2. Select **Multiple startup projects** radio button.
53
54
3. Change the **Action** for both projects to **Start**. Click **OK**.
54
55
55
56
56
57
57
58
Select **Debug > Start Debugging** to build and run both applications. Each application opens in its own browser tab:
58
59
59
-
*`https://localhost:44316/` - This page is the ASP.NET web application. You interact directly with this application in the quickstart.
60
-
*`https://localhost:44332/` - This page is the web API that is called by the ASP.NET web application.
60
+
`https://localhost:44316/` - This page is the ASP.NET web application. You interact directly with this application in the quickstart.
61
+
`https://localhost:44332/` - This page is the web API that is called by the ASP.NET web application.
61
62
62
63
## Create an account
63
64
64
-
Click the **Sign up / Sign in** link in the ASP.NET web application to start the **Sign Up or Sign In** workflow. When creating an account, you can use an existing social identity provider account or an email account.
65
+
Click the **Sign up / Sign in** link in the ASP.NET web application to start the **Sign Up or Sign In** workflow. When creating an account, you can use an existing social identity provider account or an email account. For this quickstart, use a social identity provider account from either Facebook, Google, Microsoft, or Twitter.
65
66
66
67
67
68
68
69
### Sign up using a social identity provider
69
70
70
-
To sign up using a social identity provider, click the button of the identity provider you want to use. If you prefer to use an email address, jump to the [Sign up using an email address](#sign-up-using-an-email-address) section.
71
+
To sign up using a social identity provider, click the button of the identity provider you want to use.
71
72
72
73
73
74
74
75
You need to authenticate (sign-in) using your social account credentials and authorize the application to read information from your social account. By granting access, the application can retrieve profile information from the social account such as your name and city.
75
76
76
-
77
+
Finish the sign-in process for the identity provider. For example, if you chose Twitter, enter your Twitter credentials and click **Sign in**.
77
78
78
-
Finish the sign-in process for the identity provider. For example, click **Sign in** button for Twitter.
79
+
79
80
80
-
Your new account profile details are pre-populated with information from your social account.
Your new Azure AD B2C account profile details are pre-populated with information from your social account.
83
82
84
83
Update the Display Name, Job Title, and City fields and click **Continue**. The values you enter are used for your Azure AD B2C user account profile.
85
84
86
-
You have successfully created a new Azure AD B2C user account that uses an identity provider.
87
-
88
-
Next step: [Jump to view your claims](#view-your-claims) section.
89
-
90
-
### Sign up using an email address
91
-
92
-
If you choose to not use a social account to provide authentication, you can create an Azure AD B2C user account using a valid email address. An Azure AD B2C local user account uses Azure Active Directory as the identity provider. To use your email address, click the **Don't have an account? Sign up now** link.
93
-
94
-
95
-
96
-
Enter a valid email address and click **Send verification code**. A valid email address is required to receive the verification code from Azure AD B2C.
97
-
98
-
Enter the verification code you receive in email and click **Verify code**.
99
-
100
-
Add your profile information and click **Create**.
101
-
102
-
103
-
104
-
You have successfully created a new Azure AD B2C local user account.
105
-
106
-
## Reset your password
107
-
108
-
If you created your account using an email address, Azure AD B2C has functionality to allow users to reset their password. To edit the profile you created, click your profile name in the menu bar and select **Reset Password**.
109
-
110
-
Verify your email address by entering it and clicking **Send verification code**. A verification code is sent to your email address.
111
-
112
-
Enter the verification code you received in email and click **Verify code**.
113
-
114
-
After your email address is verified, click **Continue**.
115
-
116
-
Enter your new password and click **Continue**.
117
-
118
-
## View your claims
119
-
120
-
Click **Claims** in the web application menu bar to view the claims associated with your last action.
87
+
You have successfully:
123
88
124
-
In this example, the last action was for the *sign in or sign up* experience. Notice the **Claim type**`http://schemas.microsoft.com/claims/authnclassreference` is `b2c_1_susi` indicating the last action was sign-up or sign-in. If the last action was password reset, the **Claim type** would be `b2c_1_reset`.
89
+
> [!div class="checklist"]
90
+
> * Authenticated using an identity provider.
91
+
> * Created an Azure AD B2C user account.
125
92
126
93
## Edit your profile
127
94
@@ -133,32 +100,26 @@ Change your **Display name** and **City**. Click **Continue** to update your pr
Notice your display name in the upper right portion of the page shows the updated name.
141
104
142
-
Notice the **Claim type**`http://schemas.microsoft.com/claims/authnclassreference` has updated to `b2c_1_edit_profile` indicating the last action performed was a profile edit. Also note, the name and city are the new values *Sara S.* and *Seattle*.
143
-
144
-
## Access a resource
105
+
## Access a secured web API resource
145
106
146
107
Click **To-Do List** to enter and modify your to-do list items. The ASP.NET web application includes an access token in the request to the web API resource requesting permission to perform operations on the user's to-do list items.
147
108
148
109
Enter text in the **New Item** text box. Click **Add** to call the Azure AD B2C secured web API that adds a to-do list item.
149
110
150
111
151
112
152
-
## Other scenarios
113
+
You have successfully used your Azure AD B2C user account to make an authorized call an Azure AD B2C secured web API.
153
114
154
-
Other scenarios to test drive are as follows:
115
+
## Next steps
155
116
156
-
* Sign out of the application and click **To-do list**. Notice how you are prompted to sign in and your list items are persisted.
157
-
* Create a new account using a different type of account. For example, use a social identity provider if you created an account using an email address previously.
117
+
The sample used in this quickstart can be used to try other Azure AD B2C scenarios including:
158
118
159
-
## Next steps
119
+
* Creating a new local account using an email address.
120
+
* Resetting your local account password.
160
121
161
-
The next step is to create your own Azure AD B2C tenant and configure the sample to run using your tenant.
122
+
If you're ready to delve into creating your own Azure AD B2C tenant and configure the sample to run using your own tenant, try out the following tutorial.
162
123
163
124
> [!div class="nextstepaction"]
164
-
> [Create an Azure Active Directory B2C tenant in the Azure portal](active-directory-b2c-get-started.md)
125
+
> [Create an ASP.NET web app with Azure Active Directory B2C sign-up, sign-in, profile edit, and password reset](active-directory-b2c-devquickstarts-web-dotnet-susi.md)
0 commit comments