时间戳

首页 > 解决方案 > 如何在前端离子角度项目中导入缓冲区库以使 node-rsa 工作

node.js - 如何在前端离子角度项目中导入缓冲区库以使 node-rsa 工作

问题描述

我需要用node-rsaAngular 加密 ionic 5 中的 wifi 密码。

我在Stackblitz上有一个正在运行的示例。但是，当我在 angular 10 和 ionic 5 中本地复制它时，它不起作用。

在本地 Angular 项目中，我缺少 nodejs 导入错误，我可以通过使用此处提出的解决方案来避免这些错误


ERROR in ./node_modules/node-rsa/src/schemes/pkcs1.js
Module not found: Error: Can't resolve 'constants' in '/Users/hanche/Documents/Development/playground/angular-node-rsa/node_modules/node-rsa/src/schemes'

ERROR in ./node_modules/node-rsa/src/NodeRSA.js
Module not found: Error: Can't resolve 'crypto' in '/Users/hanche/Documents/Development/playground/angular-node-rsa/node_modules/node-rsa/src'

之后我得到

Uncaught ReferenceError: Buffer is not defined
    at Object.ovSY (pkcs1.js:9)
    at __webpack_require__ (bootstrap:79)
    at Object.mumJ (schemes.js:2)
    at __webpack_require__ (bootstrap:79)
    at Object.T+ye (rsa.js:46)
    at __webpack_require__ (bootstrap:79)
    at Object.WShU (NodeRSA.js:9)
    at __webpack_require__ (bootstrap:79)
    at Module.Sy1n (app.component.ts:1)
    at __webpack_require__ (bootstrap:79)

这是我在生产应用程序中遇到的相同错误。我不明白为什么它在 stackblitz 上运行，而不是在本地开发环境中运行。

我的 package.json 是

{
  "name": "angular-node-rsa",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "browser": {
    "crypto": false,
    "constants": false,
    "fs": false,
    "path": false
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~10.1.6",
    "@angular/common": "~10.1.6",
    "@angular/compiler": "~10.1.6",
    "@angular/core": "~10.1.6",
    "@angular/forms": "~10.1.6",
    "@angular/platform-browser": "~10.1.6",
    "@angular/platform-browser-dynamic": "~10.1.6",
    "@angular/router": "~10.1.6",
    "buffer": "^6.0.2",
    "node-rsa": "^1.1.1",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1001.7",
    "@angular/cli": "~10.1.7",
    "@angular/compiler-cli": "~10.1.6",
    "@types/node": "^12.11.1",
    "@types/jasmine": "~3.5.0",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~5.0.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage-istanbul-reporter": "~3.0.2",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.0.2"
  }
}

我的 tsconfig.json 是

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": ["es2018", "dom","ESNext"],
    "typeRoots": ["node_modules/@types"]
  },
  "angularCompilerOptions": {
    "enableIvy": true,
    "fullTemplateTypeCheck": true,
    "strictInjectionParameters": true
  }
}



import { Component } from '@angular/core';
import { Buffer } from 'buffer';
import NodeRSA from 'node-rsa';

const pubKey =
    '30819F300D06092A864886F70D010101050003818D0030818902818100B2E9AFAFEED76A5C31D069F84328D785DFE6C40A69F51B29C7D7C91EF171A5EF6AD9FC30AF31F4B59C0FE317E47B5DBAA04E3753AC7F8B0E54D8EB4372894900DE247FD11B8C2208FE1C837ADEC409B0F2EE89A5C54B8AB80D5934FC65100406077D129DC5EB961E883B937C4251FDA4BD77224D1CDEF09151894F902758AA3B0203010001000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'angular-node-rsa';
  encrypt() {
        const buff = Buffer.from(pubKey, 'hex');
        const rsa = new NodeRSA(buff.slice(22), 'pkcs1-public-der', {
            encryptionScheme: 'pkcs1',
        });
        console.log(rsa.encrypt('abc', 'hex'));
    }
}

标签： node.jsangularionic-frameworkbrowsernode-rsa

解决方案

已在https://stackoverflow.com/a/59249136/5342949中解决

在 package.json 添加

  "browser": {
    "crypto": false,
    "constants": false,
    "fs": false,
    "path": false
  },

在 pollyfils.ts 添加

(window as any).global = window;
(window as any).global.Buffer = require('buffer').Buffer;
(window as any).process = {};

在 app.tsconfig.json 添加

"types": ["node"]

推荐阅读