angular - 让登录用户从 .NET 平台登录到 Angular 2 应用程序

Question

我正在构建一个新的 Angular2 应用程序，它将驻留在 .NET 应用程序平台中。我的 Angular2 应用程序应该让当前登录的用户调用 API 来获取数据。如何将 userId 获取到我的应用程序中。

Answer 1

由于您没有明确指定您使用的是什么 .Net 平台，我假设它是最新的平台 - Asp.Net Core 和 Asp.Net Identity 作为身份验证提供程序。

如果您使用默认的 Asp.Net Identity 模板，您可以简单地对您的 Web API 请求使用基于 cookie 的身份验证。当您通过 Angular 2s http 服务进行调用时，您的浏览器会自动将 cookie 传递给服务器，因此您无需在那里明确指定任何内容。

这里有一些最小的代码，可以做你想做的事:

服务器端 Controller 中的登录方法

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

执行登录的 Angular 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，该 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 
    });
}

在服务器端 Controller 中获取 UserId

现在框架会自动验证请求，您可以使用 Asp.Net Identity 的 UserManager，方法是将它注入(inject)您的 Controller 并使用它来获取用户 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 类派生的所有类中。