React + Eartho 与 3 个简单的步骤集成

如果您已经关注并访问了您的第一个 地球 和 React 经验，那么我相信你会感觉很棒。

它一次为开发人员提供了许多好处。如果你有 地球一号 工具，您无需登录您的帐户并进行身份验证钱包或任何其他一一。拥有一个生态系统，只需一行代码就可以实现所有这些。它有助于保护您的访问者不被跟踪。今天我将引导您完成使用 React 和 Earth 进行的简单易用的一步验证。

简单的 1 步验证 地球

地球 是提供连接所有这些的最佳途径之一。事实上，您也不需要任何帐户或社交网络或其他任何东西。只有在 地球 你能连接到它们中的任何一个吗？您所需要的只是简单的 1 步身份验证 地球 来利用它。

入门

1. 使用 -> 创建一个帐户 地球创造者 **** 它是 100% 免费无限用户。 2. 通过单击“创建您的第一个项目” 添加项目 ”在创作者的主屏幕上。项目可以是网站或应用程序。

3.创建项目后，你会看到“ 添加访问权限 ”在项目页面上。首先创建您希望我们管理的接入点；它可以是“登录”或“高级包”或任何让您的用户/客户访问资源的东西。

4.恭喜您已经创建了您的第一个“访问”。现在您是 Eartho 创作者社区的一员了 前往我们的 不和谐服务器

2.安装SDK并初始化地球一号

使用 npm

 npm 安装[ @eartho/one-client-react](https://twitter.com/eartho/one-client-react)

使用 纱

 纱线添加[ @eartho/one-client-react](https://twitter.com/eartho/one-client-react)

2. 前往 https://creator.eartho.world/ 和

从“设置选项卡”复制您的 eartho 客户端 ID 的值

并在第 3 阶段代码中将其替换为“YOUR_EARTHO_CLIENT_ID”。

3. 通过将您的应用程序包装在 EarthoOneProvider ：

 // src/index.js  
 从“反应”导入反应；  
 从 'react-dom' 导入 ReactDOM；  
 从'导入 { EarthoOneProvider }[ @eartho/one-client-react](https://twitter.com/eartho/one-client-react) ';  
 从'./App'导入应用程序； ReactDOM.render(  
 <EarthoOneProvider  
 clientId="YOUR_EARTHO_CLIENT_ID"  
 >  
 <App />  
 </EarthoOneProvider>,  
 document.getElementById('app')  
 );

3.开始使用

需要示例项目吗？

[

GitHub - eartho-group/one-client-react

一行代码通过任何社交网络、加密钱包和电话身份验证用户身份验证您不需要……

github.com

](https://github.com/eartho-group/one-client-react)

使用 使用地球一号 挂钩您的组件以访问身份验证状态（ 正在加载 , 已连接 和 用户 ) 和身份验证方法 ( connectWithPopup 和 登出 ):

 // src/App.js  
 从“反应”导入反应；  
 从'导入 { useEarthoOne }[ @eartho/one-client-react](https://twitter.com/eartho/one-client-react) '; 函数应用程序（）{  
 常量 {  
 正在加载，  
 已连接，  
 错误，  
 用户，  
 连接弹出窗口，  
 登出，  
 } = useEarthoOne(); 如果（正在加载）{  
 返回<div>正在加载...</div> ;  
 }  
 如果（错误）{  
 返回<div>糟糕... {error.message}</div> ;  
 } 如果（已连接）{  
 返回 （  
 <div>  
 你好 {user.displayName}{' '}  
 <button onClick={() =>注销({ returnTo: window.location.origin })}></button>  
 登出  
 </button>  
 </div>  
 );  
 } 别的 {  
 返回  
 className="btn btn-大纲-成功"  
 id="登录"  
 onClick={() => connectWithPopup({ access_id: "YOUR_EARTHO_ACCESS_ID" })}  
 >  
 登录  
 ;  
 }  
 } 导出默认应用程序；

与类组件一起使用

使用 与地球一号 高阶组件添加 地球一号 类组件的属性：

 从'react'导入反应，{组件}；  
 从'导入 { withEarthoOne }[ @eartho/one-client-react](https://twitter.com/eartho/one-client-react) '; 类配置文件扩展组件{  
 使成为（） {  
 // `this.props.earthoOne` 与 `useEarthoOne` 挂钩具有所有相同的属性  
 常量 { 用户，注销 } = this.props.earthoOne;  
 返回<div>你好{用户名}</div> ;  
 }  
 } 使用EarthoOne（配置文件）导出默认值；

最终观点

使用 React 和 Eartho 进行简单的一步验证是一次访问所有工具的最推荐方式。它使用户登录变得非常容易，并且可以提高整体增长。此外，使用 Eartho 比使用其他平台灵活得多。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/38650/30452211