Javascript Instagram API：如何在Angular 2/4/5中捕获访问令牌

我的angular 2项目正在实施Instagram身份验证，如下所示：

注册Instagram客户端，添加沙盒用户（作为先决条件）

在signup.html中

<button type="button" class="btn btn-round"(click)="signInWithInsta()"><i class="fa fa-instagram"> Instagram </i> </button>

结果: 我收到的日志是空的

问题：如何从Instagram API捕获访问令牌

---

对于在Angular 2/4/5中实施Instagram登录的任何建议，我们也非常感谢

您可以使用

const queryParams=this.route.snapshot.queryParams

---

我遇到了同样的情况，你的问题很有帮助

首先，根据通知，基本用户详细信息API将在2020年初被弃用。因此，请确保您查看Instagram登录的新API并更新您的项目

目前，您可以使用以下代码获取访问令牌：

this.activeRoute.queryParams.subscribe(params => {
  // if instagram code exist on url parameters, then it's user logged in using instagram
  if (params.code) {
    this.authService
      .instagramGetUserDetails(params.code)
      .subscribe(() => {
        // clear the code param from URL
        this.router.navigate([], {
          queryParams: { code: null },
          queryParamsHandling: 'merge'
        });
      });
  } else if (params.error) {
    // if error returned by instagram
  }
});

// get Instagram user details and token
instagramGetUserDetails(code) {
  try {
    const body = new HttpParams()
      .set('client_id', environment.instagram_client_id)
      .set('client_secret', environment.instagram_client_secret)
      .set('grant_type', 'authorization_code')
      .set('redirect_uri', environment.instagram_redirect_uri)
      .set('code', code)
      .set('auth', 'no-auth');

    return this.http
      .post(environment.instagram_get_token_uri, body.toString(), {
        headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
      })
      .pipe(
        tap(res => {
          // ----------->>>>>>   you get the token here   <<<<<---------------
          console.log(res.access_token)
        }),
        catchError(this.handleError<any>('instagram_auth'))
      );
  } catch (err) {
    return err;
  }
}

// Handle error
private handleError<T>(operation = 'operation', result?: T) {
  return (error: any): Observable<T> => {
    // TODO: send the error to remote logging infrastructure
    console.error(error); // log to console instead

    // TODO: better job of transforming error for user consumption
    console.log(`${operation} failed: ${error.message}`);

    // Let the app keep running by returning an empty result.
    return of(result as T);
  };
}

this.activeRoute.queryParams.subscribe（params=>{
//如果url参数中存在instagram代码，则表示用户使用instagram登录
if（参数代码）{
这是authService
.instagramGetUserDetails（参数代码）
.订阅（（）=>{
//从URL中清除代码参数
此.router.navigate（[]{
查询参数：{code:null}，
查询参数：“合并”
});
});
}else if（参数错误）{
//instagram返回的if错误
}
});
//获取Instagram用户详细信息和令牌
instagramGetUserDetails（代码）{
试一试{
const body=新的HttpParams（）
.set（'client\u id'，environment.instagram\u client\u id）
.set（'client\u secret'，environment.instagram\u client\u secret）
.set（'授权类型'、'授权代码'）
.set（'redirect\u uri'，environment.instagram\u redirect\u uri）
.set（'代码'，代码）
.set（'auth'，'no auth'）；
返回此文件。http
.post（environment.instagram\u get\u token\u uri，body.toString（）{
headers:new-HttpHeaders（）.set（'Content-Type'，'application/x-www-form-urlencoded'）
})
.烟斗(
轻触（res=>{
//------------->>>>>>>您可以在这里获得令牌
this.activeRoute.queryParams.subscribe(params => {
  // if instagram code exist on url parameters, then it's user logged in using instagram
  if (params.code) {
    this.authService
      .instagramGetUserDetails(params.code)
      .subscribe(() => {
        // clear the code param from URL
        this.router.navigate([], {
          queryParams: { code: null },
          queryParamsHandling: 'merge'
        });
      });
  } else if (params.error) {
    // if error returned by instagram
  }
});

// get Instagram user details and token
instagramGetUserDetails(code) {
  try {
    const body = new HttpParams()
      .set('client_id', environment.instagram_client_id)
      .set('client_secret', environment.instagram_client_secret)
      .set('grant_type', 'authorization_code')
      .set('redirect_uri', environment.instagram_redirect_uri)
      .set('code', code)
      .set('auth', 'no-auth');

    return this.http
      .post(environment.instagram_get_token_uri, body.toString(), {
        headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
      })
      .pipe(
        tap(res => {
          // ----------->>>>>>   you get the token here   <<<<<---------------
          console.log(res.access_token)
        }),
        catchError(this.handleError<any>('instagram_auth'))
      );
  } catch (err) {
    return err;
  }
}

// Handle error
private handleError<T>(operation = 'operation', result?: T) {
  return (error: any): Observable<T> => {
    // TODO: send the error to remote logging infrastructure
    console.error(error); // log to console instead

    // TODO: better job of transforming error for user consumption
    console.log(`${operation} failed: ${error.message}`);

    // Let the app keep running by returning an empty result.
    return of(result as T);
  };
}