构建生物识别加密钱包(真正可用!)
I’m happy to translate the article for you, but I’ll need the full text of the post. Could you please paste the content you’d like translated (excluding the source link you’ve already provided)? Once I have the article, I’ll translate it into Simplified Chinese while preserving all formatting, markdown, code blocks, and URLs.
“我为什么又这么做?”时刻
于是,我打造了一个移动加密钱包。但它不是普通的钱包——它可以让你通过面部(或指纹)创建钱包,并且在转账时无需支付 gas 费用。听起来很酷,对吧?其实它确实有点酷,但我也得告诉你,它也有点不那么酷。
先说说背景。
几周前,我偶然发现了 Lazorkit。他们提出了一个疯狂的想法:如果不让人们记住 12‑词种子短语(说实话,大多数人只会截图,然后祈祷手机别被偷),而是使用生物识别认证呢?也就是你每天大概要用 50 次的 Face ID 解锁手机的那个东西。
Challenge accepted.
我构建的
App 非常直观:
- 点击 “Create Wallet.”
- 手机会请求 Face ID 或指纹。
- 嘭——你拥有了一个 Solana 钱包。
- 你可以在没有 SOL 作为燃料费的情况下发送 USDC 代币(通过 paymaster 实现的免 gas 交易)。
就是这样。没有助记词。没有“把它写在纸上,藏在床垫里”。只有你的面容。
技术栈
- React Native(使用 Expo SDK 54)
- TypeScript(因为我喜欢在出错之前就知道会出什么错)
- Solana 区块链(Devnet 用于测试)
- Lazorkit SDK(神奇的酱料)
- WebAuthn passkeys(真正的神奇酱料)
“糟糕”时刻(也就是我学到的东西)
1. Polyfills 是你的隐形敌人
React Native 并没有网页浏览器拥有的所有 JavaScript 全局对象。Solana 的 SDK 期望像 Buffer 和 crypto.getRandomValues() 之类的东西直接存在。但它们并不存在。
我花了两个小时调试一个关于随机性的晦涩错误,才意识到需要引入 polyfills——而且必须按确切的顺序在应用的最顶部引入:
// 这个顺序很重要。别问我为什么,我之前就被坑过。
import 'react-native-url-polyfill/auto';
import { Buffer } from 'buffer';
global.Buffer = Buffer;
import 'react-native-get-random-values';
把这些顺序弄错,应用就会炸。真是“好玩”的时光。
2. 模拟器是骗子
在模拟器上无法正确测试生物识别认证。我的意思是,你可以尝试,但这就像通过一张水的照片来测试游泳池一样。iOS 模拟器的“假 Face ID”功能还能凑合用,但要深度链接到 Lazorkit 门户再返回?这时就会出现怪异情况。
小贴士: 拿一部实体设备。用真实硬件测试。相信我,这一点非常重要。
3. WebAuthn 实际上相当酷
没人告诉我的事:WebAuthn 通行证其实就是带有更好用户体验的公钥密码学。创建钱包时:
- 你的手机生成一对密钥。
- 私钥保存在设备的 Secure Enclave 中(和指纹数据存放的地方相同)。
- 公钥发送到 Lazorkit 的门户服务。
- 当需要签名时,手机使用 Face ID 解锁私钥。
这就像拥有硬件钱包,只是你的手机本身就是硬件钱包。震惊。
4. 无 Gas 交易其实并非真正无 Gas
剧情反转:“无 Gas”交易仍然会产生 Gas 费用,只是你不直接支付——由 paymaster(支付方)来付。
工作原理
- 你创建一笔交易(例如,向朋友发送 1 USDC)。
- paymaster 服务查看交易并说:“好的,我来支付 SOL 费用”。
- paymaster 用它的钱包签名交易。
- 你用生物识别钱包签名。
- 交易完成;你实际支付 $0。
陷阱: paymaster 不会为你创建代币账户。如果收款方还没有 USDC 账户,交易会失败。这在测试时把我坑了一把,直到我意识到可以先把 USDC 发给自己。
5. 深度链接是暗黑魔法
要让生物识别认证生效,应用需要:
- 打开 Safari/Chrome。
- 加载 Lazorkit 门户页面。
- 触发 Face ID。
- 重定向回你的应用。
这就需要在 app.json 中进行深度链接配置:
{
"scheme": "lazorkitstarter"
}
我花了三次尝试才把它弄对,因为一直在使用奇怪的字符。保持简单:全小写、无空格、无特殊字符。未来的你会感谢现在的你。
“等等,这真的有效?”的时刻
在与 polyfills、深度链接纠缠不清,并试图弄清楚为什么我的交易一直失败(剧透:我没有测试 USDC)之后,我终于让它跑通了。
我打开应用,点击 “Create Wallet”,看向手机的 Face ID,然后 BAM —— 我拥有了一个 Solana 钱包。
没有助记词。没有摩擦。
这感觉像是科幻小说,但这只是优秀的 API 设计。
教程(因为我喜欢你)
教程 1: 使用生物识别认证创建钱包 (~30 分钟)
- 正确设置 polyfills
- 配置
LazorKitProvider - 在你的应用与门户之间实现深度链接
- 处理生物识别认证回调
教程 2: 无 Gas 的 USDC 交易 (~40 分钟)
- 使用
@solana/web3.js构建 Solana 交易 - 集成 paymaster 实现免 Gas 费用
- 正确管理 blockhash(它们在 60 秒后会过期,可能会毁掉你的交易)
- 错误处理与验证
这适合谁?
如果你符合以下条件,应该构建此项目:
- 你正在学习 React Native 并想要一个真实的项目。
- 你对 Solana 移动开发感兴趣。
- 你想了解 WebAuthn 通行密钥的工作原理。
- 你喜欢无需种子短语的加密钱包的概念。
如果以下情况,请不要构建此项目:
- 你需要生产就绪的代码(这仅是 Devnet,大家注意)。
- 你讨厌 TypeScript。
- 你没有实体设备进行测试。
在实体 iPhone 或 Android 设备上测试
- 你对 polyfill 过敏。(只是轻松的提醒——你需要真实设备来运行应用,而不是使用 polyfill 环境。)
TL;DR
我构建了一个带有 Face ID 身份验证和免 gas 交易的移动加密钱包。它使用 WebAuthn 通行密钥(没有种子短语!),运行在 Solana Devnet 上,且真的能用。我学到了太多关于 polyfills、深度链接以及为什么模拟器不是你的朋友的知识。
如果你正在学习移动开发或区块链相关的东西,试一试吧。即使不这样做,你也会对导入顺序有非常强烈的看法。
已经构建了?卡住了?发现了 bug?联系我——我随时乐意聊聊为什么会出问题。
P.S. 如果你尝试后因为 polyfill 顺序导致应用崩溃,请记住我已经提醒过你了。😅