Project

How did this template come about?

We wanted to create a one stop tutorial for anyone wanting to create their own Blazor WASM application backed by GraphQL / EntityFramework.

Go check out our internal tool that inspired us to create this template

This repo contains sample code for creating a secure app with the following stack. UI: Blazor Web Assembly (WASM) API: GraphQL based on the HotChocolate package

What is a GraphQL?

In this app the UI uses Azure AD for auth. The API is protected and only accepts authorized requests with a valid Oaauth token.

Steps to deploy in your Azure subscription

Azure AD

Go and read more about Authentication and Authorization in AzureAd

Create API App Registration

  1. Name: blazor-graphql-api
  2. Select Multi or Single Tenant (we used single tenant for our example)
  3. Redirect URL:
  1. "Certificates and Secrets" and add a new secret. Please store it somewhere safe
  2. Click Expose API
  • Add a new scope: leave the api url the same (ex: api://x8xxd1e-141c-xxxxxx-32aba6f12dxx)
  • scope: graphql.all
    • Who can consent: Admins and users
      • Fill out consent title and descripton for both Admin and User

Things you will need for further setup (copy somewhere)

Client ID

Client Secret

API Url (ex: api://18715d1e-141c-445e-999c-432aba6f12d2))

Tenant ID

Create UI App Registration

Name: (for example) blazor-graphql-ui

Accounts in this organization (single or multi)

Redirect URLs: - (Single Page App): https://localhost:5001/authentication/callback - https://blazorgraphqlui.azurewebsites.net/authentication/callback

Click on Authentication

If you want to separately test out the API with out the blazor portion you can use apps like Postman.

- Add Web Redirect URL (for example, https://oauth.pstmn.io/v1/callback)
- *If you have Multifactor Auth you must use Authorize wtih PKCE in the postman app.*

Add API Permissions

  • In the portal click on API Permissions
  • Click + Add a New Permission
  • Click on "My APIs"
  • Click on the API you exposed earlier (for example: blazor-graphql-api)
  • Check the checkbox for 'graphql.all'
  • Click 'Add Permission'

Things you will need for further setup (copy somewhere)

Client ID

Tenant ID

Tie the UI and the API registration

Now go back to the App Registration you created for the API.

Click on Expose an API

And add the UI app's client ID to the list of authorized Apps.'

Blazor App

From Nothing:

  • Create new VS Solution with a Blazor App with Microsoft Identity Provider Auth.

  • Open the solution file
  • Edit the app-settings.json file with your client id and tenant EX (Note below values are not valid and need to be replaced with valid values
  "APIBaseURL": "https://blazorgraphqlapi.azurewebsites.net",
  "APIScope": "api://187<replace..........>2d2/graphql.all",
  "AzureAd": {
    "Authority": "https://login.microsoftonline.com/5df988bf-86f1-41af-91ab-2d7cd011db47",
    "ClientId": "2c92f0fd-70bf-468a-83d7-94f8a3074650",
    "ValidateAuthority": true
  }
}

Azure Storage Static Site


Follow these instructions to create a static site: https://docs.microsoft.com/en-us/azure/storage/blobs/storage-blob-static-website

Example name used in this starter kit: blazorgraphqlui

Azure App Service (.NET Core, Windows)


Follow these instructions to create a .NET Windows site: https://docs.microsoft.com/en-us/azure/app-service/quickstart-arm-template?pivots=platform-linux

Example name used in this starter kit: blazorgraphqlapi

Azure Static Web App


Azure Static Web Apps provides two options for deployment configuration:

  • Github
  • Other

Github

When choosing the 'Github' deployment option, Azure Static Web Apps will add a Github action to your selected repository. This will automatically build and deploy your site whenever a code change is pushed.

Browse to the Azure Portal and create a new Azure Static Web App using this quick start guide

** Note that you are not deploying an API to Azure Functions with this starter kit **

Your configuration should look similar to the following:

Create Static WebApp

  1. Click "Review+Create" to review your settings
  2. Click "Create"

Other

When choosing the 'Other' deployment option, Azure Static Web Apps will provide you with a Deployment Token. This can be used to establish a secure connection from other devops systems.

In this example, we will be using Azure DevOps.

Follow this guide to configure Deployment from Azure DevOps

After step 4, your YAML should look like the following:

trigger:
  - main

pool:
  vmImage: ubuntu-latest

steps:
  - checkout: self
    submodules: true
  - task: AzureStaticWebApp@0
    inputs:
      app_location: 'blazorui'
      api_location: ''
      output_location: 'wwwroot'
      azure_static_web_apps_api_token: $(deployment_token)

.Net Core Api (with GraphQL)

  • Create new VS Solution with a .Net Core Api with Microsoft Identity Provider Auth.

  • Open the solution file
  • Edit the app-settings.json file with your client id and tenant EX (Note below values are not valid and need to be replaced with valid values
  {
  "AzureAd": {
    "Instance": "https://login.microsoftonline.com/",
    "Domain": "<name your tenant>.onmicrosoft.com",
    "TenantId": "<Tenant id>",
    "ClientId": "<API app regisration ID>",
    "ClientSecret": "<API app regisration SECRET>"
  }
}

Additional Resources

Contributing

This project welcomes contributions and suggestions. Most contributions require you to agree to a Contributor License Agreement (CLA) declaring that you have the right to, and actually do, grant us the rights to use your contribution. For details, visit https://cla.opensource.microsoft.com.

When you submit a pull request, a CLA bot will automatically determine whether you need to provide a CLA and decorate the PR appropriately (e.g., status check, comment). Simply follow the instructions provided by the bot. You will only need to do this once across all repos using our CLA.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

Trademarks

This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft trademarks or logos is subject to and must follow Microsoft's Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship. Any use of third-party trademarks or logos are subject to those third-party's policies.