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
> - Create a new Blazor Server app configured to use Azure AD for authentication
25
+
> - Create a new Blazor Server app configured to use Azure AD for authentication for users in a single organization (in the Azure Active Directory tenant the app is registered)
26
26
> - Handle both authentication and authorization using `Microsoft.Identity.Web`
27
27
> - Retrieve data from a protected web API, Microsoft Graph
Every app that uses Azure AD for authentication must be registered with Azure AD. Follow the instructions in [Register an application](quickstart-register-app.md) with these additions:
41
-
42
-
- For **Supported account types**, select **Accounts in this organizational directory only**.
43
-
- Leave the **Redirect URI** drop down set to **Web** and enter `https://localhost:5001/signin-oidc`. The default port for an app running on Kestrel is `5001`. If the app is available on a different port, specify that port number instead of `5001`.
44
-
45
-
Under **Manage**, select **Authentication** > **Implicit grant and hybrid flows**. Select **ID tokens**, and then select **Save**.
46
-
47
-
Finally, because the app calls a protected API (in this case Microsoft Graph), it needs a client secret in order to verify its identity when it requests an access token to call that API.
48
-
49
-
1. Within the same app registration, under **Manage**, select **Certificates & secrets** and then **Client secrets**.
50
-
2. Create a **New client secret** that never expires.
51
-
3. Make note of the secret's **Value** as you'll use it in the next step. You can’t access it again once you navigate away from this pane. However, you can recreate it as needed.
37
+
- The tenant-id or domain of the Azure Active Directory associated with your Azure Account
52
38
53
39
## Create the app using the .NET CLI
54
40
55
-
To create the application, run the following command. Replace the placeholders in the command with the proper information from your app's overview page and execute the command in a command shell. The output location specified with the `-o|--output` option creates a project folder if it doesn't exist and becomes part of the app's name.
Now, navigate to your new Blazor app in your editor and add the client secret to the _appsettings.json_ file, replacing the text "secret-from-app-registration".
47
+
## Install the Microsoft Identity App Sync .NET Tool
69
48
70
-
```json
71
-
"ClientSecret": "secret-from-app-registration",
49
+
```dotnetcli
50
+
dotnet tool install --global msidentity-app-sync
72
51
```
73
52
74
-
## Test the app
53
+
This tool will automate the following tasks for you:
75
54
76
-
In your terminal, run the following command:
55
+
- Register your application in Azure Active Directory
56
+
- Create a secret for your registered application
57
+
- Register redirect URIs based on your launchsettings.json
58
+
- Initialize the use of user secrets in your project
59
+
- Store your application secret in user secrets storage
60
+
- Update your appsettings.json with the client-id, tenant-id, and others.
77
61
78
-
```dotnetcli
79
-
dotnet run
80
-
```
62
+
.NET Tools extend the capabilities of the dotnet CLI command. To learn more about .NET Tools, see [.NET Tools](/dotnet/core/tools/global-tools).
81
63
82
-
In your browser, navigate to `https://localhost:<port number> `, and log in using an Azure AD user account to see the app running.
64
+
For more information on user secrets storage, see [safe storage of app secrets during development](/aspnet/core/security/app-secrets).
83
65
84
-
## Retrieving data from Microsoft Graph
66
+
## Use the Microsoft Identity App Sync Tool
85
67
86
-
[Microsoft Graph](/graph/overview) offers a range of APIs that provide access to your users' Microsoft 365 data. By using the Microsoft identity platform as the identity provider for your app, you have easier access to this information since Microsoft Graph directly supports the tokens issued by the Microsoft identity platform. In this section, you add code to display the signed in user's emails on the application's "fetch data" page.
68
+
Run the following command to register your app in your tenant and update the .NET configuration of your application. Provide the username/upn belonging to your Azure Account (for instance, `[email protected]`) and the tenant ID or domain name of the Azure Active Directory associated with your Azure Account. If you use an account that is signed in in either Visual Studio, Azure CLI, or Azure PowerShell, you'll benefit from single sign-on (SSO).
87
69
88
-
Before you start, log out of your app since you'll be making changes to the required permissions, and your current token won't work. If you haven't already, run your app again and select **Log out** before updating the code below.
Now you'll update your app's registration and code to pull a user's email and display the messages within the app. To achieve this, first extend the app registration permissions in Azure AD to enable access to the email data. Then, add code to the Blazor app to retrieve and display this data in one of the pages.
74
+
> [!Note]
75
+
> - You don't need to provide the username if you are signed in with only one account in the developer tools.
76
+
> - You don't need to provide the tenant-id if the tenant in which you want to create the application is your home tenant.
91
77
92
-
1. In the Azure portal, select your app in **App registrations**.
93
-
1. Under **Manage**, select **API permissions**.
94
-
1. Select **Add a permission** > **Microsoft Graph**.
95
-
1. Select **Delegated Permissions**, then search for and select the **Mail.Read** permission.
96
-
1. Select **Add permissions**.
78
+
## Optional - Create a development SSL certificate
97
79
98
-
In the _appsettings.json_ file, update your code so it fetches the appropriate token with the right permissions. Add `mail.read` after the `user.read` scope under `DownstreamAPI`. This is specifying which scopes (or permissions) the app will request access to.
80
+
In order to avoid SSL errors/warnings when browsing the running application, you can use the following on macOS and Windows to generate a self-signed SSL certificate for use by .NET Core.
99
81
100
-
```json
101
-
"Scopes": "user.read mail.read"
82
+
```dotnetcli
83
+
dotnet dev-certs https --trust
102
84
```
103
85
104
-
Next, in the _Pages_ folder, update the code in the _FetchData.razor_ file to retrieve email data instead of the default (random) weather details. Replace the code in that file with the following code snippet:
Launch the app. You’ll notice that you're prompted for the newly added permissions, indicating that everything is working as expected. Now, beyond basic user profile data, the app is requesting access to email data.
88
+
In your terminal, run the following command:
196
89
197
-
After granting consent, navigate to the "Fetch data" page to read some email.
90
+
```dotnetcli
91
+
dotnet run
92
+
```
198
93
199
-
:::image type="content" source="./media/tutorial-blazor-server/final-app-2.png" alt-text="Screenshot of the final app. It has a heading that says Hello Nicholas and it shows a list of emails belonging to Nicholas.":::
94
+
Browse to the running web application using the URL outputted by the command line.
0 commit comments