时间戳

首页 > 解决方案 > 使用 Angular Http Headers 发送凭据数据的正确方法是什么？

javascript - 使用 Angular Http Headers 发送凭据数据的正确方法是什么？

问题描述

我正在努力寻找发送凭据的最佳方式，因为我发现的所有内容在我看来似乎都不安全？这是发送凭据的正确方法吗？这不应该在用户名和密码之间用分号在授权标头中设置吗？（用户名：密码）然后解析为base64字符串？我严格要求处理登录表单上的提交，而不是稍后使用拦截器等授权。

login(username: string, password: string) {
    return this.http.post<any>(httpsUrl, { username, password })
        .pipe(map(user => {
            if (user && user.token) {
                localStorage.setItem('currentUser', JSON.stringify(user));
                this.currentUserSubject.next(user);
            }
            return user;
        }));
}

标签： javascriptangularhttp

解决方案

这更多的是遵循标准而不是严格安全的问题。您尝试执行的身份验证通常称为基本身份验证。

有一个标准概述了如何进行基本身份验证，你是对的，它确实使用了请求标头和 base 64 编码字符串。

但是，如果您的 Web 服务器已配置为允许您将凭据作为 POST 正文的一部分发送，那么安全性也不会降低。

它只是不遵循标准，这可能会对您的特定应用程序产生任何影响，也可能不会。

关于安全方面，只要您使用 SSL\HTTPS，那么无论您最终使用哪种方法，数据都将通过网络进行加密。

将这种机制与 Angular 一起使用的示例如下

// You need to import this class
import { HttpHeaders } from '@angular/common/http';

login(username: string, password: string) {
    const encodedCredentials = btoa(`${username}:${password}`);
    const httpOptions = {
        headers: new HttpHeaders({
            'Authorization': `Basic ${encodedCredentials}`
        })
    };

    // This could now be get because we don't have a body
    return this.http.get<any>(httpsUrl, httpOptions)
        .pipe(map(user => {
            if (user && user.token) {
                localStorage.setItem('currentUser', JSON.stringify(user));
                this.currentUserSubject.next(user);
            }
            return user;
        }));
}

推荐阅读