Question

我正在尝试使用NPI模块https://www.npmjs.com/package/angular2-qrcode为Google身份验证器应用程序生成QR代码，使用uri就是这样的

otpauth://totp/App%3Fsecret=XX47YM3N7JC6EN5B6DHRDNYW2AO74JYK

我正在使用以下标记进行分配

变量QRUrl具有完整的uri，但渲染后生成的qr代码只有最多30个字符的值

<qr-code _ngcontent-c5="" canvas="true" ng-reflect-size="150" ng-reflect-value="otpauth://totp/App%3Fsecret=XX" ng-reflect-canvas="true"><canvas height="150" width="150"></canvas></qr-code>

我已经尝试在将数据绑定到指令时查找模块的代码以获取任何字符串限制，但是找不到可能正在执行此操作的任何错误。只是想知道这是否与角度版本有关。

同样的问题出现在我试过的另一个模块https://github.com/techiediaries/ngx-qrcode

Answer 1

简单的答案：不要对问号进行百分比编码。

otpauth URL应该如下：

otpauth://totp/AppName?secret=...

不是：

otpauth://totp/AppName%3Fsecret=...

这应该是qrcode包要处理的正确输入。

Answer 2

我是评论中提到的https://docs.cloudfoundry.org/cf-cli/http-proxy.html的作者，但我的回答适用于任何QR码库。

QR码的数量有限＆＃39;存储数据，可用空间根据画布的实际大小，校正级别和使用的QR码版本[angularx-qrcode]

缩小

angularx-qrcode lib带有合理的默认值（大小为256 x 256px，纠错级别＆＃39; m＆＃39;）来存储您的数据。 150 x 150px的大小只能容纳约1/3的lib默认值。

要获得更多存储空间，您可以使用以下两个选项增加存储在QR码中的可能数据量：

将画布大小增加到256px并使用CSS将画布调整为150px
降低更正级别

在我们很少遇到丢失或污垢问题的数字环境中，这两种选择都很好。

示例（对于angularx-qrcode）：

<qrcode [qrdata]="myAngularxQrCode" [size]="256" [level]="'L'"></qrcode>

Angular 5中的Google身份验证器QR代码URI问题

2 个答案: