🔏
Azure Serverless Quickstart
  • Introduction
  • Initial Setup
    • Workstation Installs
    • Codebase
      • Directory Structure
      • User Interface Project
        • Configuring StoryBook
        • Configure Tailwind
        • Configure Craco
        • -Architectural Decision Log
      • Data Access Project
        • DDD
      • Untitled
      • Full Stack Debugging
      • Creating GitHub Project
    • Infrastructure
      • Configure Session Behavior
      • Create AAD Tenant
      • Resource Group
      • Create AAD B2C Instance
        • Identity Experience Framework
        • Configure Session Behavior
      • Storage Account & CDN
        • CDN Rules
        • Configure Azure BLOB Storage
      • App Insights
        • Create AppInsight Account
        • Apollo GraphQL App Insights Configuration
      • CosmosDB
      • Twilio SendGrid
      • KeyVault
      • Function
      • Function App Settings
      • Front Door
      • DevOps
      • Optional Items
        • Azure Data Factory
      • Azure Event Hub
    • CICD and Source Control
      • Azure DevOps
      • SonarCloud
        • Incorporate into Yaml
      • Chromatic
      • User Interface YAML
      • CICD for Data Access
        • Create Pipeline
        • Data Access YAML
  • Application Structure
    • Connect Apollo
      • Apollo Overview
      • Create Apollo Component
    • MongoDB Integration
      • Mappings
      • Directory Structure
      • Apollo Connection
      • Models
      • Queries Mutations and Subscriptions
      • Caching Reponses
    • Integrating GraphQL Tools
      • GraphQL Code Generator
    • Feature Flags
      • Flag Structure & Storage
      • Website Integration
      • Apollo Integration
      • Tips and Techniques
      • Alternative Approaches
    • React Router
    • Adding Authentication
      • Create AAD Applications
      • Configure AAD For External Identities
      • Adding MSAL And React
      • Add MSAL to the build
      • Add MSAL to ApolloClient
      • Add MSAL to ApolloServer
    • Ant Design
    • Jest Tests
  • Azure Active Directory Business-to-Consumer (AD B2C)
    • Introduction
    • How to navigate through AD B2C documentation
    • Localization
    • Abbreviations
    • Azure AD B2C Extension
  • Cognitive Search
  • Cost Analysis
  • Technical Architecture
    • Identity and Access Control
  • Adding Functionality
    • Google Analytics
      • Create Analytics
    • DAPR
      • DAPR setup
      • DAPR Services (ignore for now)
        • Identity
  • Patterns and Practices
    • Idempotent Messages
    • Pathways
    • DDD
      • Initial Setup
        • Aggregate Root
        • Entity
        • Value Object
      • Field Types
        • Primitive Types
        • Non-Primitive Types
          • Types.DocumentArray
          • PopulatedDoc
          • Custom Types
      • Example Walkthrough
  • Open Items
    • Issue Tracking
  • Helpful Resources
  • DDD
    • Page 1
  • Experimental
    • StaticWebApp
    • Azure Maps
Powered by GitBook
On this page
  • Create AAD Application for UI
  • Create AAD Application for the API
  • Create Custom Roles for UI and API
  • Add a user to the roles

Was this helpful?

  1. Application Structure
  2. Adding Authentication

Create AAD Applications

PreviousAdding AuthenticationNextConfigure AAD For External Identities

Last updated 4 years ago

Was this helpful?

Create AAD Application for UI

Create an AAD Application for the UI:

  1. Go to the new pane.

  2. Click + New Registration

    1. If prompted choose Register in this Directory

  3. Enter a "ShareThrift" for your application.

  4. Under Supported account types, select Accounts in any organizational directory and personal Microsoft accounts.

  5. Redirect URI

    1. Choose Single-page application (SPA) from the option list

    2. For the URI add the public URL from your CDN Endpoint, e.g https://sharethrift.azureedge.net)

  6. Select Register.

Configure AAD Application for the UI

  • In the AAD Application just created, navigate to Manage > Authentication in the navigation menu on the left.

  • In Platform Configurations, look for the Single Page Application

  • in the section, Redirect URIs

    • Click Add URI and add: http://localhost:5000/

  • Logout URL add:

    • (add the public URL from your CDN Endpoint, e.g https://sharethrift.azureedge.net) + /logged-out

  • Implicit Grant (leave checkboxes unchecked)

  • Live SDK Support: Yes

  • Default Client Type: No

  • Choose Save at the top of the screen.

  • Copy the Application (client id) from the Overview panel of this Application to a text document, well use it shortly

Create AAD Application for the API

Create an AAD Application for the API:

  1. Click + New Registration

    1. If prompted choose Register in this Directory

  2. Enter a "ShareThrift" for your application.

  3. Under Supported account types, select Accounts in any organizational directory and personal Microsoft accounts.

  4. Redirect URI (leave blank)

  5. Select Register.

Expose an AAD Api / Add Client Application

  • Under Manage > Select Expose An Api

  • Application ID URI : Select Set and

    • choose a value like api://sharethrift<randomnumber>.com

    • click Save

  • Scopes defined by this API : click + Add a scope, the add a scope pane showed.

    • Scope Name: access_as_user

    • Who can consent: Admins and users

    • Admin consent display name: Access ShareThrift API

    • Admin consent description: Allows the app to access the ShareThrift API as the signed-in user.

    • User consent display name: Access ShareThrift API

    • User consent description: Allow the application to access the ShareThrift API on your behalf.

    • State: Enabled

    • Click Add Scope (the pane will disappear)

  • Authorized Client Applications

    • Click Add a client application

    • Paste in the Application (client id) value from the AAD Application for the UI

    • Check the the api://sharethrift<randomnumber>.com/access_as_user scope you just created.

    • Click Save

Create Custom Roles for UI and API

Repeat the following for BOTH the UI and the API Applications, be sure to change the ID to a new GUID for each value each time.

  • Under Manage > Select Manifest

  • Locate the area of the document with

    • "appRoles": [],

  • And replace it with:

    • (Be sure to update the <<CHANGE TO NEW GUID>> with new, unique GUID values)

"appRoles": [
    {
      "allowedMemberTypes": [
        "User"
      ],
      "displayName": "Moderator",
      "id": "<<CHANGE TO NEW GUID>>",
      "isEnabled": true,
      "description": "Moderators Have the ability reject items requested to be shared due to violations of policy.",
      "value": "Moderator"
    },
    {
      "allowedMemberTypes": [
        "User"
      ],
      "displayName": "Partner Technical Administrator",
      "id": "<<CHANGE TO NEW GUID>>",
      "isEnabled": true,
      "description": "Partner Technical Administrators are technical staff who have the ability to change SAML config and add/remove users.",
      "value": "PartnerTechAdmin"
    },
    {
      "allowedMemberTypes": [
        "User"
      ],
      "displayName": "Partner Billing Administrator",
      "id": "<<CHANGE TO NEW GUID>>",
      "isEnabled": true,
      "description": "Partner Billing Administrators are staff with ability to see and work with financial data.",
      "value": "PartnerBillingAdmin"
    },
    {
      "allowedMemberTypes": [
        "User"
      ],
      "displayName": "Partner Staff",
      "id": "<<CHANGE TO NEW GUID>>",
      "isEnabled": true,
      "description": "Partner Staff are staff with ability manage with listings.",
      "value": "PartnerStaff"
    },
        {
      "allowedMemberTypes": [
        "User"
      ],
      "displayName": "Public User",
      "id": "<<CHANGE TO NEW GUID>>",
      "isEnabled": true,
      "description": "Public Users are general users.",
      "value": "PublicUser"
    }
  ],

Add a user to the roles

Add A user to the role for both applications

  • Navigate to Active Directory in the Azure Portal

  • Under Manage > Select Enterprise Applications

  • Select ShareThrift from the list of applications

  • Under Manage > Select Users and groups

  • Choose Add Users

  • For users - select yourself

  • Select Role: select Moderator

  • Click Assign

Resources:

  • Microsoft

Go to the new pane.

DON"T USE IMPLICIT GRANT -

Azure portal - App registrations
Azure portal - App registrations
MSAL Wiki
MSAL Readme Docs (newest)
Add app roles in your application
Read Why
Great tutorial