如何在 angular 中重定向到身份服务器登录？

Question

我希望在用户访问应用程序时立即重定向到身份服务器。在当前设置下，我有一个登录按钮，点击后可将用户重定向到 ID 服务器，但我想删除此按钮，以便在打开应用程序时发生。

这是我的 app.component.ts 文件

import { OidcSecurityService } from 'angular-auth-oidc-client';

export class AppComponent implements OnInit {

  constructor(private ref: ChangeDetectorRef, public oidcSecurityService: OidcSecurityService) {
  }
  
  ngOnInit() {

    this.oidcSecurityService
    .checkAuth()
    .subscribe((auth) => console.log('is authenticated', auth));
    
  login() {
    this.oidcSecurityService.authorize();
  }
}

和对应的html

<div>
    <button (click)="login()">Login</button>
</div>

Answer 1

从路由器导入 {Router}。在你的构造函数上设置它 router: Router 然后

this.oidcSecurityService.checkAuth().subscribe((auth) => router.navigateByUrl('Your URL');

Answer 2

您可以通过实施 CanActivate interface 在 auth guard 的帮助下解决您的问题。如果 canActivate returns false，则取消路由导航，我们可以使用它来授权我们的用户/将我们的用户重定向到登录页面。

每条需要经过身份验证的用户的路由都会在路由定义中的 canActivate 属性中引用您的 auth guard。

  { 
    path: 'admin', 
    component: AdminComponent, 
    canActivate: [AuthGuard]
  }

授权守卫：

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
constructor(private oidcSecurityService: OidcSecurityService ) {}

  canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
    return this.oidcSecurityService.checkAuth().pipe(
     tap(isAuthenticated => {
         if (!isAuthenticated) {
             this.oidcSecurityService.authorize();
         }
     })
   );
  }

如果您需要更多帮助，请查看文档 here。尽管文档没有提供可观察对象的示例。

Answer 3

如果这对你来说是一个有效的选项，我个人建议切换到 angular-oauth2-oidc。 (https://www.npmjs.com/package/angular-oauth2-oidc)

然后您可以在 app.component.ts 中执行此操作：

this.oauthService.tryLogin().then((success: boolean) => {
  if (!success) this.oauthService.initCodeFlow();
});

如何在 angular 中重定向到身份服务器登录？

How to be redirected to identity server login in angular?

identityserver4

angular