当前正在尝试使用我创建的 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
}
};
}
我明白你想做什么。我想针对您的问题建议以下步骤:
匹配客户端 ID 和重定向 URI: 确保 sso.config.ts(“nextApp”)中的 clientId 与“nextApp”客户端的 Duende Identity Server config.cs 中的 ClientId 匹配。 验证 sso.config.ts 中的 redirectUri 是否与 config.cs 中为“nextApp”客户端配置的 RedirectUris 匹配。包括正确的端口和路径(如果适用)。
更改登录功能: 更新 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
}
比较允许的范围: 确保 sso.config.ts 中请求的范围(“openid”、“profile”、“auctionApp”)也包含在 config.cs 中“nextApp”客户端允许的范围中。
为 Angular 域启用 CORS:
如果您的 Angular 应用程序托管在与 Duende Identity Server 不同的域中,请在 Identity Server 中配置 CORS 以允许来自 Angular 应用程序域的请求。 附加步骤:
启用调试日志:
在 sso.config.ts 中设置 showDebugInformation: true 以获取有关 OAuth2 流的详细日志并识别请求参数或响应的潜在问题。 检查网络流量: 使用浏览器开发人员工具来分析登录流程中的网络请求和响应。查找错误或意外行为。 与邮递员比较: 将成功登录期间从 Postman 发送的请求与从 Angular 应用程序发送的请求进行比较。识别参数或标题中的任何差异。