inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

#819 add flag on the login component

Browse Source
This commit is contained in:
Mario Romano 2016-09-27 00:33:15 +01:00
parent 07f6bb2552
commit 63fd6591d5
8 changed files with 119 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

83
PREREQUISITES.md
View File

@ -3,6 +3,7 @@
The [Angular 2](https://angular.io/) based application development framework requires the following:
- An Alfresco Platform Repository (version [5.2.a-EA](https://wiki.alfresco.com/wiki/Community_file_list_201606-EA) or newer) to talk to, which has [CORS](https://en.wikipedia.org/wiki/Cross-origin_resource_sharing) enabled.
- [Download and install Activiti](https://www.alfresco.com/products/bpm/alfresco-activiti/trial)
- [Node.js](https://nodejs.org/en/) JavaScript runtime.
- [npm](https://www.npmjs.com/) package manager for JavaScript.
@ -10,84 +11,6 @@ The [Angular 2](https://angular.io/) based application development framework req
by running `node -v` and `npm -v` in a terminal/console window.
Older versions produce errors.
## Installing Alfresco
Alfresco comes with installers that will install all the servers, webapps, and tools needed to run Alfresco.
- Download Alfresco Community from this [page](https://www.alfresco.com/products/community/download).
- Install Alfresco following these [instructions](http://docs.alfresco.com/5.1/concepts/installs-eval-intro.html).
This will install the following Alfresco web applications:
- Alfresco Platform with the Content Repository, which we need so we can access content from our custom web client
- Alfresco Solr, which we need so we can search for content from our custom web client
- Alfresco Share, not technically needed, but can be useful for creating users and groups, and to access and upload content to the repository while we are developing the custom web client
### Enable CORS in Alfresco
The web client that we are building with the application development framework will be loaded from a different web server than the Alfresco Platform is running on.
So we need to tell the Alfresco server that any request that comes in from this custom web client should be allowed access
to the Content Repository. This is done by enabling CORS.
To enable CORS in the Alfresco Platform do one of the following:
**Download and install the enable CORS module**
This is the easiest way, add the [enablecors](https://artifacts.alfresco.com/nexus/service/local/repositories/releases/content/org/alfresco/enablecors/1.0/enablecors-1.0.jar)
platform module JAR to the *$ALF_INSTALL_DIR/modules/platform* directory and restart the server.
Note. by default the CORS filter that is enabled will allow any orgin.
**Manually update the web.xml file**
Modify *$ALF_INSTALL_DIR/tomcat/webapps/alfresco/WEB-INF/web.xml* and uncomment the following section and update
`cors.allowOrigin` to `http://localhost:3000`:
```<filter>
<filter-name>CORS</filter-name>
<filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>
<init-param>
<param-name>cors.allowGenericHttpRequests</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.allowOrigin</param-name>
<param-value>http://localhost:3000</param-value>
</init-param>
<init-param>
<param-name>cors.allowSubdomains</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.supportedMethods</param-name>
<param-value>GET, HEAD, POST, PUT, DELETE, OPTIONS</param-value>
</init-param>
<init-param>
<param-name>cors.supportedHeaders</param-name>
<param-value>origin, authorization, x-file-size, x-file-name, content-type, accept, x-file-type</param-value>
</init-param>
<init-param>
<param-name>cors.supportsCredentials</param-name>
<param-value>true</param-value>
</init-param>
<init-param>
<param-name>cors.maxAge</param-name>
<param-value>3600</param-value>
</init-param>
</filter>
```
When specifying the `cors.allowOrigin` URL make sure to use the URL that will be used by the web client.
Then uncomment filter mappings:
``` <filter-mapping>
<filter-name>CORS</filter-name>
<url-pattern>/api/*</url-pattern>
<url-pattern>/service/*</url-pattern>
<url-pattern>/s/*</url-pattern>
<url-pattern>/cmisbrowser/*</url-pattern>
</filter-mapping>
```
## Installing Node.js
If you don't have Node.js installed then access this [page](https://nodejs.org/en/download/) and use the appropriate installer for your OS.
@ -99,4 +22,8 @@ $ node -v
v5.12.0
```
## Configure Nginx
To correctly configure Nginx use the following file [nginx.conf](/nginx.conf).
This will put Activiti, Alfresco and the app dev framework under the same domain.

5
demo-shell-ng2/app/app.component.html
View File

@ -61,11 +61,6 @@
<input type="text" class="mdl-textfield__input" id="bpmHost" data-automation-id="bpmHost"
tabindex="1" (change)="onChangeBPMHost($event)" value="{{bpmHost}}"/>
</nav>
<span class="mdl-layout-title">CSRF Token Disabled</span>
<nav class="mdl-navigation">
<input type="text" class="mdl-textfield__input" id="csrfDisabled" data-automation-id="csrfDisabled"
tabindex="1" (change)="onChangeCsrf($event)" value="{{csrfDisabled}}"/>
</nav>
</div>
<main class="mdl-layout__content">
<div class="page-content">

18
demo-shell-ng2/app/app.component.ts
View File

@ -37,7 +37,6 @@ export class AppComponent {
ecmHost: string = 'http://' + window.location.hostname + ':8080';
bpmHost: string = 'http://' + window.location.hostname + ':9999';
csrfDisabled: boolean = false;
constructor(public auth: AlfrescoAuthenticationService,
public router: Router,
@ -45,7 +44,6 @@ export class AppComponent {
public alfrescoSettingsService: AlfrescoSettingsService) {
this.setEcmHost();
this.setBpmHost();
this.setCsrfToken();
this.translate = translate;
this.translate.addTranslationFolder();
@ -65,13 +63,6 @@ export class AppComponent {
localStorage.setItem(`bpmHost`, this.bpmHost);
}
public onChangeCsrf(event: KeyboardEvent): void {
console.log((<HTMLInputElement>event.target).value);
this.csrfDisabled = !!(<HTMLInputElement>event.target).value;
this.alfrescoSettingsService.csrfDisabled = this.csrfDisabled;
localStorage.setItem(`csrfDisabled`, this.csrfDisabled.toString());
}
isLoggedIn(): boolean {
return this.auth.isLoggedIn();
}
@ -129,13 +120,4 @@ export class AppComponent {
this.alfrescoSettingsService.bpmHost = this.bpmHost;
}
}
private setCsrfToken() {
if (localStorage.getItem(`csrfDisabled`)) {
this.alfrescoSettingsService.bpmHost = localStorage.getItem(`csrfDisabled`);
this.csrfDisabled = !!localStorage.getItem(`csrfDisabled`);
} else {
this.alfrescoSettingsService.csrfDisabled = this.csrfDisabled;
}
}
}

8
demo-shell-ng2/app/components/login/login-demo.component.html
View File

@ -11,12 +11,18 @@
<span class="mdl-switch__label">BPM</span>
</label>
</p>
<p class="toggle">
<label for="switch3" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
<input type="checkbox" id="switch3" class="mdl-switch__input" checked (click)="toggleCSRF()" #csrf>
<span class="mdl-switch__label">CSRF</span>
</label>
</p>
<p class="banned">
<label for="blacklistusername">Banned username</label><br>
<input id="blacklistusername" type="text" placeholder="banned username" [(ngModel)]="blackListUsername" />
</p>
</div>
<alfresco-login [providers]="providers" [fieldsValidation]="customValidation"
<alfresco-login [providers]="providers" [fieldsValidation]="customValidation" [disableCsrf]="disableCsrf"
(executeSubmit)="validateForm($event)"
(onSuccess)="onLogin($event)"
(onError)="onError($event)" #alfrescologin></alfresco-login>

5
demo-shell-ng2/app/components/login/login-demo.component.ts
View File

@ -33,6 +33,7 @@ export class LoginDemoComponent implements OnInit {
alfrescologin: any;
providers: string = 'ECM';
disableCsrf: boolean = false;
blackListUsername: string;
customValidation: any;
@ -82,6 +83,10 @@ export class LoginDemoComponent implements OnInit {
}
}
toggleCSRF() {
this.disableCsrf = !this.disableCsrf;
}
validateForm(event: any) {
let values = event.values;
if (values.controls['username'].value === this.blackListUsername ) {

1
ng2-components/ng2-alfresco-login/README.md
View File

@ -151,6 +151,7 @@ Attribute | Description |
Attribute | Options | Default | Description | Mandatory
--- | --- | --- | --- | ---
`providers` | *string* | ECM | Possible valid value are ECM, BPM or ALL. The default behaviour of this component will logged in only in the ECM . If you want log in in both system the correct value to use is ALL |
`disableCsrf` | *boolean* | false | To prevent the CSRF Token from been submitted. Only for Activiti call |
## Custom logo and background

4
ng2-components/ng2-alfresco-login/src/components/alfresco-login.component.ts
View File

@ -51,6 +51,9 @@ export class AlfrescoLoginComponent implements OnInit {
@Input()
fieldsValidation: any;
@Input()
disableCsrf: boolean;
@Output()
onSuccess = new EventEmitter();
@ -107,6 +110,7 @@ export class AlfrescoLoginComponent implements OnInit {
return false;
}
this.settingsService.setProviders(this.providers);
this.settingsService.csrfDisabled = this.disableCsrf;
this.disableError();

97
nginx.conf Normal file
View File

@ -0,0 +1,97 @@
server {
listen 8888;
server_name dev-platform-proxy;
#set $allowOriginSite http://127.0.0.1:3000;
set $allowOriginSite *;
gzip on;
gzip_min_length 1000;
gzip_proxied expired no-cache no-store private auth;
underscores_in_headers on;
proxy_pass_request_headers on;
proxy_pass_header Set-Cookie;
location /alfresco/ {
proxy_pass http://localhost:8080/;
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
proxy_redirect off;
proxy_buffering off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass_header Set-Cookie;
if ($request_method = 'OPTIONS') {
more_set_headers 'Access-Control-Allow-Origin: $allowOriginSite';
#
# Om nom nom cookies
#
more_set_headers 'Access-Control-Allow-Credentials: true';
more_set_headers 'Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
more_set_headers 'Access-Control-Allow-Headers: DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, Content-Range, Content-Disposition, Content-Description, X-CSRF-TOKEN, Authorization';
#
# Tell client that this pre-flight info is valid for 20 days
#
more_set_headers 'Access-Control-Max-Age: 1728000';
more_set_headers 'Content-Type: text/plain charset=UTF-8';
more_set_headers 'Content-Length 0';
return 204;
}
}
location /activiti/ {
proxy_pass http://localhost:9999/;
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
proxy_redirect off;
proxy_buffering off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass_header Set-Cookie;
proxy_pass_request_headers on;
if ($request_method = 'OPTIONS') {
more_set_headers 'Access-Control-Allow-Origin: $allowOriginSite';
#
# Om nom nom cookies
#
more_set_headers 'Access-Control-Allow-Credentials: true';
more_set_headers 'Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS';
#
# Custom headers and headers various browsers *should* be OK with but aren't
#
more_set_headers 'Access-Control-Allow-Headers: DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, Content-Range, Content-Disposition, Content-Description, X-CSRF-TOKEN, Authorization';
#
# Tell client that this pre-flight info is valid for 20 days
#
more_set_headers 'Access-Control-Max-Age: 1728000';
more_set_headers 'Content-Type: text/plain charset=UTF-8';
more_set_headers 'Content-Length 0';
return 204;
}
if ($request_method = 'POST') {
more_set_headers 'Access-Control-Allow-Origin: $allowOriginSite';
more_set_headers 'Access-Control-Allow-Credentials: true';
more_set_headers 'Access-Control-Allow-Methods: GET, POST, OPTIONS, DELETE';
more_set_headers 'Access-Control-Allow-Headers: DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type, Content-Range, Content-Disposition, Content-Description, X-CSRF-TOKEN, Authorization';
}
}
location / {
proxy_pass http://localhost:3000/;
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
proxy_redirect off;
proxy_buffering off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_pass_header Set-Cookie;
proxy_pass_request_headers on;
}
}