從.NET平臺獲取已登錄的用戶到Angular 2應用程序

Question

我正在構建一個新的Angular2應用程序，它將駐留在.NET應用程序平臺內。我的Angular2應用程序應該獲取當前登錄用戶的API調用來獲取數據。我如何獲得userId到我的應用程序。

Answer 1

由於您沒有明確指定您正在使用的.Net平臺，因此我將假定它是最近的一個 - Asp.Net Core，其身份驗證提供程序爲Asp.Net Identity。

如果您使用默認的Asp.Net Identity模板，您可以簡單地使用基於Cookie的身份驗證來處理您的Web API請求。當您通過Angular 2s http服務撥打電話時，cookie會自動通過瀏覽器傳送到服務器，因此您無需在此指定任何內容。

下面是一些最起碼的代碼，可以做你想做的：

登錄方法，在您的服務器端控制器

[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()將設置會自動通過進一步的請求框架驗證客戶端上的cookie。

用戶信息的方法服務器端

[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 
    }); 
} 

獲取在您的服務器端控制器

現在，請求由框架內自動驗證的用戶ID，您可以通過注射它利用Asp.Net身份的UserManager您控制器以及使用它得到的用戶ID是這樣的：

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類派生的所有類。