如何为你的Dapp集成Web3身份
身份是一个“一个人或一个群体的一系列特征，这些特征代表着人与他人的关系，而在当下人人可交互的互联网中我们身份是一串加密在服务器上的一串用户名、一些用账号和密码组成的身份、电子邮件地址等，这就是当下我们用的Web2身份，但是在当下Web2身份上承载的个人数据用户却没有绝对的主导权，这就是目前Web2身份的特征，而Web3身份核心概念是：让用户在没有任何第三方平台的情况下自由管理自己的个人数据以及数字资产，而Dfinity创世纪时推出的Web3身份验证系统——Internet Identity主要用户为全球所有用户提供Web3身份以及Web3网络体验。本期文章探讨如何在Dapp中集成Internet Identity身份验证系统。
集成Internet Identity身份验证系统流程：
以下流程的入门nmp：
https://www.npmjs.com/package/@dfinity/auth-client
项目示例：
https : //github.com/krpeacock/auth-client-demo
1、首先设置一个简单的whoami后端服务：
// Main.moactor { public shared (msg) func whoami() : async Principal { msg.caller };};这里的actor通过whoami方法将消息的调用者进行响应，这就是如何测试用户是使用Anonmousidentity还是经过身份验证的Internet Identity进行请求的。
2、接下来将设置前端逻辑：以下是完整的脚本
// index.tsimport { Actor, HttpAgent } from "@dfinity/agent";import { AuthClient } from "@dfinity/auth-client";import idlFactory from "./did";import type { _SERVICE } from "./did";import { renderIndex } from "./views";import { renderLoggedIn } from "./views/loggedIn";
const init = async () => { const authClient = await AuthClient.create(); if (await authClient.isAuthenticated()) { handleAuthenticated(authClient); } renderIndex();
const loginButton = document.getElementById( "loginButton" ) as HTMLButtonElement; loginButton.onclick = async () => { await authClient.login({ onSuccess: async () => { handleAuthenticated(authClient); }, }); };};
async function handleAuthenticated(authClient: AuthClient) { const identity = await authClient.getIdentity();
const agent = new HttpAgent({ identity }); console.log(process.env.CANISTER_ID); const whoami_actor = Actor.createActor<_SERVICE>(idlFactory, { agent, canisterId: process.env.CANISTER_ID as string, }); renderLoggedIn(whoami_actor, authClient);}
init();3、以上的前端的核心逻辑解释，先从@dfinity/auth-client开始：
const authClient = await AuthClient.create();如果用户之前已经登录，那么在
creat promise解析时会通过以下方式验证其身份：
if (await authClient.isAuthenticated()) { handleAuthenticated(authClient);}然后我们将一个端口侦听添加到登录按钮，用于调度aythCient login方法：
loginButton.onclick = async () => { await authClient.login({ onSuccess: async () => { handleAuthenticated(authClient); }, });};登录方法会打开一个新窗口，默认指向链接：https://identity.ic0.app。然后Dapp用户可以进行身份验证，一旦他们完成流程，Internet Identity应用程序会向演示应用程序发送一个后续回Demo程序 ：调用成功回调，并关闭Internet Identity。
重要开发说明：
Internet Identity是使用IC链上的根私钥进行签署Principal委托，本流程开发副本使用的是以前版本的DFX所以不能检查来自主网的签名，这需要运行Internet Identity程序的本地实例，并将authClient设置为本地url登录，本地开发如下所示：
await authClient.login({ onSuccess: async () => { handleAuthenticated(authClient); }, identityProvider: "http://localhost:8000?canisterId={identity_canister_id}"});使用身份：
使用Internet Identity登录之后，该authClinet实例现在拥有开始后端发出经过身份验证调用所需的一切，下面是authClient实例传递给handeAuthenticated方法：
async function handleAuthenticated(authClient: AuthClient) { const identity = await authClient.getIdentity();
const agent = new HttpAgent({ identity }); console.log(process.env.CANISTER_ID); const whoami_actor = Actor.createActor<_SERVICE>(idlFactory, { agent, canisterId: process.env.CANISTER_ID as string, }); renderLoggedIn(whoami_actor, authClient);}在authClient上为我们提供了一个身份，我们可以用它来初始化一个认证HttpAgent。
该代理可用于创建actor（注意：<_SERVICE>类型会通过自动生成的whoami界面在TypeScript中提供很不错的类型）。生成的whosmi_actor会准备调用，所以需要渲染了一个测试结构，它调用whoami_actor()并显示结果。
扫码添加深圳社区小助手进群
获取Dfinity第一手资讯