Skip to content

Latest commit

 

History

History
80 lines (55 loc) · 4.45 KB

tutorial-single-page-app-angular-sign-in-prepare-tenant.md

File metadata and controls

80 lines (55 loc) · 4.45 KB
Raw
title description services author manager ms.service ms.subservice ms.topic ms.date ms.author
Tutorial - Prepare your external tenant to authenticate users in an Angular single-page app (SPA)
Learn how to configure your external tenant for authentication with an Angular single-page app (SPA).
active-directory
garrodonnell
celestedg
entra-external-id
customers
tutorial
10/27/2023
godonnell

Tutorial: Prepare your external tenant to authenticate users in an Angular single-page app

This tutorial series demonstrates how to build an Angular single-page application (SPA) and prepare it for authentication using the Microsoft Entra admin center. You'll use the Microsoft Authentication Library for JavaScript to authenticate your app with your external tenant. Finally, you'll run the application and test the sign-in and sign-out experiences.

In this tutorial:

[!div class="checklist"]

  • Register a SPA in the Microsoft Entra admin center, and record its identifiers
  • Define the platform and URLs
  • Grant permissions to the SPA to access the Microsoft Graph API
  • Create a sign-in and sign-out user flow in the Microsoft Entra admin center
  • Associate your SPA with the user flow

Prerequisites

  • An external tenant. If you don't have one, create a trial tenant or a tenant with a subscription before you begin.
  • This Azure account must have permissions to manage applications. Any of the following Microsoft Entra roles include the required permissions:
    • Application Administrator
    • Application Developer
    • Cloud Application Administrator

Register the SPA and record identifiers

[!INCLUDE register-client-app-common]

Add a platform redirect URL

[!INCLUDE add-platform-redirect-url-react]

Grant admin consent

[!INCLUDE grant-api-permission-sign-in]

Create a user flow

  1. Sign in to the Microsoft Entra admin center as at least an External ID User Flow Administrator.

  2. If you have access to multiple tenants, use the Settings icon :::image type="icon" source="~/external-id/customers/media/common/admin-center-settings-icon.png" border="false"::: in the top menu to switch to your external tenant from the Directories + subscriptions menu.

  3. Browse to Identity > External Identities > User flows.

  4. Select + New user flow.

  5. On the Create page:

    1. Enter a Name for the user flow, such as SignInSignUpSample.

    2. In the Identity providers list, select Email Accounts. This identity provider allows users to sign-in or sign-up using their email address.

      [!NOTE] Additional identity providers will be listed here only after you set up federation with them. For example, if you set up federation with Google or Facebook, you'll be able to select those additional identity providers here.

    3. Under Email accounts, you can select one of the two options. For this tutorial, select Email with password.

      • Email with password: Allows new users to sign up and sign in using an email address as the sign-in name and a password as their first factor credential.

      • Email one-time-passcode: Allows new users to sign up and sign in using an email address as the sign-in name and email one-time passcode as their first factor credential.

        [!NOTE] Email one-time passcode must be enabled at the tenant level (All Identity Providers > Email one-time-passcode) for this option to be available at the user flow level.

  6. Select Create. The new user flow appears in the User flows list. If necessary, refresh the page.

Associate the application with your user flow

[!INCLUDE add-app-user-flow]

Next step

[!div class="nextstepaction"] Part 2: Create an Angular SPA for authentication in an external tenant