通过外部 api 从重定向 url 存储访问令牌 [关闭]

Question

我正在使用 Spotify web api 使用 angular 制作 web 应用程序。

虽然我能够对用户进行身份验证并获取播放列表/曲目，甚至创建播放列表等，但在用户同意我的应用程序的范围后，我仍然无法从 redirect_url 获取 access_token。

目前我可以通过使用下面的代码来完成上述操作......但这是一种非常糟糕且低效的方式。

Service.ts：

  // ASK USER TO GRANT PERMISSION FOR THE FOLLOWING SCOPES
  Login(showDialog = true) {
    const state = uuid();
    localStorage.setItem('xsrf-token', state);
    const params = {
      response_type: 'token',
      client_id: "ec540590bb6449a181edhjdjsdjkdshasbdjk",
      redirect_uri: "http://localhost:4200/selectionMenu",
      scope:
        'user-top-read%20user-read-private%20playlist-read-private%20user-library-modify%20playlist-modify-public%20user-follow-read%20user-read-playback-state%20user-modify-playback-state%20user-read-recently-played%20user-read-currently-playing%20user-follow-modify%20playlist-modify-private%20playlist-read-collaborative%20user-library-read%20user-read-email',
      state,
      show_dialog: `${showDialog}`
    }
    const redirectUrl = `https://accounts.spotify.com/authorize?${qs.stringify(params)}`;
    window.location.href = redirectUrl;
  }

在此之后，我可以显示以下屏幕：

在用户活动后[如果他点击同意]，spotify 服务将重定向到以下网址： http://localhost:4200/selectionMenu 但会将 access_token 附加到上面的 url，所以我的页面将重定向到的最终 url 如下： http://localhost:4200/selectionMenu#access_token=BQASUoH7jashdjakshdashvday63hvsjadjhqBEWmVi9bKNg7EBF7Dt2dCvSNWLlQ3zUOp6hGuLfvJ9QH4PXRLTz4AajPDyBW7SV9lXhFb_IF25qb7hheUsvyg7pX-zD-TsOtbRCb7ohF86wrjWGFRXuugT-mnWESBMCRVSxTi34nOcG4VpvM-Ew9F0kl1vq5zdsSRSnCvZwmsQNGngDVpj2rsS2nQG0EIXdqTmSut0CdZFFobz5k9ojpbw971ye5dl1cXnHlc&token_type=Bearer&expires_in=3600&state=59418612-e4cb-46bb-90af-d01f7a2c790a

画面如下：

要从上面的 url 中提取 access_token，我目前正在执行以下操作：

在 Component.ts 中：

currentWindowUrl() {
    const pathname = new URL(window.location.href).pathname;
    const redirectURL = window.location.href.split('#');
    usableURL = redirectURL[1].split('&');
    this.getTokens();
  }

  getTokens() {
    const accessToken = usableURL[0].split('=')[1];
    const tokenType = usableURL[1].split('=')[1];
    const refreshTime = usableURL[2].split('=')[1];
    const state = usableURL[3].split('=')[1];
    // pass accessToken to service and store it.
    this.spotifyAuthorizeService.saveAccessToken(accessToken);
  }

我基本上是在使用 window.location.href 并将其拆分，直到我得到 access_token，这听起来很蹩脚。

我的问题

->我如何获取 Spotify 附加到 redirect_url 的访问令牌，以更好的方式并将其存储在 localStorage[不适合 xhr 攻击]，任何其他更好的方式可以存储它以便我可以将它用于我的应用程序中的所有其他页面，并在每 60 分钟 [令牌到期时间] 后刷新一次。

->有没有办法不显示url中#之后的部分，即access_token，这样我就不会放弃它。

Angular-Auth-OIDC

我遵循了文档并提出了以下配置：

assets/auth.clientConfiguration.json：

{
    "stsServer": "https://accounts.spotify.com/authorize",
    "redirect_url": "http://localhost:4200/selectionMenu",
    "client_id": "ec5405hgasfdhasfdashdgdcbd27987aef6",
    "response_type": "token",
    "scope": "user-top-read%20user-read-private%20playlist-read-private%20user-library-modify%20playlist-modify-public%20user-follow-read%20user-read-playback-state%20user-modify-playback-state%20user-read-recently-played%20user-read-currently-playing%20user-follow-modify%20playlist-modify-private%20playlist-read-collaborative%20user-library-read%20user-read-email",
    "post_logout_redirect_uri": "https://localhost:4200/",
    "start_checksession": true,
    "silent_renew": true,
    "silent_renew_url": "https://accounts.spotify.com/authorize",
    "post_login_route": "/selectionMenu",
    "forbidden_route": "/forbidden",
    "unauthorized_route": "/unauthorized",
    "log_console_warning_active": true,
    "log_console_debug_active": true,
    "max_id_token_iat_offset_allowed_in_seconds": 10
}

我正在为应用程序提供以下错误：

当我点击登录时，应用程序重定向到以下网址： https://accounts.spotify.com/authorize/.well-known/openid-configuration

最后出现 405 错误。

我的理解

我知道 url 配置错误，我不确定在 stsServer 中指定什么 url，我猜它是 spotify 的 url 因为它提供令牌服务但我不确定我在 json 文件中配置的 url 是否正确。

对此的任何见解都会有所帮助。

谢谢！

Answer 1

通过第三方身份验证提供商进行身份验证

直接通过第三方身份验证提供商对您的客户端进行身份验证总是一个坏主意。

您应该设置一个后端来保存此身份验证，您的客户端将不会保存第三方身份验证提供者的访问令牌，而是您的后端。

以下是您的身份验证流程的示意图

检索凭据

Javascript

您可以使用URLSearchParams，它可以完美地完成您需要使用 URL 参数的工作。

getTokens() {
  var urlParams = new URLSearchParams(window.location.search);
  return {access_token: urlParams.get("access_token"), refresh_token: urlParams.get("refresh_token")}
}

角度

Angular 提供了一种使用 ActivatedRoute 动态处理 URL 的方法。

constructor(private route: ActivatedRoute) {
  this.route.paramMap.pipe(params => {
    this.yourservice.saveToken(params.get("access_token"), params.get("refresh_token"))
  })
}

这些是示例，可能与您的代码或上下文不匹配。

工具

以下是可用于实现目标的库列表：

1. Symfony OAuth2 Client
2. Node OAuth2 Client

Answer 2

您可以为此目的使用 OIDC 客户端从您自己的身份服务器提供身份验证令牌。 我建议使用两个 Angular 库：

NG OIDC 客户端 - https://github.com/sourcenetwork/ng-oidc-client

Angular Auth OIDC 客户端 - https://github.com/damienbod/angular-auth-oidc-client

您可以根据您的问题实现以下目标：

1. 定期刷新令牌（由您定义）
2. 在任何地方直接在代码中访问令牌
3. 根据您的在会话存储或本地存储中存储令牌 战略。
4. 随时从浏览器中删除令牌。

您不必像现在使用 Spotify 服务那样手动操作。

如果有帮助，请告诉我。