CODEWITHSUNDEEP
javascriptangularinstagram-api
Phong Vu
Phong Vu

Reputation: 2896

Instagram API: how to catch access_token in Angular 2/4/5

My angular 2 project is implementing the Instagram authentication as below:

  1. Register Instagram Client, add sandbox user (as prerequisite)

  2. In signup.html

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

  3. In signup.component.ts

    import { Router, ActivatedRoute } from '@angular/router';

constructor(
        private router: Router,
        private route: ActivatedRoute   
    ) { }

ngOnInit() {

   this.route
            .queryParams
            .subscribe(params => {
                console.log('params: ' + JSON.stringify(params));
                let at = params['#access_token'];
                console.log('access_token: ' + at);
            });

}

signInWithInsta(): void {
        let url =
            'https://api.instagram.com/oauth/authorize/?client_id=' + INSTAGRAM_CLIENT_ID +
            '&redirect_uri=' + encodeURIComponent('https://localhost:4200/index.html#/access_token') +
            '&response_type=token';
        console.log(url);
        window.location.href = url;
    }

Result: the log I received is just empty.

Question: How to catch the access_token from Instagram API.

Any suggestion about implementing Instagram login in Angular 2/4/5 is also appreciated

Upvotes: 1

Views: 2732

Answers (2)

Faizan Saiyed
Faizan Saiyed

Reputation: 852

First, as per the notice by Instagram, the basic user details API will be deprecated in early 2020. So make sure you check out new API for Instagram login here and update your project.

For now, you can use below code to get access_token:

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);
  };
}

Upvotes: 1

Faizan Saiyed
Faizan Saiyed

Reputation: 852

You can get queryParams using const queryParams = this.route.snapshot.queryParams I came across the same situation, and your question was helpful!

Upvotes: 0

Related Questions