diff --git a/docs/en/UI/Angular/Authorization.md b/docs/en/UI/Angular/Authorization.md new file mode 100644 index 0000000000..75d6107341 --- /dev/null +++ b/docs/en/UI/Angular/Authorization.md @@ -0,0 +1,28 @@ +# 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. You can find **OAuth configuration** in the _environment.ts_ files. + +```js +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](https://tools.ietf.org/html/rfc7636) and we are using [angular-oauth2-oidc library](https://github.com/manfredsteyer/angular-oauth2-oidc#logging-in) for managing OAuth in the Angular client. + +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](https://community.abp.io/articles/how-to-customize-the-login-page-for-mvc-razor-page-applications-9a40f3cd). diff --git a/docs/en/docs-nav.json b/docs/en/docs-nav.json index be24432203..ec9d665373 100644 --- a/docs/en/docs-nav.json +++ b/docs/en/docs-nav.json @@ -755,6 +755,10 @@ "text": "Config State Service", "path": "UI/Angular/Config-State-Service.md" }, + { + "text": "Authorization", + "path": "UI/Angular/Authorization.md" + }, { "text": "HTTP Requests", "path": "UI/Angular/HTTP-Requests.md"