Question

我正在尝试使用登录编写Angular 2（最终版本）中的应用程序并记住用户函数。我试着理解这个原理。

1-用户输入他的登录名和密码，然后单击“连接”

使用用户登录名和密码在webservices上发出2-Angular2请求

3- Webservices创建一个令牌并将其存储在db

中

4- Web服务将其发送回前端。

但前面对令牌做了什么？它是否将其存储在localStorage中？

RememberMe：

我已阅读此主题What is the best way to implement "remember me" for a website?

我知道我们需要一个令牌并检查每个页面，如果这个令牌存在于cookie中，并且如果它在db中是相同的。

但是它与登录的标记不同吗？我是将它存储在localStorage，sessionStorage还是cookie中？

有人可以向我解释清楚这一切吗？或者，如果您有任何明确的主题，教程或应用程序代码可以理解，我会非常高兴。

Answer 1

你可以看看JWT。它的工作方式如下：

服务器端：在您的Web服务或Web API中，登录控制器具有登录方法，该方法将接受用户名和密码并使用密钥生成令牌。

public class CustomAuthorizeAttribute : AuthorizeAttribute
{
    public override void OnAuthorization(System.Web.Http.Controllers.HttpActionContext actionContext)
    {

        AuthenticationHeaderValue token = actionContext.Request.Headers.Authorization;
        if (ValidateToken(token.ToString()))
            return;
        else
            throw new HttpResponseException(System.Net.HttpStatusCode.Unauthorized);
    }

    private bool ValidateToken(string TokenString)
    {
        bool result = false;

        try
        {
            SecurityToken securityToken = new JwtSecurityToken(TokenString);
            JwtSecurityTokenHandler securityTokenHandler = new JwtSecurityTokenHandler();
            RSACryptoServiceProvider publicAndPrivate = new RSACryptoServiceProvider();

            publicAndPrivate.FromXmlString(File.ReadAllText(HostingEnvironment.MapPath("~/AppKey.xml")));

            TokenValidationParameters validationParameters = new TokenValidationParameters()
            {
                ValidIssuer = "http://example.com",
                ValidAudience = "http://receiver.com",
                IssuerSigningKey = new RsaSecurityKey(publicAndPrivate)
            };

            ClaimsPrincipal claimsPrincipal = securityTokenHandler.ValidateToken(TokenString, validationParameters, out securityToken);

            result = true;
        }
        catch (Exception ex)
        {
            result = false;
        }

        return result;
    }
}

请记住，此处使用的“AppKey.xml”文件是签署令牌的密钥，稍后将使用该令牌解码令牌。然后你可以创建customAuthorizeAttribute（在web api中不确定Web服务但应该有另一种方法）使用之前使用的密钥文件来验证令牌。

[CustomAuthorize]
    [HttpPost]
    public string TestAuthorization()
    {
        return "Success!";
    }

现在，无论您想使用授权，只需将此customAuthoorize属性放在此方法上即可。

export class DataService {

constructor(private http: Http) { }

postService(url: string, body: any, options?: RequestOptions):     Observable<any> {
let tempOptions: RequestOptions = options;

if (tempOptions)
  tempOptions.headers.append('Authorization', localStorage.getItem("appToken"));
else {
  tempOptions = new RequestOptions();
  let hd = new Headers();
  hd.append('Authorization', localStorage.getItem("appToken"));

  tempOptions.headers = hd;
}

return this.http.post(url, body, tempOptions).map((result: Response) => <any>result.json());

}

}

客户端：在Angular2应用程序实现服务中，它会在将请求发送到服务器之前将令牌注入到授权头中。

Login() {
this.myDataService.postService('http://YOURAPI/Login?username=xyz&password=xyz', null).subscribe(result => {
  let token = result;
  localStorage.setItem("appToken",token);
  this.message="Login successful";
});

然后在实际的组件类中简单地实现它。

YourMethod() {
this.myDataService.postService('http://YourAPI/TestAuthorization', null).subscribe(result => {
  this.message = result;
});

登录方法中的

将令牌存储到本地存储，然后每当您通过刚创建的角度服务调用服务器方法时，将在请求头中注入授权令牌。

venv/lib/python2.7/site-packages/django

你们都准备好了！享受！

Angular2 - 登录并记住用户

1 个答案: