Trying to oauth2 with a generic provider using http requests in Ionic2 and typescript

Question

I have been trying to find a useful library to authenticate with a generic provider using oauth2. I am new to Ionic, and coudln't find a library that could help me accomplish this easily. I also see that most of the libraries are limited to mobile devices so I decided to go the hard way and try to write the code myself. I apologize if the code lucks ugly or awfully wrong. I have done some PHP programming a long time ago and I am trying to get back to programming with this.

I first generated a provider page with the command: ionic g provider MakeHttpRequest. Here is a what I wrote so far, just the first step in getting the token.

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';

/*
  Generated class for the MakeHttpRequest provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class MakeHttpRequest {

constructor
(
public http: Http,
private client_name : string,
private client_id : string,
private client_secret : string,
private end_point : string,
private auth_uri : string,
private redirect_uri : string
) {
    console.log('Hello MakeHttpRequest Provider');
    this.client_name = 'Alex';
    this.client_id = 'lalala';
    this.client_secret = 'lalalalala';
    this.end_point = 'http://www.lalaland.com';
    this.auth_uri = 'https://services.lalaland.com/oauth/authorize';
    this.redirect_uri = 'http://localhost/callback';
  }

 public getcode(){
    this.http.get("${this.auth_uri}?client_id=${this.client_id}&redirect_uri=${this.redirect_uri}&response?type=code")
      .map(res => res.json()).subscribe(data => {
    console.log(data);
});

     }


}

then imported the class as follows into home.ts:

import {MakeHttpRequest} from '../../providers/make-http-request';

created the constructor still under home.ts as follows: constructor(public navCtrl: NavController, private platform : Platform, private MakeHttpRequest : MakeHttpRequest)

and created the following function:

public button(){

      this.MakeHttpRequest.getcode()
    }

then added the button function to the home.html page.

But all I get is an error. Can someone tell me if I'm in the right direction or even close. Any help or comments are highly appreciated.

I used to get an error saying the Login function was empty, now I get all sort of errors saying no providers for MakeHttpRequest — cadash
you have to set MakeHttpRequest as provider in your component or NgModule.. — Suraj Rao
So, a few things. Nothing in here is specific to Ionic yet, it's just Angular2. Second... what's your error? We can't help you if we don't know the error. Could be module setup, a component issue, a ton of stuff. Lastly, your big ol' string in the http request should be using ` instead of " if you want to use template literals ${expression} — Joshua Ohana
@ Suraj Rao Thanks! that did the trick and helped me advance a bit — cadash

Suraj Rao Suraj Rao · Accepted Answer · 2016-12-29T06:25:40

Can't resolve all parameters for MakeHttpRequest: (Http, ?, ?, ?, ?, ?, ?)

For this issue, You need to go through angular dependency injection

Since MakeHttpRequest provider is created through DI, all the parameters of the constructor are set by DI. It is able to locate http but cannot set the primitive types. You will have to remove the string parameters and set in getCode()

Trying to oauth2 with a generic provider using http requests in Ionic2 and typescript

1 Answers