尝试使用 Ionic2 和打字稿中的 http 请求与通用提供程序进行 oauth2

Posted 2023-03-13

【中文标题】尝试使用 Ionic2 和打字稿中的 http 请求与通用提供程序进行 oauth2

【英文标题】：Trying to oauth2 with a generic provider using http requests in Ionic2 and typescript

【发布时间】：2017-05-13 09:50:49

【问题描述】：

我一直在尝试寻找一个有用的库来使用 oauth2 向通用提供程序进行身份验证。我是 Ionic 的新手，找不到可以帮助我轻松完成此任务的库。我还看到大多数库仅限于移动设备，所以我决定努力尝试自己编写代码。如果代码运气不好或非常错误，我深表歉意。我很久以前做过一些 php 编程，现在我正试图用这个来编程。

我首先使用以下命令生成了一个提供程序页面：ionic g provider MakeHttpRequest。 这是我到目前为止写的，只是获取令牌的第一步。

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

     

然后将如下类导入home.ts：

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

仍然在 home.ts 下创建了构造函数，如下所示： 构造函数（公共 navCtrl：NavController，私有平台：平台，私有 MakeHttpRequest：MakeHttpRequest）

并创建了以下函数：

public button()

      this.MakeHttpRequest.getcode()
    

然后将按钮功能添加到home.html页面。

但我得到的只是一个错误。有人可以告诉我我的方向是否正确甚至接近。非常感谢任何帮助或 cmets。

【问题讨论】：

我曾经收到一个错误，说登录功能是空的，现在我收到各种各样的错误，说没有 MakeHttpRequest 的提供者

你必须在你的组件或 NgModule 中将 MakeHttpRequest 设置为提供者..

所以，有几件事。这里没有什么是特定于 Ionic 的，它只是 Angular2。第二......你的错误是什么？如果我们不知道错误，我们将无法帮助您。可能是模块设置，组件问题，一大堆东西。最后，如果您想使用模板文字 $expression

，http 请求中的大 ol' 字符串应该使用 ` 而不是 "

@Suraj Rao 谢谢！这成功了，帮助我进步了一点

您遇到了什么错误？在问题中指定

【参考方案1】：

无法解析 MakeHttpRequest 的所有参数：(Http, ?, ?, ?, ?, ?, ?)

对于这个问题， 你需要通过angular dependency injection

由于 MakeHttpRequest 提供者是通过 DI 创建的，因此构造函数的所有参数都由 DI 设置。它能够定位 http 但不能设置原始类型。您必须删除字符串参数并在getCode()中设置

【讨论】：

感谢大家的帮助！我会研究它，我已经尝试在 getCode() 函数中设置变量，明天将研究依赖注入。现在是凌晨 3.35，我很累，我想我已经老了。再次感谢！

谢谢，我决定从头开始，你的信息帮助我让它工作。