根据OAuth2和OpenID Connect的规范,redirect_uri必须是先前在授权请求中注册的URI。对于使用angular-oauth2-oidc包的Angular项目,redirect_uri默认设置为/index.html。但是,如果您的项目不在根目录下,而是有一个基本URL路径,则应该设置正确的redirect_uri以避免登录和重定向问题。
以下是如何在Angular项目中设置自定义redirect_uri。
将OAuthModule添加到AppModule
app.module.ts:
import { NgModule } from '@angular/core';
import { OAuthModule } from 'angular-oauth2-oidc';
@NgModule({
imports: [
OAuthModule.forRoot()
],
bootstrap: [AppComponent]
})
export class AppModule { }
为OAuthService设置自定义redirect_uri
auth.service.ts:
import { Injectable } from '@angular/core';
import { OAuthService, JwksValidationHandler } from 'angular-oauth2-oidc';
@Injectable({
providedIn: 'root'
})
export class AuthService {
constructor(private oauthService: OAuthService) {
this.oauthService.configure({
// ...其他配置
redirectUri: 'https://example.com/my-custom-uri',
});
this.oauthService.tokenValidationHandler = new JwksValidationHandler();
this.oauthService.loadDiscoveryDocumentAndTryLogin();
}
// 省略其他方法...
}
使用自定义URI作为redirect_uri
login.component.ts
import { Component } from '@angular/core';
import { AuthService } from '../auth.service';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent {
constructor(private authService: AuthService) {
}
public login(): void {
this.authService.login();
}
}
login.component.html
以上代码展示了如何使用https://example.com/my-custom-uri作为自定义URI,并将其配置为redirect_uri。随后,在login.component.ts文件中,我们使用AuthService并调用login()方法来启动OAuth2