我是 OAuth2 和angular-auth2-oidc库的新手，所以如果我犯了一些新手错误，请多多包涵。
我想要实现的目标：用户将单击主页中的登录链接，他将被发送到提供商的站点进行登录，然后使用令牌重定向回主页。
到目前为止的结果：用户被发送到提供商的站点以登录并成功发送回我的站点的主页，但我没有得到任何令牌。我在控制台中输出了一些数据，ngOnit()它们都是空的，未定义的或假的。
在ngOnit()函数内部，我还输出一些事件，我在控制台中得到的事件是token_refresh_error. 我没有在我的代码中明确地进行任何令牌刷新，但我仍然收到此错误。
在这篇文章的错误子标题下，我添加了有关错误的屏幕截图。
这是我的配置和实现：
这是我的 OAuth2 提供者的 openid 配置：
authorization_endpoint "https://DOMAIN_PROVIDER/op/v1/auth"
code_challenge_methods_supported
0 "plain"
1 "S256"
end_session_endpoint "https://DOMAIN_PROVIDER/op/v1/logout"
grant_types_supported
0 "authorization_code"
id_token_signing_alg_values_supported
0 "RS256"
issuer "https://DOMAIN_PROVIDER/op"
jwks_uri "https://DOMAIN_PROVIDER/op/v1/keys"
response_modes_supported
0 "query"
1 "fragment"
2 "form_post"
response_types_supported
0 "code"
scopes_supported
0 "openid"
subject_types_supported
0 "public"
token_endpoint "https://DOMAIN_PROVIDER/op/v1/token"
token_endpoint_auth_methods_supported
0 "client_secret_basic"
1 "client_secret_post"
userinfo_endpoint "https://DOMAIN_PROVIDER/op/v1/userinfo"
这是我的实现：
// 主页组件
export class HomeComponent implements OnInit {
private oAuthConfig: AuthConfig;
constructor(private oAuthService: OAuthService) { }
ngOnInit() {
// IN THIS METHOD I'M OUTPUTTING ALOT OF STUFF TO THE CONSOLE TO SEE IF IT IS WORKING
if (!this.oAuthService.getAccessToken()) {
this.initOAuthConfig();
console.log('__________ACCESS-TOKEN IS NOT SET___________');
} else {
console.log('___ACCESS-TOKEN IS SET:', this.oAuthService.getAccessToken());
}
console.log('_____GRANTED-SCOPE:', this.oAuthService.getGrantedScopes());
console.log('______IDENTITY-CLAIMS:', this.oAuthService.getIdentityClaims());
console.log('______HAS-ACCESS-TOKEN?:', this.oAuthService.hasValidAccessToken());
console.log('_____HAS-ACCESS-TOKEN?:', this.oAuthService.hasValidIdToken());
// HERE I'M OUTPUTTNG THE EVENTS TO SEE WHAT IS GOING ON
this.oAuthService.events.subscribe((e: OAuthErrorEvent) => {
if (e.type === 'token_received') {
this.logger.log('____________TOKEN RECEIVED');
}
this.logger.log('______====================EVENT-TYPE:', e.type);
this.logger.log('______====================EVENT-REASON:', e.reason);
this.logger.log('______====================EVENT-PARAMS:', e.params);
});
if (this.oAuthService.hasValidAccessToken()) {
this.oAuthService.loadUserProfile().then((t) => {
console.log('----USER-PROFILE:', t);
});
} else {
this.logger.log('----HAS VALID ACCESS TOKEN');
}
}
private initOAuthConfig(): void {
this.oAuthConfig = {
redirectUri: window.location.origin + '/login/oauth2/myapp',
postLogoutRedirectUri: window.location.origin + '/logout',
clientId: 'CLIENT-ID',
scope: 'openid, rrn, profile',
oidc: true,
issuer: 'https://DOMAIN_PROVIDER/op',
responseType: 'code',
showDebugInformation: true,
tokenEndpoint: 'DOMAIN_PROVIDER/op/v1/token',
jwks: {'keys': ['DOMAIN_PROVIDER/op/v1/keys']}
};
this.oAuthService.setStorage(sessionStorage);
this.oAuthService.configure(this.oAuthConfig);
this.oAuthService.loadDiscoveryDocumentAndTryLogin();
}
// 包含登录功能的类
export class HeaderComponent {
constructor(private oAuthService: OAuthService) { }
public login() {
this.oAuthService.initCodeFlow();
}
public logout() {
this.oAuthService.logOut();
}
}
// The html of the header component which contains the login link
<a (click)="login()" title="Login">
Login
</a>
// 错误/错误截图
以下是用户被重定向回主页时控制台中的错误
1)在此屏幕截图中，值是 null、false 或 undefined，除非加载发现文档：
2)在以下屏幕截图中，您将看到EVENT-TYPE之一是token_refresh_error。并且事件原因是BAD REQUEST。尽管在 de initOAuthConfig()方法中我添加了该属性，但它正在尝试向其发出请求https//DOMAIN_PROVIDER/op/v1/token并且失败。您还可以看到错误是. 屏幕截图的第二行显示Error getting tokentokenEndPointerror: "invalid_grant"
我添加jwks: {'keys': ['https://DOMAIN_PROVIDER/op/v1/keys']}到initOAuthConfig()认为它会解决问题，但它没有。
// 控制台的应用程序选项卡：会话存储
从控制台的应用程序选项卡中我可以看到会话存储中有一些键值对数据（本地存储中没有数据）见下一个屏幕截图：
