使用Angular2登录Twitter

时间:2017-04-21 10:07:59

标签: angular twitter angular2-cli twitter-login

我想将twitter登录集成到我的Angular2项目中。我按照https://www.npmjs.com/package/ng2-twitter中提到的步骤,只是将api url更改为“https://api.twitter.com/1.1/users/show.json”而不是“https://api.twitter.com/1.1/statuses/home_timeline.json

在Twitter中我创建了应用程序,我在我的网站中添加了我的IP,如http://192.168.1.130:4200这样的网站,因为这里不允许使用localhost。

通过npm安装:

npm install --save ng2-twitter

App.module中的代码

    import { TwitterService } from 'ng2-twitter';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [TwitterService], // Add
  bootstrap: [AppComponent]
})
export class AppModule { }

App.component中的代码。

  import { Component } from '@angular/core';
import { TwitterService } from 'ng2-twitter';

@Component({
  selector: 'app-root',
  template: `
        <h1>{{title}}</h1>
        <button (click)="getHomeTimeline()">get/home_timeline</button>
        <p>{{result}}</p>
    `
})
export class AppComponent {
  title = 'app works!';
  result = '';
  constructor(private twitter: TwitterService){ }

  getHomeTimeline(){
    this.twitter.get(
      'https://api.twitter.com/1.1/statuses/home_timeline.json',
      {
        count: 5
      },
      {
        consumerKey: 'JEm5KGM9v3VX0hnomnT8zRxxx',
        consumerSecret: 'mqixet7E71059xba2cXfaaczKxGohO8bpDWOTIVoiAMQxxxxx'
      },
      {
        token: '895417873-is0fx44DImojA0IYmeaUHFXop6fcmc2RsnRcxxxx',
        tokenSecret: 'oHzaDRiXt71jGvG7aMYDrFNoAgr1NhRXM7iKsYO8fxxxx'
      }
  ).subscribe((res)=>{
      this.result = res.json().map(tweet => tweet.text);
  });
  }
}

0 个答案:

没有答案