如何在Angular 4中导入oauth-signature npm包并在Angular CLI中使用

我来一步步教你搞定在Angular 4里导入和使用oauth-signature包：

1. 安装npm包 #

首先在你的Angular项目根目录下，打开终端执行安装命令：

npm install oauth-signature --save

2. 处理TypeScript类型声明 #

因为oauth-signature本身没有提供官方的TypeScript类型定义，所以我们需要手动添加模块声明来避免编译报错：

• 如果你的项目里没有src/typings.d.ts文件，就新建一个；
• 在该文件中添加以下代码：

declare module 'oauth-signature';

3. 在组件/服务中导入并使用 #

现在你可以在任意Angular组件或服务里导入这个包，然后调用它的方法生成签名。比如在组件中：

import { Component } from '@angular/core';
import * as oauthSignature from 'oauth-signature';

@Component({
  selector: 'app-oauth-example',
  templateUrl: './oauth-example.component.html'
})
export class OauthExampleComponent {
  constructor() {
    this.generateOAuthSignature();
  }

  generateOAuthSignature(): void {
    const httpMethod = 'GET';
    const url = 'http://photos.example.net/photos';
    const parameters = {
      oauth_consumer_key: 'dpf43f3p2l4k3l03',
      oauth_token: 'nnch734d00sl2jdk',
      oauth_nonce: 'kllo9940pd9333jh',
      oauth_timestamp: '1191242096',
      oauth_signature_method: 'HMAC-SHA1',
      oauth_version: '1.0',
      file: 'vacation.jpg',
      size: 'original'
    };
    const consumerSecret = 'kd94hf93k423kf44';
    const tokenSecret = 'pfkkdhi9sl3r4s00';

    // 生成符合RFC 3986标准的编码签名
    const signature = oauthSignature.generate(httpMethod, url, parameters, consumerSecret, tokenSecret);
    
    console.log('生成的OAuth签名:', signature);
    // 后续你可以把签名添加到请求参数（添加oauth_signature字段）或者Authorization请求头中
  }
}

补充说明 #

• oauth-signature.generate()方法会直接返回编码后的签名字符串，你只需要把它加入到你的OAuth请求参数里，或者按照OAuth规范构造Authorization头即可；
• 如果是在Angular服务中使用HttpClient发送请求，建议把签名生成逻辑封装在服务里，在发起请求前动态生成签名（比如实时生成oauth_nonce和oauth_timestamp）。

内容的提问来源于stack exchange，提问作者Jun Nadela