快速开始
wangqi
2024-09-29 02:56
· edited
集成 DID Connect 最简单的方式是先创建 Blocklet。 如果你还不清楚如何创建 Blocklet，请参考：Create Blocklet 文档
前置条件#
- 已经安装并且配置好 DID Wallet，并且手机和电脑连接到相同的局域网
- 已经创建好使用 React 模板的 Blocklet，下面的文档用的是
@arcblock/did-connect，并已经将 Blocklet 运行起来
安装依赖#
npm install @/arcblock/did-connect
# yanr add @arcblock/did-connect
# pnpm i @arcblock/did-connect项目准备#
以下代码以请求用户个人信息为例
在项目的服务端代码中，添加一个 lib/auth.js 文件：
const path = require('path');
const WalletAuthenticator = require('@blocklet/sdk/lib/wallet-authenticator');
const WalletHandler = require('@blocklet/sdk/lib/wallet-handler');
const authenticator = new WalletAuthenticator();
const handlers = new WalletHandler({
authenticator,
});
module.exports = {
handlers,
};
接着添加对应的 auth-handler 文件：
const omit = require('lodash/omit');
const action = 'request-profile';
module.exports = {
action,
onConnect() {
return {
profile: () => ({
description: 'Please provide your full profile',
fields: ['fullName', 'email', 'phone', 'signature', 'avatar', 'birthday'],
}),
};
},
onAuth: ({ userDid, userPk, claims, updateSession }) => {
const claim = claims.find((x) => x.type === 'profile');
updateSession({
result: {
...omit(claim, ['type', 'signature']),
did: userDid,
pk: userPk,
},
});
},
};
然后还需要在服务端代码的入口文件中注册该 auth-handler：
const express = require('express');
const app = express();
const { handlers } = require('./libs/auth');
handlers.attach({ app, ...require('./routes/auth/request-profile') });
const port = parseInt(process.env.BLOCKLET_PORT, 10);
app.listen(port, (err) => {
if (err) throw err;
logger.info(`> ${name} v${version} ready on ${port}`);
});
至此，服务端已具备请求用户个人信息的 DID Connect 响应能力，接下来我们需要去构建前端部分的 DID Connect 代码。
在 React 项目的入口文件（通常是 src/app.js）中增加 ThemeProvider：
import { ThemeProvider } from '@did-connect/react';
export default function WrappedApp() {
return (
<ThemeProvider>
<App />
</ThemeProvider>
);
}
连接钱包#
在应用中添加如下组件，然后将组建挂在到某个页面：
import { useState } from 'react';
import useConnect from '@arcblock/did-connect/lib/Connect/use-connect';
function RequestProfileConnect() {
const { connectApi, connectHolder } = useConnect();
const [connectedUser, setConnectedUser] = useState({});
const openConnect = () => {
connectApi.open({
action: 'request-profile',
locale: 'en',
onSuccess({ result }) {
setConnectedUser(result);
},
messages: {
title: 'Request user profile',
scan: 'Please provide your name and email to continue'
},
});
}
return (
<header className="app-header">
{!connectedUser && (
<Button type="button" variant="contained" size="large" onClick={openConnect}>
Continue With
</Button>
)}
{connectedUser && (
<div style={{ textAlign: 'left' }}>
Connected: <pre>{JSON.stringify(connectedUser, null, 2)}</pre>
<button type="button" onClick={openConnect}>
Switch User
</button>
</div>
)}
{connectHolder}
</header>
);
}
export default RequestProfileConnect;
这个组件的作用是：用户连接钱包之后，把用户信息存储在 connectedUser 中，并在页面中展示出来。
代码中关键的部分：
connectApi.open({
action: 'request-profile',
locale: 'en',
onSuccess({ result }) {
setConnectedUser(result);
},
messages: {
title: 'Request user profile',
scan: 'Please provide your name and email to continue'
},
});
- messages：会话过程中用户看到的文案
- action: 与服务端代码对应的动作名称
- locale：当前会话展示的语言
- onSuccess：当前会话成功后的回调
完整的例子请查看：
Sticker