使用 Postman 登录 Angular ASP.NET CORE 应用程序

Posted

技术标签:

【中文标题】使用 Postman 登录 Angular ASP.NET CORE 应用程序【英文标题】:Login to Angular ASP.NET CORE app using Postman 【发布时间】:2021-09-29 19:53:36 【问题描述】:

我想使用邮递员登录我的应用程序并在登录时收到一个令牌以使用该令牌进行其他 api 调用。我试过 locahost/connect/token 但我收到 405 错误。如何登录我的 使用邮递员的应用程序感谢您的帮助。

这是我生成应用程序的方式

    我打开了 Visual Studio 2019。 我选择了“创建新项目” 选择带有 Angular 的 ASP.NET Core 点击下一步 给它一个名字 将其保存在您想要的位置 在下拉“身份验证类型”中选择“个人帐户”

创建应用后,登录和注册工作完美,但我想在 Postman 中调用这些 api。

这是 Visual Studio 为我生成的创业公司。

public class Startup

    public Startup(IConfiguration configuration)
    
        Configuration = configuration;
    

    public IConfiguration Configuration  get; 

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    
        services.AddDbContext<erp_colombiaDbContext>(options =>
            options.Usemysql(
                Configuration.GetConnectionString("DefaultConnection")));

        services.AddDefaultIdentity<ApplicationUser>(options => options.SignIn.RequireConfirmedAccount = true)
            .AddEntityFrameworkStores<erp_colombiaDbContext>();

        services.AddIdentityServer()
            .AddApiAuthorization<ApplicationUser, erp_colombiaDbContext>();

        services.AddAuthentication()
            .AddIdentityServerJwt();
        services.AddControllersWithViews();
        services.AddRazorPages();
        // In production, the Angular files will be served from this directory
        services.AddSpaStaticFiles(configuration =>
        
            configuration.RootPath = "ClientApp/dist";
        );
    

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    
        if (env.IsDevelopment())
        
            app.UseDeveloperExceptionPage();
            app.UseDatabaseErrorPage();
        
        else
        
            app.UseExceptionHandler("/Error");
            // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
            app.UseHsts();
        

        app.UseHttpsRedirection();
        app.UseStaticFiles();
        if (!env.IsDevelopment())
        
            app.UseSpaStaticFiles();
        

        app.UseRouting();

        app.UseAuthentication();
        app.UseIdentityServer();
        app.UseAuthorization();
        app.UseEndpoints(endpoints =>
        
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "controller/action=Index/id?");
            endpoints.MapRazorPages();
        );

        app.UseSpa(spa =>
        
            // To learn more about options for serving an Angular SPA from ASP.NET Core,
            // see https://go.microsoft.com/fwlink/?linkid=864501

            spa.Options.SourcePath = "ClientApp";

            if (env.IsDevelopment())
            
                spa.UseAngularCliServer(npmScript: "start");
            
        );
    

我已经看到这个答案Default settings for AddApiAuthorization (Scaffolded Angular + IdentityServer4),但我不明白他从哪里得到值来填写邮递员表格“获取新的访问令牌”

【问题讨论】:

这能回答你的问题吗? Default settings for AddApiAuthorization (Scaffolded Angular + IdentityServer4) 1) 您共享的代码未显示 /connect/token 端点。请提供相关控制器的代码 2)另外,您使用哪种方法调用端点? @CGundlach connect/token enpoint 是我在谷歌上找到的,但我在我的代码中没有看到那个端点。 @JCH 我不确定他选择了哪种类型的授权。在类型下拉列表中,我必须选择授权类型以及我最多填写哪些值?这更是我的问题。 @JCH 我相信我找到了身份验证类型,它是 OAuth 2.0 我试图填写这些字段,但我得到身份验证失败我不确定希望提交我必须填写以及我可以在哪里获得来自的信息 【参考方案1】:

为了回应上面的cmets而发布这个。

在this question 中,来自用户@Lasanga Guruge 的回答指出了基本脚手架应用程序的默认值。所以这些设置应该适合你在 Postman 中

    授权码的种类

    ClientId 将对应应用程序名称。这可以在 appsettings.json (Clients) 和 api-authorization.constants.ts (ApplicationName) 中更改

    默认情况下,客户端密码不会应用于客户端

    还启用了 pkce。

    没有默认凭据

    将添加名为 ProjectNameAPI 的附加范围

我创建了一个基本的 ASP.Net Angular 项目并让它使用这些值

授权类型 - 授权代码(使用 PKCE) 回调 URL - https://localhost:port/authentication/login-callback 身份验证 URL - https://localhost:port/connect/authorize 令牌 URL - https://localhost:port/connect/token ClientId - ClientId 范围 - ClientIdAPI openid 配置文件

要获取您的客户端 ID,请查看 appsettings.json 中的 IdentityServer 部分 在我的下面,“Project2”是我的 clientID。它应该是你为项目命名的任何名称。

"IdentityServer": 
  "Clients": 
    "Project2": 
      "Profile": "IdentityServerSPA"
    
  

更新

要使用令牌进行授权 API 调用,您需要确保在请求的 Authorization 标头中设置它。

Authorizaion = "Bearer token"

您应该可以通过在 Postmans 授权表单中将“添加授权数据”字段设置为“请求标头”来进行设置。

【讨论】:

啊,非常感谢你,现在我明白了,再问一个问题。单击橙色按钮“获取新访问令牌”后,我会看到一个绿色复选标记,并且可以看到 TokenName 及其值。但是,当我调用 base_url/api/clients 时,我仍然得到 401。这是为什么呢?感谢您的所有帮助。 @JuniorCortenbach 您需要确保在请求的授权标头中使用了令牌。我已经更新了答案以包含一些细节 谢谢谢谢!现在可以了。你是最棒的。

以上是关于使用 Postman 登录 Angular ASP.NET CORE 应用程序的主要内容,如果未能解决你的问题,请参考以下文章

从 Angular 6 向 ASP API 发布请求

[ASP.NET Core Web应用上使用个人用户帐户存储在应用程序中的Postman模拟登录时出现400错误请求错误

Angular 2 使用 ASP.NET 身份令牌登录

即使使用 ASP.NET CORE 登录,我在 Angular 中也有 401 Unauthorized

带有 Angular 和 Express 的 CORS - 在 Postman 中工作,但不在浏览器中

如何将 Auth0 与 .net 核心 API 和 Angular 一起使用?