Angular SSO 未进入身份登录页面

Question

当前正在尝试使用我创建的 Duende Identity 服务器让我的 Angular 应用程序进行 SSO 登录。我可以点击邮递员中的所有内容并登录并获得令牌。现在我尝试使用 Angular 应用程序获得相同的结果，但是当我单击登录按钮时，出现以下错误。我使用 angular-oauth2-oidc 包来简化这个过程。我已经发布了我拥有的代码，但似乎不明白为什么我可以点击身份服务器的登录屏幕。

正确的链接是

/Account/Login

，但它永远不会到达那里。

当我收到错误时就到了这里：

http://localhost:5000/home/error?errorId=CfDJ8OrrbCpIWPdCjNyK...

Error
Sorry, there was an error : invalid_request
Request Id: 0HN3B2BKF8VK6:00000001

sso.config.ts

import { AuthConfig } from 'angular-oauth2-oidc';

  export const authCodeFlowConfig: AuthConfig = {      
  issuer: 'http://localhost:5000',
  clientId: 'nextApp',
  responseType: 'code',
  redirectUri: window.location.origin,
  // dummyClientSecret: 'secret',
  scope: 'openid profile auctionApp',
  strictDiscoveryDocumentValidation: false, 
  skipIssuerCheck: true,
  showDebugInformation: true,
};

HeaderComponent.ts

export class HeaderComponent implements OnInit{


constructor(private router: Router,private oauthService: OAuthService) 
{ 
  this.configureSingleSignOn(); 
}

configureSingleSignOn()
{
  this.oauthService.configure(authCodeFlowConfig);
  this.oauthService.loadDiscoveryDocumentAndTryLogin();     
} 

login() {
  this.oauthService.initImplicitFlow();          
}

HeaderComponent.html

 <li class="nav-item">
    <button class="nav-link" (click)="login()">LogIn</button>
 </li>

Asp.Net Core 身份服务 config.cs

public static class Config
{
    public static IEnumerable<IdentityResource> IdentityResources =>
        new IdentityResource[]
        {
        new IdentityResources.OpenId(),
        new IdentityResources.Profile(),
        };

    public static IEnumerable<ApiScope> ApiScopes =>
        new ApiScope[]
        {
            new ApiScope("auctionApp", "Auciton app full access"),
        };

    public static IEnumerable<Client> Clients(IConfiguration config) =>
        new Client[]
        {        
            // interactive client using code flow + pkce
            new Client
            {
                ClientId = "postman",
                ClientName = "postman",
                AllowedScopes = {"openid","profile", "auctionApp"},
                RedirectUris = {"https://www.getpostman.com/oauth2/callback"},
                ClientSecrets = new [] {new Secret("NotASecret".Sha256())},
                AllowedGrantTypes = {GrantType.ResourceOwnerPassword}
            },
            new Client
            {
                ClientId = "nextApp",
                ClientName = "nextApp",
                ClientSecrets = {new Secret("secret".Sha256())},
                AllowedGrantTypes = GrantTypes.CodeAndClientCredentials,
                RequirePkce = false,
                RedirectUris = {config["ClientApp"] + "/api/auth/callback/id-server"},
                AllowOfflineAccess = true,
                AllowedScopes = {"openid", "profile", "auctionApp"},
                AccessTokenLifetime = 3600*24*30,
                AlwaysIncludeUserClaimsInIdToken = true
            }
        };
}

Answer 1

我明白你想做什么。我想针对您的问题建议以下步骤：

1. 客户端配置验证：

匹配客户端 ID 和重定向 URI： 确保 sso.config.ts（“nextApp”）中的 clientId 与“nextApp”客户端的 Duende Identity Server config.cs 中的 ClientId 匹配。 验证 sso.config.ts 中的 redirectUri 是否与 config.cs 中为“nextApp”客户端配置的 RedirectUris 匹配。包括正确的端口和路径（如果适用）。

2. 授予类型更正：

更改登录功能： 更新 HeaderComponent.ts login() 函数以使用 this.oauthService.initLoginFlow() 而不是 this.oauthService.initImplicitFlow()。这对于 sso.config.ts 中配置的 PKCE 代码流是必需的。

TypeScript
HeaderComponent.ts
login() {
  this.oauthService.initLoginFlow(); // Use initLoginFlow for code flow
}

3. 范围验证：

比较允许的范围： 确保 sso.config.ts 中请求的范围（“openid”、“profile”、“auctionApp”）也包含在 config.cs 中“nextApp”客户端允许的范围中。

4. CORS 配置（如果适用）：

为 Angular 域启用 CORS：

如果您的 Angular 应用程序托管在与 Duende Identity Server 不同的域中，请在 Identity Server 中配置 CORS 以允许来自 Angular 应用程序域的请求。 附加步骤：

启用调试日志：

在 sso.config.ts 中设置 showDebugInformation: true 以获取有关 OAuth2 流的详细日志并识别请求参数或响应的潜在问题。 检查网络流量： 使用浏览器开发人员工具来分析登录流程中的网络请求和响应。查找错误或意外行为。 与邮递员比较： 将成功登录期间从 Postman 发送的请求与从 Angular 应用程序发送的请求进行比较。识别参数或标题中的任何差异。