使用 Angular 重定向 URI 回调后从 URL 中获取 OAuth 令牌答案

【问题标题】：Grabbing the OAuth Token From URL After Redirect URI Callback Using Angular使用 Angular 重定向 URI 回调后从 URL 中获取 OAuth 令牌
【发布时间】：2020-07-21 14:54:54
【问题描述】：

我将我的 Angular 应用程序重定向到 Spotify 登录 (https://accounts.spotify.com/authorize) 一旦他们登录，他们就会被重定向回http://localhost:4200/callback。此 URL 附加了一个令牌。但它立即重定向到（我希望它重定向到这里）：

const appRoutes: Routes = [{ path: 'callback', redirectTo: '/host', pathMatch: 'full' }]

如何/在哪里保留身份验证令牌而不将其放在用户 URL 中？

我意识到我最终也需要 AuthGuards，但首先我想检索令牌。

【问题讨论】：

嘿拉森。我正在尝试实现这种东西（对于keycloak），但我有这个useHash: true。知道如何在 useHash 设置为 true 的情况下实现相同的效果，因为 keycloak 不允许在 redirect_uri 中使用 # 吗？

标签： angular authentication oauth-2.0 auth-guard

【解决方案1】：

建议不要在路由配置中直接设置“redirectTo”。相反，添加一个回调组件来处理令牌和重定向。如下：

const appRoutes: Routes = [
    { path: 'callback', component: CallbackComponent }
]

在回调组件中

export class CallbackComponent implements OnInit {
    constructor(private route: ActivatedRoute, private router: Router) {}

    public ngOnInit():void {
        const token = this.route.snapshot.queryParamMap.get('token');
        // Handle token
        // ...
        this.router.navigate(['./host']);
    }
}

【讨论】：

【解决方案2】：

验证自动重定向不应在 app.component.ts 中处理，如果是，则通过警卫处理它，因为它负责重定向。

然后

constructor(private route: ActivatedRoute){}
  public ngOnInit():void {
        const token = this.route.snapshot.queryParamMap.get('token');
        // Handle token
        // ...
        this.router.navigate(['./host']);
    }

【讨论】：