mirror of https://github.com/abpframework/abp.git
Mehmet Erim
6 years ago
committed by
GitHub
GitHub
34 changed files with 814 additions and 355 deletions
@ -0,0 +1,135 @@ |
|||
# Multi Tenancy in Angular UI |
|||
|
|||
ABP Angular UI supports the multi-tenancy. The following features related to multi-tenancy are available in the startup templates. |
|||
|
|||
|
|||
 |
|||
<p style="font-size:small;text-align:center;">Tenants page</p> |
|||
|
|||
On the page above, you can; |
|||
|
|||
- See the all tenants. |
|||
- Create a new tenant. |
|||
- Edit an existing tenant. |
|||
- Delete a tenant. |
|||
|
|||
|
|||
 |
|||
<p style="font-size:small;text-align:center;">Tenant Switching Component</p> |
|||
|
|||
You can switch between existing tenants by using the tenant switching component in the child pages of the `AccountLayoutComponent` (like Login page). Angular UI sends the selected tenant id sends to the backend as `__tenant` header on each request. |
|||
|
|||
|
|||
## Domain Tenant Resolver |
|||
|
|||
Angular UI can get the tenant name from the app running URL. You can determine the current tenant by subdomain (like mytenant1.mydomain.com) or by the whole domain (like mytenant.com). To do this, you need to set the `application.baseUrl` property in the environment: |
|||
|
|||
Subdomain resolver: |
|||
|
|||
```js |
|||
// environment.prod.ts |
|||
|
|||
export const environment = { |
|||
//... |
|||
application: { |
|||
baseUrl: 'https://{0}.mydomain.com/' |
|||
}, |
|||
//... |
|||
} |
|||
``` |
|||
|
|||
**{0}** is the placeholder to determine current tenant's unique name. |
|||
|
|||
After the configuration above, if your app runs on the `mytenant1.mydomain.com`, the app will get the tenant name as **mytenant1**. Then, the app will call the `/api/abp/multi-tenancy/tenants/by-name/mytenant1` endpoint to check if the tenant exists. If the tenant (mytenant1) exists, the app will keep this tenant data and send its `id` as `__tenant` header to the backend on each request. If the tenant does not exist, the app will not send `__tenant` header to the backend. |
|||
|
|||
> **Important Note:** If you define the `baseUrl` with the placeholder (**{0}**), the tenant switching component in the child pages of the `AccountLayoutComponent` (like Login page) will be hidden. |
|||
|
|||
|
|||
Domain resolver: |
|||
|
|||
```js |
|||
// environment.prod.ts |
|||
|
|||
export const environment = { |
|||
//... |
|||
application: { |
|||
baseUrl: 'https://{0}.com/' |
|||
}, |
|||
//... |
|||
} |
|||
``` |
|||
|
|||
After the configuration above, if your app runs on the `mytenant.com`, the app will get the tenant name as **mytenant**. |
|||
|
|||
### Tenant Specific Remote Endpoints |
|||
|
|||
The **{0}** placeholder can be put to the API URLs in the environment to determine tenant specific endpoints. |
|||
|
|||
```js |
|||
// environment.prod.ts |
|||
|
|||
export const environment = { |
|||
//... |
|||
application: { |
|||
baseUrl: 'https://{0}.mydomain.com/', |
|||
//... |
|||
}, |
|||
oAuthConfig: { |
|||
issuer: 'https://{0}.ids.mydomain.com', |
|||
//... |
|||
}, |
|||
apis: { |
|||
default: { |
|||
url: 'https://{0}.api.mydomain.com', |
|||
}, |
|||
AbpIdentity: { |
|||
url: 'https://{0}.identity.mydomain.com', |
|||
}, |
|||
}, |
|||
} |
|||
``` |
|||
|
|||
> **Important Note:** The `application.baseUrl` and the `{0}` placeholder in the value of the `baseUrl` property are required to be able to get tenant from running URL. Other placeholders in API URLs are optional. |
|||
|
|||
After the configuration above, if your app runs on the `mytenant1.mydomain.com`, the app will get tenant name as **mytenant1** and replace the environment object in `ConfigState` on app initialization as follows: |
|||
|
|||
|
|||
```js |
|||
// environment object in ConfigState |
|||
|
|||
{ |
|||
//... |
|||
application: { |
|||
baseUrl: 'https://mytenant1.mydomain.com/', |
|||
//... |
|||
}, |
|||
oAuthConfig: { |
|||
issuer: 'https://mytenant1.ids.mydomain.com', |
|||
//... |
|||
}, |
|||
apis: { |
|||
default: { |
|||
url: 'https://mytenant1.api.mydomain.com', |
|||
}, |
|||
AbpIdentity: { |
|||
url: 'https://mytenant1.identity.mydomain.com', |
|||
}, |
|||
}, |
|||
} |
|||
``` |
|||
|
|||
After this replacement, the app will use the following URLs: |
|||
|
|||
- `https://mytenant1.ids.mydomain.com` as IdentityServer URL. |
|||
- `https://mytenant1.api.mydomain.com` as default URL. |
|||
- `https://mytenant1.identity.mydomain.com` as `AbpIdentity` remote endpoint URL. |
|||
|
|||
The app sends the `__tenant` header that contains the current tenant id on each request. |
|||
|
|||
## See Also |
|||
|
|||
* [Multi Tenancy in ABP](../../Multi-Tenancy.md) |
|||
|
|||
## What's Next? |
|||
|
|||
- [Confirmation Popup](./Confirmation-Service.md) |
|||
|
After Width: | Height: | Size: 49 KiB |
|
After Width: | Height: | Size: 70 KiB |
@ -1 +1,2 @@ |
|||
export * from './oauth-configuration.handler'; |
|||
export * from './routes.handler'; |
|||
|
|||
@ -0,0 +1,35 @@ |
|||
import { Inject, Injectable } from '@angular/core'; |
|||
import { Actions, ofActionSuccessful } from '@ngxs/store'; |
|||
import { OAuthService } from 'angular-oauth2-oidc'; |
|||
import compare from 'just-compare'; |
|||
import { filter, map } from 'rxjs/operators'; |
|||
import { SetEnvironment } from '../actions/config.actions'; |
|||
import { ABP } from '../models/common'; |
|||
import { CORE_OPTIONS } from '../tokens/options.token'; |
|||
|
|||
@Injectable({ |
|||
providedIn: 'root', |
|||
}) |
|||
export class OAuthConfigurationHandler { |
|||
constructor( |
|||
private actions: Actions, |
|||
private oAuthService: OAuthService, |
|||
@Inject(CORE_OPTIONS) private options: ABP.Root, |
|||
) { |
|||
this.oAuthService.configure(this.options.environment.oAuthConfig); |
|||
|
|||
this.listenToSetEnvironment(); |
|||
} |
|||
|
|||
private listenToSetEnvironment() { |
|||
this.actions |
|||
.pipe(ofActionSuccessful(SetEnvironment)) |
|||
.pipe( |
|||
map(({ environment }: SetEnvironment) => environment.oAuthConfig), |
|||
filter(config => !compare(config, this.options.environment.oAuthConfig)), |
|||
) |
|||
.subscribe(config => { |
|||
this.oAuthService.configure(config); |
|||
}); |
|||
} |
|||
} |
|||
@ -0,0 +1,14 @@ |
|||
|
|||
export class FindTenantResultDto { |
|||
success: boolean; |
|||
tenantId?: string; |
|||
name: string; |
|||
|
|||
constructor(initialValues: Partial<FindTenantResultDto> = {}) { |
|||
for (const key in initialValues) { |
|||
if (initialValues.hasOwnProperty(key)) { |
|||
this[key] = initialValues[key]; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,45 @@ |
|||
import { Injectable } from '@angular/core'; |
|||
import { Store } from '@ngxs/store'; |
|||
import { Observable } from 'rxjs'; |
|||
import { SetTenant } from '../actions/session.actions'; |
|||
import { ABP } from '../models/common'; |
|||
import { FindTenantResultDto } from '../models/find-tenant-result-dto'; |
|||
import { RestService } from './rest.service'; |
|||
|
|||
@Injectable({ providedIn: 'root' }) |
|||
export class MultiTenancyService { |
|||
private _domainTenant: ABP.BasicItem = null; |
|||
|
|||
set domainTenant(value: ABP.BasicItem) { |
|||
this._domainTenant = value; |
|||
this.store.dispatch(new SetTenant(value)); |
|||
} |
|||
|
|||
get domainTenant() { |
|||
return this._domainTenant; |
|||
} |
|||
|
|||
isTenantBoxVisible = true; |
|||
|
|||
apiName = 'abp'; |
|||
|
|||
constructor(private restService: RestService, private store: Store) {} |
|||
|
|||
findTenantByName(name: string, headers: ABP.Dictionary<string>): Observable<FindTenantResultDto> { |
|||
return this.restService.request( |
|||
{ |
|||
url: `/api/abp/multi-tenancy/tenants/by-name/${name}`, |
|||
method: 'GET', |
|||
headers, |
|||
}, |
|||
{ apiName: this.apiName }, |
|||
); |
|||
} |
|||
|
|||
findTenantById(id: string, headers: ABP.Dictionary<string>): Observable<FindTenantResultDto> { |
|||
return this.restService.request( |
|||
{ url: `/api/abp/multi-tenancy/tenants/by-id/${id}`, method: 'GET', headers }, |
|||
{ apiName: this.apiName }, |
|||
); |
|||
} |
|||
} |
|||
@ -0,0 +1,103 @@ |
|||
import { Component, Injector } from '@angular/core'; |
|||
import { createComponentFactory, Spectator } from '@ngneat/spectator/jest'; |
|||
import { Store } from '@ngxs/store'; |
|||
import clone from 'just-clone'; |
|||
import { BehaviorSubject } from 'rxjs'; |
|||
import { FindTenantResultDto } from '../models/find-tenant-result-dto'; |
|||
import { MultiTenancyService } from '../services/multi-tenancy.service'; |
|||
import { parseTenantFromUrl } from '../utils'; |
|||
|
|||
const environment = { |
|||
production: false, |
|||
hmr: false, |
|||
application: { |
|||
baseUrl: 'https://{0}.volosoft.com', |
|||
name: 'MyProjectName', |
|||
logoUrl: '', |
|||
}, |
|||
oAuthConfig: { |
|||
issuer: 'https://{0}.api.volosoft.com', |
|||
clientId: 'MyProjectName_App', |
|||
dummyClientSecret: '1q2w3e*', |
|||
scope: 'MyProjectName', |
|||
oidc: false, |
|||
requireHttps: true, |
|||
}, |
|||
apis: { |
|||
default: { |
|||
url: 'https://{0}.api.volosoft.com', |
|||
}, |
|||
abp: { |
|||
url: 'https://api.volosoft.com/{0}', |
|||
}, |
|||
}, |
|||
}; |
|||
|
|||
const setHref = url => { |
|||
global.window = Object.create(window); |
|||
delete window.location; |
|||
Object.defineProperty(window, 'location', { |
|||
value: { |
|||
href: url, |
|||
}, |
|||
}); |
|||
}; |
|||
|
|||
@Component({ |
|||
selector: 'abp-dummy', |
|||
template: '', |
|||
}) |
|||
export class DummyComponent {} |
|||
|
|||
describe('MultiTenancyUtils', () => { |
|||
let spectator: Spectator<DummyComponent>; |
|||
const createComponent = createComponentFactory({ |
|||
component: DummyComponent, |
|||
mocks: [Store, MultiTenancyService], |
|||
}); |
|||
|
|||
beforeEach(() => (spectator = createComponent())); |
|||
|
|||
describe('#parseTenantFromUrl', () => { |
|||
test('should get the tenancyName, set replaced environment and call the findTenantByName method of MultiTenancyService', async () => { |
|||
const injector = spectator.inject(Injector); |
|||
const injectorSpy = jest.spyOn(injector, 'get'); |
|||
const store = spectator.inject(Store); |
|||
const selectSnapshotSpy = jest.spyOn(store, 'selectSnapshot'); |
|||
const dispatchSpy = jest.spyOn(store, 'dispatch'); |
|||
const multiTenancyService = spectator.inject(MultiTenancyService); |
|||
const findTenantByNameSpy = jest.spyOn(multiTenancyService, 'findTenantByName'); |
|||
|
|||
injectorSpy.mockReturnValueOnce(spectator.inject(Store)); |
|||
injectorSpy.mockReturnValueOnce(multiTenancyService); |
|||
selectSnapshotSpy.mockReturnValue(clone(environment)); |
|||
|
|||
setHref('https://abp.volosoft.com/'); |
|||
|
|||
dispatchSpy.mockReturnValue(new BehaviorSubject(true)); |
|||
findTenantByNameSpy.mockReturnValue( |
|||
new BehaviorSubject({ name: 'abp', tenantId: '1', success: true } as FindTenantResultDto), |
|||
); |
|||
|
|||
parseTenantFromUrl(injector); |
|||
|
|||
const replacedEnv = { |
|||
...environment, |
|||
application: { ...environment.application, baseUrl: 'https://abp.volosoft.com' }, |
|||
oAuthConfig: { ...environment.oAuthConfig, issuer: 'https://abp.api.volosoft.com' }, |
|||
apis: { |
|||
default: { |
|||
url: 'https://abp.api.volosoft.com', |
|||
}, |
|||
abp: { |
|||
url: 'https://api.volosoft.com/abp', |
|||
}, |
|||
}, |
|||
}; |
|||
|
|||
expect(dispatchSpy).toHaveBeenCalledWith({ environment: replacedEnv }); |
|||
expect(findTenantByNameSpy).toHaveBeenCalledWith('abp', { __tenant: '' }); |
|||
expect(multiTenancyService.domainTenant).toEqual({ id: '1', name: 'abp' }); |
|||
}); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,22 @@ |
|||
import { createTokenParser } from '../utils/string-utils'; |
|||
|
|||
describe('String Utils', () => { |
|||
describe('#createTokenParser', () => { |
|||
const parseTokens = createTokenParser('{subDomain}.{domain}.{gtld}|{domain}.{gtld}'); |
|||
|
|||
test.each` |
|||
url | subDomain | domain | gtld |
|||
${'www.example.com'} | ${'www'} | ${'example'} | ${'com'} |
|||
${'test.sub.example.com'} | ${'test.sub'} | ${'example'} | ${'com'} |
|||
${'example.com'} | ${undefined} | ${'example'} | ${'com'} |
|||
`(
|
|||
'should return subDomain as $subDomain, domain as $domain, and gtld as $gtld when url is $url', |
|||
({ url, subDomain, domain, gtld }) => { |
|||
const parsed = parseTokens(url); |
|||
expect(parsed.subDomain[0]).toBe(subDomain); |
|||
expect(parsed.domain[0]).toBe(domain); |
|||
expect(parsed.gtld[0]).toBe(gtld); |
|||
}, |
|||
); |
|||
}); |
|||
}); |
|||
@ -0,0 +1,74 @@ |
|||
import { Injector } from '@angular/core'; |
|||
import { Store } from '@ngxs/store'; |
|||
import clone from 'just-clone'; |
|||
import { switchMap, tap } from 'rxjs/operators'; |
|||
import { SetEnvironment } from '../actions'; |
|||
import { Config } from '../models/config'; |
|||
import { MultiTenancyService } from '../services/multi-tenancy.service'; |
|||
import { ConfigState } from '../states/config.state'; |
|||
import { createTokenParser } from './string-utils'; |
|||
|
|||
const tenancyPlaceholder = '{0}'; |
|||
|
|||
function getCurrentTenancyName(appBaseUrl: string): string { |
|||
if (appBaseUrl.charAt(appBaseUrl.length - 1) !== '/') appBaseUrl += '/'; |
|||
|
|||
const parseTokens = createTokenParser(appBaseUrl); |
|||
const token = tenancyPlaceholder.replace(/[}{]/g, ''); |
|||
return parseTokens(window.location.href)[token][0]; |
|||
} |
|||
|
|||
export async function parseTenantFromUrl(injector: Injector) { |
|||
const store: Store = injector.get(Store); |
|||
const multiTenancyService = injector.get(MultiTenancyService); |
|||
const environment = store.selectSnapshot(ConfigState.getOne('environment')) as Config.Environment; |
|||
|
|||
const { baseUrl = '' } = environment.application; |
|||
const tenancyName = getCurrentTenancyName(baseUrl); |
|||
|
|||
if (tenancyName) { |
|||
multiTenancyService.isTenantBoxVisible = false; |
|||
|
|||
return setEnvironment(store, tenancyName) |
|||
.pipe( |
|||
switchMap(() => multiTenancyService.findTenantByName(tenancyName, { __tenant: '' })), |
|||
tap(res => { |
|||
multiTenancyService.domainTenant = res.success |
|||
? { id: res.tenantId, name: res.name } |
|||
: null; |
|||
}), |
|||
) |
|||
.toPromise(); |
|||
} |
|||
|
|||
return Promise.resolve(); |
|||
} |
|||
|
|||
function setEnvironment(store: Store, tenancyName: string) { |
|||
const environment = clone( |
|||
store.selectSnapshot(ConfigState.getOne('environment')), |
|||
) as Config.Environment; |
|||
|
|||
if (environment.application.baseUrl) { |
|||
environment.application.baseUrl = environment.application.baseUrl.replace( |
|||
tenancyPlaceholder, |
|||
tenancyName, |
|||
); |
|||
} |
|||
|
|||
environment.oAuthConfig.issuer = environment.oAuthConfig.issuer.replace( |
|||
tenancyPlaceholder, |
|||
tenancyName, |
|||
); |
|||
|
|||
Object.keys(environment.apis).forEach(api => { |
|||
Object.keys(environment.apis[api]).forEach(key => { |
|||
environment.apis[api][key] = environment.apis[api][key].replace( |
|||
tenancyPlaceholder, |
|||
tenancyName, |
|||
); |
|||
}); |
|||
}); |
|||
|
|||
return store.dispatch(new SetEnvironment(environment)); |
|||
} |
|||
@ -0,0 +1,17 @@ |
|||
export function createTokenParser(format: string) { |
|||
return (string: string) => { |
|||
const tokens: string[] = []; |
|||
const regex = format.replace(/\./g, '\\.').replace(/\{\s?([0-9a-zA-Z]+)\s?\}/g, (_, token) => { |
|||
tokens.push(token); |
|||
return '(.+)'; |
|||
}); |
|||
|
|||
const matches = (string.match(regex) || []).slice(1); |
|||
|
|||
return matches.reduce((acc, v, i) => { |
|||
const key = tokens[i]; |
|||
acc[key] = [...(acc[key] || []), v].filter(Boolean); |
|||
return acc; |
|||
}, {} as Record<string, string[]>); |
|||
}; |
|||
} |
|||
File diff suppressed because it is too large
Loading…
Reference in new issue