Angular：Instagram 授权 - 访问令牌

Question

所以，我正在构建一个应用程序，它将（除其他外）在特定主题标签上提供 instagram、twitter、fb 和 yt 实时提要

现在我正在开发 instagram（首先），我认为这将是小菜一碟

• 注册为开发人员
• 注册应用
• 获取 appId 和密钥
• 对 instagram 的角度 http API 调用以获取访问令牌（使用应用程序 ID 和密码）
• 对 instagram getFeed?hashtag=xy 的角度 http API 调用（使用访问令牌）...

现在，显然不是这样的……

• 首先，instagram 让我注册应用程序和客户端并重定向 url
• 然后我需要调用 api 来获取 CODE（link ... 使用我的 client_id 和重定向 uri）
• 那么我会去获取 ACCESS TOKEN
• 只有这样我才能进行正常的获取提要 API 调用

好吧，我不介意获取 CODE 的额外步骤……但是……重定向 URL 搞乱了流程……我不知道该怎么办……

在我的 Angular (4 cli) 应用程序中，用户正常工作，它会进入个人资料页面......他将使用选项卡选择一个社交平台并填充提要......现在......我不希望用户从 instagram、twitter、fb 和 yt 被重定向到应用程序......四次......甚至一次......我希望这通过正常的 API 调用在幕后发生

所以如果我在我的 instagram.service.ts 中这样做

getAccessToken() {
  const api = 'https://www.instagram.com/oauth/authorize/';

  const params: HttpParams = new HttpParams()
    .set('client_id', clientId)
    .set('redirect_uri', 'http://localhost:4200/auth/')
    .set('response_type', 'code');

  return this.http.get<any[]>(api, {params})
  .map((response) => response)
  .catch((error: any) => Observable.throw(error.error || 'Server error'));
}

然后调用它，在我的开发者工具中我看到了这个

所以 API 调用成功，但 Angular 应用程序不处理我的身份验证路径...所以它给出 404.... 即使在我的路线中我确实有：

  {path: 'auth', children: [
    {path: ':instagramtoken', component: MatchesLandingPageComponent},
    {path: '**', component: MatchesLandingPageComponent},
  ] },

所以我的问题是，我该怎么处理这个？没有任何重定向？

。 . .

我还在后端使用 LOOPBACK express 服务器（通过 RESTful API 获取数据）....可能是一种方法吗？所以我会得到一个 http://localhost:3000/api/instagram?hashtag=xy??

Answer 1

先说几句：

您不会使用 client_secret，因为您在前端应用程序中使用它。如果你把它放在你的javascript代码中，我就不再是秘密了。因此，在这种情况下，您将使用隐式流。

为此使用库可能很有用。 This is a good one.

我不希望用户从 instagram、twitter、fb 和 yt 被重定向到应用程序......四次......甚至一次......

很抱歉，但你必须这样做。这是提供商知道用户对您的应用进行了自动化的唯一方式。在每次请求之前都不需要这样做，因为您可以将令牌存储在会话存储中。 （图书馆可能会自己为您执行此操作。）这适用于 Instagram，因为它们的令牌不会过期，但对于其他人，这可能不一样。

现在关于 404，它正在重定向到 http://localhost:4200/auth/?code...。这不是正确的网址，您可能希望它是 http://localhost:4200/auth?code=...

所以将.set('redirect_uri', 'http://localhost:4200/auth/') 更改为.set('redirect_uri', 'http://localhost:4200/auth')。