IdentityServer4 SPA登录 [英] IdentityServer4 SPA Login

问题描述

我想创建一个SPA，然后通过我的自定义登录屏幕登录(前端在React& Redux中)，但我不幸失败了.

I want to create an SPA, and Login Via my custom Login Screen (Frontend is in React&Redux), but i miserably fail at it.

因此，基本上，使用时我会返回404错误

So basically i´ll get an 404 Error returned, when using

    const username = 'bob'
    const password = 'bob'
    const returnUrl = 'https://localhost:5001/'

    fetch('https://localhost:5000/api/Authenticate/Login', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      credentials: 'include',
      body: JSON.stringify({
        username,
        password,
        returnUrl,
      }),

我得到的响应始终是: POST https://localhost:5000/api/验证/登录 net :: ERR_ABORTED 404(未找到)

the response I get is always: POST https://localhost:5000/api/Authenticate/Login net::ERR_ABORTED 404 (Not Found)

后端看起来像:

            services.AddCors(setup =>
            {
                setup.AddDefaultPolicy(policy =>
                {
                    policy.WithOrigins("https://localhost:5000", "https://localhost:5001");
                    policy.AllowAnyHeader();
                    policy.AllowAnyMethod();
                    policy.AllowCredentials();
                        //.WithHeaders(HeaderNames.ContentType, "x-custom-header");
                });
            });

，并在配置方法"中为app.UseCors();

and in the Configure Method as app.UseCors();

我的IdentityServer4，无论如何都不会记录任何错误或日志.

My IdentityServer4, wont Log any Errors nor an Log in anyway.

以下是相关文件的要点: https://gist.github.com/TheRealLenon/2da8ccebd1b1699ff3afd3d3612b971

Here an Gist of the related Files: https://gist.github.com/TheRealLenon/2da8ccebd1b1699ff3afd3d3612bf971

但是将其更改为policy.AllowAnyOrigin();时，我将在服务器中获得以下登录信息:System.InvalidOperationException: The CORS protocol does not allow specifying a wildcard (any) origin and credentials at the same time. Configure the CORS policy by listing individual origins if credentials needs to be supported. 响应是:POST https://localhost:5000/api/Login net::ERR_CONNECTION_REFUSED

But when changing it to policy.AllowAnyOrigin(); i´ll get the following Log in my Server: System.InvalidOperationException: The CORS protocol does not allow specifying a wildcard (any) origin and credentials at the same time. Configure the CORS policy by listing individual origins if credentials needs to be supported. And the Response is: POST https://localhost:5000/api/Login net::ERR_CONNECTION_REFUSED

您有什么想法吗，怎么了?还是其他人?这很令人困惑，因为在Internet上使用CORS和404错误找不到任何有用的东西. 附加app.UseAuthentication();时，我将收到以下错误消息:CORS request made for path: /api/Login from origin: https://localhost:5001 but was ignored because path was not for an allowed IdentityServer CORS endpoint这使我感到困惑，因为我已在以下位置定义了它:

Do you have any idea, what is wrong? Or anyone else? This is confusing, because theres nothing helpful i could found on the Internet with CORS and the 404 Error.. When appending app.UseAuthentication(); i will get the following error-Message: CORS request made for path: /api/Login from origin: https://localhost:5001 but was ignored because path was not for an allowed IdentityServer CORS endpoint which confuses me, because i´ve defined it within:

            services.AddCors(setup =>
            {
                setup.AddDefaultPolicy(policy =>
                {
                    policy.WithOrigins("https://localhost:5000", "https://localhost:5001");
                    policy.AllowAnyHeader();
                    policy.AllowAnyMethod();
                    policy.AllowCredentials();
                        //.WithHeaders(HeaderNames.ContentType, "x-custom-header");
                });
            });

我还尝试了多个端点，以防万一我在AuthenticateController中不匹配"Route"，但是我可以随意设置它，结果将是相同的.

Ive also tried it with multiple Endpoints, in case I´ve mismatched the "Route" in my AuthenticateController, but I can set it like I want, the result will be the Same.

推荐答案

在Config.cs上定义客户端时，将使用默认的CORS实现.您只需在定义客户端时将spa应用程序的origin添加到AllowedCorsOrigins

As you are defining the clients on Config.cs, the default CORS implementation will be in use. You just need to add the spa app's origin to AllowedCorsOrigins when defining the client

                new Client
                {
                    ...

                    AllowedCorsOrigins =
                        { 
                            "http://localhost:5001" 
                        },

                    ...
                },

注意http://localhost:5001是来源，http://localhost:5001/是网址

修改:

要在SPA应用程序上具有登录UI，还需要修改IdentityServer的Startup类以添加cors，这是详细信息:

To have login UI on SPA app, you also need to modify Startup class of IdentityServer to add cors, here is details:

1. 将此代码添加到ConfigureServices方法:

services.AddCors(options => {
                options.AddPolicy("default", policy =>
                {
                    policy.WithOrigins("http://localhost:5001")
                        .AllowAnyHeader()
                        .AllowAnyMethod()
                        .AllowCredentials();
                });
            });

1. 这是Configure方法的代码

1. And this code to Configure method

app.UseCors("default");

这篇关于IdentityServer4 SPA登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！