Получение входа пользователя в приложение Angular 2 с платформы .NET

Question

Я создаю новое приложение Angular2 и оно будет находиться внутри платформы приложений .NET. Приложение My Angular2 должно заставить текущего зарегистрированного пользователя сделать вызовы API для извлечения данных. Как я могу получить userId в моем приложении.

Answer 1

Поскольку вы явно не указали, какую платформу .NET вы используете, я собираюсь предположить, что это самый последний из них - Asp.Net Core с идентификатором Asp.Net как поставщик аутентификации.

Если вы используете шаблон Asp.Net Identity по умолчанию, вы можете просто использовать аутентификацию на основе файлов cookie для своих запросов веб-api. Куки-файлы автоматически передаются вашим браузером на сервер при выполнении вызовов через услугу Angular 2s http, поэтому вам не нужно указывать там что-либо явно.

Вот некоторый минимальный код, который может делать то, что вы хотите:

Вход метод в вашей стороне контроллера сервера

[HttpPost("Login")] 
public async Task<IActionResult> Login([FromBody] LoginPost model) 
{ 
    if (ModelState.IsValid) 
    { 
     // Require the user to have a confirmed email before they can log on. 
     var user = await _userManager.FindByEmailAsync(model.Email); 
     if (user != null) 
     { 
      var result = await _signInManager.PasswordSignInAsync(user, model.Password, model.StayLoggedIn, lockoutOnFailure: false); 
      if (result.Succeeded) 
      { 
       return Ok(); 
      } 
     } 
    } 
    return BadRequest(); 
} 

Угловая метод 2 сервис, чтобы выполнить Войти

Это вызывается из вашего компонент входа, например компонент, на котором размещена ваша форма входа.

public login(email: string, password: string, stayLoggedIn: boolean): Promise<boolean> { 
    var url = '/Api/Account/Login'; 
    var loginCredentials = { 
     email: email, 
     password: password, 
     stayLoggedIn: stayLoggedIn 
    }; 
    return this.http 
     .post(url, loginCredentials) 
     .toPromise() 
     .then(response => { 
      return response.ok; 
     }) 
     .catch(() => { 
      return false; 
     }); 
} 

После успешного входа в систему, _signInManager.PasswordSignInAsync() установит печенье на клиенте, который автоматически проверяется в рамках дальнейших запросов.

Данные пользователя стороне метод сервера

[HttpGet("Auth")] 
public async Task<IActionResult> Auth() 
{ 
    var model = new AuthGet(); 
    if (!User.Identity.IsAuthenticated) 
    { 
     model.IsAuthenticated = false; 
     return Ok(model); 
    } 
    var user = await _userManager.GetUserAsync(User); 
    var roles = await _userManager.GetRolesAsync(user); 
    model.Username = user.UserName; 
    model.IsAuthenticated = true; 
    model.Id = user.Id; 
    model.Email = user.Email; 
    model.Roles = roles; 
    return Ok(model); 
} 

Это просто какой-то код на стороне сервера, который возвращает основную информацию о вошедшего в систему пользователя

Создание этой информации, доступной в стороне клиента код

import { Injectable } from '@angular/core'; 
import { BehaviorSubject } from 'rxjs/BehaviorSubject'; 
import { Http } from '@angular/http'; 
import { Auth } from '../Models/Account/auth'; 

@Injectable() 
export class AuthService { 

    private authSource = new BehaviorSubject<Auth>(new Auth); 
    public auth = this.authSource.asObservable(); 

    constructor(private http: Http) { 
     this.updateAuth(); 
    } 

    public updateAuth() { 
      var url = '/Api/Account/Auth'; 
      this.http 
       .get(url) 
       .toPromise() 
       .then(response => { 
        var auth = response.json() as Auth; 
        this.authSource.next(auth); 
       }); 
    } 
} 

AuthService теперь предлагает Observable, на который вы можете подписаться в своих компонентах, например например, как это:

private auth: Auth; 
private authSubscription: Subscription; 

ngOnInit() { 
    this.updateProfileOverview(); 
    this.authSubscription = this.authService.auth.subscribe(newAuth => { 
     this.auth = newAuth; 
     // React to the new auth value 
    }); 
} 

Получение UserId на сервере боковых контроллеров

Теперь, когда запросы быть автоматически заверены в рамках, вы можете использовать Asp.Net удостоверений UserManager путем введения его в вашем контроллер и использовать его, чтобы получить идентификатор пользователя, как это:

namespace App.Controllers 
{ 
    public class DataController : Controller 
    { 
     public NotesController(UserManager<ApplicationUser> userManager) 
     { 
      _userManager = userManager; 
     } 

     private readonly UserManager<ApplicationUser> _userManager; 

     public async Task<IActionResult> CreateNote() 
     { 
      var userId = _userManager.GetUserId(User); 
      // Use it... 
     } 
    } 
} 

Свойства User присутствует на все классы, производные от базового класса Controller.