Browse Source

add Angular UI Account Module document

pull/8124/head
mehmet-erim 5 years ago
parent
commit
dc2123c87c
  1. 119
      docs/en/UI/Angular/Account-Module.md

119
docs/en/UI/Angular/Account-Module.md

@ -0,0 +1,119 @@
# Angular UI Account Module
Angular UI account module is available as of v4.3. It contains some pages (login, register, manage your profile, etc.).
If you implement the account module to your project;
- "Manage your profile" link in the current user dropdown on the top bar will redirect the user to a page in the account module.
- You can switch the authentication flow to the resource owner password flow.
### Account Module Implementation
Install the `@abp/ng.account` NPM package by running the below command:
```bash
npm install @abp/ng.account@next
```
> Make sure v4.3-rc or higher version is installed.
Open the `app.module.ts` and add `AccountConfigModule.forRoot()` to the imports array as shown below:
```js
// app.module.ts
import { AccountConfigModule } from '@abp/ng.account/config';
//...
@NgModule({
imports: [
//...
AccountConfigModule.forRoot()
],
//...
})
export class AppModule {}
```
Open the `app-routing.module.ts` and add the `account` route to `routes` array as follows:
```js
// app-routing.module.ts
const routes: Routes = [
//...
{
path: 'account',
loadChildren: () => import('@abp/ng.account').then(m => m.AccountModule.forLazy()),
},
//...
export class AppRoutingModule {}
```
### Account Module Implementation for Commercial Templates
The pro startup template comes with `@volo/abp.ng.account` package. You should update the package version to v4.3-rc or higher version. The package can be updated by running the following command:
```bash
npm install @volo/abp.ng.account@next
```
> Make sure v4.3-rc or higher version is installed.
`AccountConfigModule` is already imported to `app.module.ts` in the startup template. So no need to import the module to the `AppModule`. If you removed the `AccountConfigModule` from the `AppModule`, you can import it as shown below:
```js
// app.module.ts
import { AccountConfigModule } from '@volo/abp.ng.account/config';
//...
@NgModule({
imports: [
//...
AccountConfigModule.forRoot()
],
//...
})
export class AppModule {}
```
Open the `app-routing.module.ts` and add the `account` route to `routes` array as follows:
```js
// app-routing.module.ts
const routes: Routes = [
//...
{
path: 'account',
loadChildren: () => import('@volo/abp.ng.account').then(m => m.AccountPublicModule.forLazy()),
},
//...
export class AppRoutingModule {}
```
### Manage Profile Page
Before v4.3, the "Manage Your Profile" link in the current user dropdown on the top bar redirected the user to MVC's profile management page. As of v4.3, if you implemented the account module to your project, the same link will land on a page in the Angular UI account module instead.
### Resource Owner Password Flow
OAuth is preconfigured as authorization code flow in Angular application templates by default. If you implemented the 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:
```js
import { Config } from '@abp/ng.core';
export const environment = {
// other options removed for sake of brevity
oAuthConfig: {
issuer: 'https://localhost:44305', // IdentityServer url
clientId: 'MyProjectName_App',
dummyClientSecret: '1q2w3e*',
scope: 'offline_access MyProjectName',
},
// other options removed for sake of brevity
} as Config.Environment;
```
See the [Authorization in Angular UI](./Authorization) document for more details.
Loading…
Cancel
Save