One essential step in safeguarding your endpoints is to establish a method for signing your calls and ensuring their security. A frequently used approach involves utilizing JWT Tokens (although there are other options available, I will focus on the one I am most familiar with).
To implement this process, users would need to communicate with an unsecured endpoint on your backend by providing their credentials. Your backend system should be configured to verify these credentials, and upon successful authentication, issue a token which can then be used to sign secure calls. By including this token in the header using JWT, properly configured backends will validate its presence when accessing secured APIs.
Without knowledge of the specific backend being used, I recommend a library for handling JWT tokens within Angular on the frontend: https://github.com/auth0/angular-jwt
This library equips you with an HTTP client that automatically signs requests with stored tokens and enables setting guards on frontend URLs to perform checks such as validation of non-expired tokens.
The workflow can be summarized as follows:
1) User submits credentials to the backend
2) Backend verifies credentials and issues a token
3) Store the token locally in your frontend storage and configure the library accordingly
4) Apply guards to secured URLs to validate token expiration, among other factors
5) Utilize the library's HTTP Client to sign requests with the stored token when consuming secure APIs
EDIT:
I have created a basic Angular template incorporating JWT tokens for your reference: https://github.com/BusschaertTanguy/angular2_template/.
In the auth module, you will find configuration details, login & register components, http clients for secure requests, and services managing token operations & route protection.
Here are some key snippets from the template to guide you:
//Library Configuration
export function authHttpServiceFactory(
http: Http,
options: RequestOptions
) {
return new AuthHttp(
new AuthConfig({
tokenName: 'token',
tokenGetter: (() => localStorage.getItem('token')),
globalHeaders: [{ 'Content-Type': 'application/json' }]
}),
http,
options
);
}
@NgModule({
providers: [{
provide: AuthHttp,
useFactory: authHttpServiceFactory,
deps: [Http, RequestOptions]
}]
})
export class AuthModule { }
//HttpService
get(url: string): Observable<any> {
return this.http.get(endpoint).map(data => data.json());
}
//LoginComponent
login() {
this.httpService.get(urlToLogin).subscribe(
data => {
localStorage.setItem('token', data.access_token);
}
);
}
Refer to these sections for your frontend setup, and consider following the tutorial provided by the library for implementation guidance, supplemented with my added abstractions to aid in starting points.