Angular：Instagram授权 - 访问令牌

Question

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

现在我正在使用Instagram（首先）认为这将是小菜一碟

• 注册为dev
• 注册应用
• 获得appId和秘密
• 对http进行角度http API调用以获取访问令牌（使用app id和secret）
• angular http API调用instagram getFeed？hashtag = xy（使用访问令牌）...

现在，显然，它不是这样......

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

好吧，我不介意获得CODE的额外步骤....但是......重定向网址正在弄乱流程......我不知道该怎么办......

在我的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调用成功了，但是角度应用程序没有处理我的身份验证路径......所以它给出了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')。