Ceate a real auth in the template

[AbrarJahin]

Hi, in the system, no authentication system is created, the current auth is a demo auth, no service is there for this.

Previously we don't have DB access, but now we have DB and a user table.

So, we can easily write a service for register and log in (as small as possible, maybe with only name) into our system.

All authentication and logins should be done with Angular service and authentication should be checked with angular service (standard angular2 authentication with service).

So, no server side code needed to be changed and there can be an authentication system.

I think this would be a better option to make a great service example.

Think you will agree with me @MarkPieszak

[TommyLCox]

What adding JWT be a good idea? That is what we use, but of course you have to run over https. Our applications require a valid JWT in the http header to secure the restful api calls. Also, we use custom authentication tickets in the mvc portion of our web sites that require a valid JWT. I don't know if this is what you mean by adding authentication, but we could submit a PR. You may have in mind something altogether different? It would be added in the Middleware stack of the server, of course, and users could add a custom "identity resolver" to authenticate usernames and pwds.

[danielnajera]

I'm using a .Net Core API with JWT Bearer Authentication with a simple authentication service in Angular 2.

import { Injectable, Inject } from "@angular/core";
import { Headers, Http } from "@angular/http";
import { Router } from "@angular/router";
import "rxjs/add/operator/toPromise";

import { API_URL } from './constants/baseurl.constants';
import { AuthModel, AuthToken } from '../models/auth.model';
import { Observable, Subject, Subscription } from "rxjs/Rx";

@Injectable()
export class AuthService {    
    private _notificationIsAdmin = new Subject<boolean>(); 
    private _notificationDisplayNameReceived = new Subject<string>();
    private tokenKey = "token";
    private tokenExpiresIn = "tokenExpiresIn";
    private tokenExpiredAt = "tokenExpiredAt";
    private tokenRequestAt = "tokenRequestAt";
    private tokenUsername = "tokenUsername";
    private tokenDisplayName = "tokenDisplayName";
    private tokenGroups = "tokenGroups";

    private token: string;

    constructor(private http: Http,
        private router: Router,
        @Inject(API_URL) private apiUrl: string) {
    }

    login(userName: string, password: string): Promise<AuthModel> {
        return this.http.post(`${this.apiUrl}v1/Authentication`, { Username: userName, Password: password }).toPromise()
            .then(response => {
                let result = response.json() as AuthModel;
                if (result.State == 1) {
                    let json = result.Data as AuthToken;                    
                    sessionStorage.setItem(this.tokenKey, json.accessToken);
                    sessionStorage.setItem(this.tokenExpiredAt, json.expiredAt.toString());
                    sessionStorage.setItem(this.tokenExpiresIn, json.expiresIn.toString());
                    sessionStorage.setItem(this.tokenRequestAt, json.requestAt.toString());
                    sessionStorage.setItem(this.tokenUsername, json.username);
                    sessionStorage.setItem(this.tokenDisplayName, json.displayName);
                    sessionStorage.setItem(this.tokenGroups, JSON.stringify(json.groups));

                    this.token = json.accessToken;
                    this._notificationDisplayNameReceived.next(json.displayName);
                    this.tokenDisplayName = json.displayName;
                }
                return result;
            })
            .catch(this.handleError);
    }

    logout = () => {
        sessionStorage.clear();
        this.router.navigate(["./Login"]);
    }

    checkLogin(): boolean {
        var token = sessionStorage.getItem(this.tokenKey);

        //Expiry Date
        if (token != null) {
            var expiredAt = Date.parse(sessionStorage.getItem(this.tokenExpiredAt));
            if (expiredAt < Date.now()) {
                //Token Expired
                return false;
            }
        }
        return token != null;
    }

    checkLoginWithRoute = () => {
        if (!this.checkLogin()) {
            this.router.navigate(["./Login"]);
        }
    }

    getUserInfo(): Promise<AuthModel> {
        return this.authGet(`${this.apiUrl}v1/Authentication/GetUserInfo`);
    }

    authPost(url: string, body: any): Promise<AuthModel> {
        let headers = this.initAuthHeaders();
        return this.http.post(url, body, { headers: headers }).toPromise()
            .then(response => response.json() as AuthModel)
            .catch(this.handleError);
    }

    authGet(url): Promise<AuthModel> {
        let headers = this.initAuthHeaders();
        return this.http.get(url, { headers: headers }).toPromise()
            .then(response => response.json() as AuthModel)
            .catch(this.handleError);
    }

    getToken = () => {
        return this.getLocalToken();
    }

    getUsername = () => {
        return this.getTokenUsername();
    } 
    
    getDisplayName = () => {
        return this.getTokenDisplayName();
    }

    isAdmin(): boolean {
        let groups = JSON.parse(sessionStorage.getItem(this.tokenGroups)) as Groups[];
        let _isAdmin = false;
        if (groups != null) {
            for (let group of groups) {                
                if (group.LdapGroup == "Admin") {
                    _isAdmin = true;
                }
            }
        } 
        this._notificationIsAdmin.next(_isAdmin);
        return _isAdmin;
    }
    
    //Events
    isAdminChanged(): Observable<boolean> {
        return this._notificationIsAdmin.asObservable();
    }
    displayNameReceived(): Observable<string> {
        return this._notificationDisplayNameReceived.asObservable();
    }
            
    private getLocalToken(): string {
        if (!this.token) {
            this.token = sessionStorage.getItem(this.tokenKey);            
        }        
        return this.token;
    }    
    private initAuthHeaders(): Headers {
        let token = this.getLocalToken();
        if (token == null) throw "No token";

        var headers = new Headers();
        headers.append("Authorization", "Bearer " + token);

        return headers;
    }
    private handleError(error: any): Promise<any> {
        console.error('An error occurred', error);
        return Promise.reject(error.message || error);
    }
    private getTokenUsername(): string {
        return sessionStorage.getItem(this.tokenUsername);
    }
    private getTokenDisplayName(): string {
        return sessionStorage.getItem(this.tokenDisplayName);
    } 
}
export class Groups {
    public LdapGroup: string;
}

[isaacrlevin]

This has been added to list of pending features, closing this issue