Ends in:
2 DAYS
5 HRS
7 MIN
46 SEC
Ends in:
2 D
5 H
7 M
46 S

Authorization in Angular UI

OAuth is preconfigured in Angular application templates. So, when you start a project using the CLI (or Suite, for that matter), authorization already works. ABP Angular UI packages are using angular-oauth2-oidc library for managing OAuth in the Angular client. You can find OAuth configuration in the environment.ts files.

Authorization Code Flow

import { Config } from '@abp/ng.core';

const baseUrl = 'http://localhost:4200';

export const environment = {
  // other options removed for sake of brevity

  oAuthConfig: {
    issuer: 'https://localhost:44305',
    redirectUri: baseUrl,
    clientId: 'MyProjectName_App',
    responseType: 'code',
    scope: 'offline_access MyProjectName',
  },

  // other options removed for sake of brevity
} as Config.Environment;

This configuration results in an OAuth authorization code flow with PKCE. According to this flow, the user is redirected to an external login page which is built with MVC. So, if you need to customize the login page, please follow this community article.

Resource Owner Password Flow

If you implemented the Angular UI account module to your project, you can switch the flow to resource owner password flow by changing the OAuth configuration in the environment.ts files as shown below:

import { Config } from '@abp/ng.core';

export const environment = {
  // other options removed for sake of brevity

  oAuthConfig: {
    issuer: 'https://localhost:44305',
    clientId: 'MyProjectName_App',
    dummyClientSecret: '1q2w3e*',
    scope: 'offline_access MyProjectName',
  },

  // other options removed for sake of brevity
} as Config.Environment;

According to this flow, the user is redirected to the login page in the account module.

Note: The resource owner password flow does not support the two-factor authentication for some technical reasons.

Contributors


Last updated: March 19, 2021 Edit this page on GitHub

Was this page helpful?

Please make a selection.

To help us improve, please share your reason for the negative feedback in the field below.

Please enter a note.

Thank you for your valuable feedback!

Please note that although we cannot respond to feedback, our team will use your comments to improve the experience.

In this document
Community Talks

What’s New with .NET 9 & ABP 9?

21 Nov, 17:00
Online
Watch the Event
Mastering ABP Framework Book
Mastering ABP Framework

This book will help you gain a complete understanding of the framework and modern web application development techniques.

Learn More