Welcome to the Alfresco Builder Network

Our technical resource site is still being improved. We'd love to hear your feedback. Tell us what you think

Authenticates to Alfresco Content Services and Alfresco Process Services.

Login component

Contents

Basic usage

<adf-login 
    successRoute="/home">
</adf-login>

Transclusions

You can replace the content of the header and footer of the Login component with your own custom content:

<adf-login ...>
    <adf-login-header><ng-template>My custom HTML for the header</ng-template></adf-login-header>
    <adf-login-footer><ng-template>My custom HTML for the footer</ng-template></adf-login-footer>
</adf-login>`

Header:

Login with custom header

Footer:

Login with custom footer

Also, any content that you put inside the <adf-login> tags will be rendered as part of the Login dialog:

<adf-login ...>
    <div>
        <div><!-- Custom content goes here --></div>
    </div>
</adf-login>

This is useful if you need to extend the functionality of the dialog with custom input fields handled by your application or parent component:

Login with custom content

Class members

Properties

NameTypeDefault valueDescription
backgroundImageUrlstringPath to a custom background image.
copyrightTextstringThe copyright text below the login box.
fieldsValidationanyCustom validation rules for the login form.
logoImageUrlstringPath to a custom logo image.
needHelpLinkstring""Sets the URL of the NEED HELP link in the footer.
registerLinkstring""Sets the URL of the REGISTER link in the footer.
showLoginActionsbooleantrueShould the extra actions (Need Help, Register, etc) be shown?
showRememberMebooleantrueShould the Remember me checkbox be shown? When selected, this option will remember the logged-in user after the browser is closed to avoid logging in repeatedly.
successRoutestringnullRoute to redirect to on successful login.

Events

NameTypeDescription
errorEventEmitter<LoginErrorEvent>Emitted when the login fails.
executeSubmitEventEmitter<LoginSubmitEvent>Emitted when the login form is submitted.
successEventEmitter<LoginSuccessEvent>Emitted when the login is successful.

Details

Handling events

app.component.html

<adf-login 
    (success)="mySuccessMethod($event)"
    (error)="myErrorMethod($event)">
</adf-login>

app.component.ts

export class AppComponent {

    mySuccessMethod($event) {
        console.log('Success Login EventEmitt called with: ' + $event.value);
    }

    myErrorMethod($event) {
        console.log('Error Login EventEmitt called with: ' + $event.value);
    }
}

Custom logo and background

You can change the logo and background images using the backgroundImageUrl and logoImageUrl properties:

<adf-login 
    [backgroundImageUrl]="'http://images.freeimages.com/images/previews/638/wood-wall-for-background-1634466.jpg'"
    [logoImageUrl]="'http://images.freeimages.com/images/previews/eac/honeybee-with-a-house-1633609.jpg'">
</adf-login>

Login with custom logo and background

You can also bind to your component properties and provide values dynamically if you need to:

<adf-login
    [backgroundImageUrl]="myCustomBackground"
    [logoImageUrl]="myCustomLogo">
</adf-login>

Customizing validation rules

You can add to or modify the default validation rules of the login form if you need your own custom validation:

MyCustomLogin.component.html

<adf-login 
    [fieldsValidation]="customValidation"
    #alfrescoLogin>
</adf-login>

MyCustomLogin.component.ts

export class MyCustomLogin {
    
    @ViewChild('alfrescoLogin')
    alfrescoLogin: any;

    customValidation: any;

    constructor(public router: Router) {
        this.customValidation = {
            username: ['', Validators.compose([Validators.required, Validators.minLength(8), Validators.maxLength(10)])],
            password: ['', Validators.required]
        };
    }

    ngOnInit() {
        this.alfrescoLogin.addCustomValidationError('username', 'minlength', 'Username must be at least 8 characters.');
        this.alfrescoLogin.addCustomValidationError('username', 'maxlength', 'Username must not be longer than 11 characters.');
    }
}

Call an external identity provider to fetch the auth token

You can access an external provider to get an auth token for a user:

app.config.json

{
    "oauth2" : {
      "host": "http://myhost.com",
      "authPath": "/my-custom-auth/token",
      "clientId": "my-client-id",
      "secret": ""
    }
}

MyCustomLogin.component.html

<adf-login 
    [providers]="'OAUTH'"
    (success)="onMyAuthLogin($event)">
</adf-login>

MyCustomLogin.component.ts

export class MyCustomLogin {
 
    constructor(public router: Router) {
    }

    onMyAuthLogin($event) {
        console.log("My token " + $event.token.ticket)
        this.router.navigate(['/home']);
    }
}

Controlling form submit execution behaviour

The standard form submission system is suitable for most tasks but you can take full control of submission if you need to. Use the executeSubmit event to modify the submission process with your own code just after the form is submitted.

If you want to replace the submission process completely (rather than just extend it), you can use event.preventDefault() in the handler to avoid the default behavior. You could use this, for example, to customize the validation heavily or to present a summary of validation before submitting the form.

MyCustomLogin.component.html

<adf-login 
    (executeSubmit)="validateForm($event)" 
    #alfrescoLogin>
</adf-login>

MyCustomLogin.component.ts

export class MyCustomLogin {

    validateForm(event: any) {
        let values = event.values;
        
        // check if the username is in the blacklist
        if (values.controls['username'].value === 'invalidUsername') {
            this.alfrescoLogin.addCustomFormError('username', 'the
            username is in blacklist');
            event.preventDefault();
        }
    }
    
}

Note that if you do not call event.preventDefault() then the default behaviour will execute after your custom code has completed.

Single Sign-On (SSO)

Implicit Flow

If you used the host-setting component to enable SSO Oauth (or if you enabled the setting in app.config.json) then the login component will show only a button to login:

{
    "providers": "ECM",
    "authType" :"OAUTH",
    "oauth2": {
      "host": "<AUTH-SERVER>/auth/realms/alfresco",
      "clientId": "activiti",
      "scope": "openid",
      "secret": "",
      "implicitFlow": true,
      "silentLogin": false,
      "redirectUri": "/",
      "redirectUriLogout": "/logout"
    }
}

Login component

Note that if the silentLogin property in the oauth2 configuration is set to true then the login page will not be shown. Instead, the application will redirect automatically to the authorization server when the user is not logged-in

Silent login

You can also enable automatic redirection to OAuth provider by utilising the following properties:

  • silentLogin
  • redirectSilentIframeUri
{
  "providers": "ECM",
  "authType": "OAUTH",
  "oauth2": {
    "host": "<AUTH-SERVER>/auth/realms/alfresco",
    "clientId": "alfresco",
    "scope": "openid",
    "secret": "",
    "implicitFlow": true,
    "silentLogin": true,
    "redirectSilentIframeUri": "/assets/silent-refresh.html",
    "redirectUri": "/",
    "redirectUriLogout": "/logout"
  },

Please note that if you deploy the application to a virtual folder, for example http://<ADDRESS>/my-app, then redirectSilentIframeUri must contain the full URI value:

{
    "redirectSilentIframeUri": "http://<ADDRESS>/my-app/assets/silent-refresh.html",
}

In the default ADF application configurations the silent-refresh.html file gets automatically copied to the application output when building for production.

Kerberos

Setting the withCredentials property to true in the auth section of app.config.json will enable Kerberos and bypass the normal login:

{
  "auth": {
    "withCredentials": "true"
  },

See Also

Interested in trying Alfresco?

Try Now