CAP AUTHENTICATION
This module implements ionic complements but maybe in future releases, we could implement bootstrap.
CAP AUTHENTICATION it's a module that provides:
- registration
- login
- change password
This module implements ionic complements but maybe in future releases, we could implement bootstrap.
Installation Authentication module
Installation
npm i cap-authorization
Configuration
Add the module into the app module or into the module that you want to implement this module after that write your credentials.
import { AuthenticationModule } from 'cap-authorization'
into the import section
AuthenticationModule.forRoot({
apiUrl: 'your-apiUrl',
loginEndpoint: 'your-user',
facebookId: 'your-facebook-id',
googleId: 'your-google-id',
}),
Login Component
The login component implement angular5-social-login for login with social media (Facebook and Google +). Into the module of Authentication write your credentials of Facebook and Google +.
Facebook credentials
For use the facebook login you have to create an account in Facebook for developers and add a new application.
Google credentials
Like Facebook you have to create an account in Google for developers and add a new product or service.
Tags
auth-app-login
The tag or selector auth-app-login provides an interface with two inputs and four buttons.
Example
<h1>Login</h1>
<auth-app-login></auth-app-login>
auth-app-login
The target or selector auth-app-change-password provides an interface with two inputs and two buttons.
Example
<h1>Change password</h1>
<auth-app-change-password></auth-app-change-password>
auth-app-register
The target or selector auth-app-register provides an interface with two inputs and two buttons.
Example
<h1>Register</h1>
<auth-app-register></auth-app-register>
Services
If you want yo get the information of the user login with Facebook or Google you could use the getUserData method. This method is inside of the Authentication service and returns an object with the data of the social media.
Implementation into a module
For use this module go to app module and into the sections of import put the authentintication module.
...imports: [AuthenticationModule.forRoot({apiUrl: 'http://localhost:3000', // API UrlloginEndpoint: 'users' // [users or admin] endPoint in Loopback (for http://localhost:3000/users/login)})]...
import the authentication services to use in a component:
import { AuthenticationService } from './services/authentication.service';
...
constructor(private authenticationService: AuthenticationService) {
this.authenticationService.isAuthenticated());
}
Exposed Methods
This method returns a Boolean value with the value isLoggedIn
isAuthenticated()
Receive a credentials interface
login(values: CredentialsInterface)
If is a login success set the token and isLoggedIn in localstorage and variable isLoggedIn as true.
(email: string and password: string)
Remove token and isLoggedIn from localStorage and the variable isLoggedIn set to false.
logout(): void
Component Selectors
Each component refers to selectors.
auth-app-login
@Output()
submit: EventEmitter<any> = new EventEmitter();
@Output()
changePage: EventEmitter<boolean> = new EventEmitter();
auth-app-register
@Output()
submit: EventEmitter<any> = new EventEmitter();
@Output()
changePage: EventEmitter<boolean> = new EventEmitter();
auth-app-change-password
@Output()
submit: EventEmitter<any> = new EventEmitter();
@Output()
changePage: EventEmitter<boolean> = new EventEmitter();
More information HERE