Angular：Instagram 授权 - 访问令牌

Posted 2023-03-31

【中文标题】Angular：Instagram 授权 - 访问令牌

【英文标题】：Angular: Instagram authorization - access token

【发布时间】：2017-09-10 12:42:00

【问题描述】：

所以，我正在构建一个应用程序，它将（除其他外）在特定主题标签上提供 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??

【问题讨论】：

先生，您能告诉我您要遵循哪个教程来实施 instagram 吗？

【参考方案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')。

【讨论】：

我不希望我的用户通过 instagram 进行授权，我希望我的 APP（作为用户）被授权......这就是重点......不是用户正在登录通过我的应用程序登录到 instagram... 或通过 instagram 登录到我的应用程序！我的用户与 Instagram 无关

但看起来我将使用我的环回应用程序在后端解决它 - strongloop.com/strongblog/using-loopback-to-build-apis-for-apis

我了解您希望您的应用程序获得授权。但为了做到这一点，用户需要登录该应用并授予访问权限。

换句话说，在前端是不可能的……好的