[18] 这里: https://developers.google.com/web/updates/2015/07/add-a-new-custom-device-as-a-preset
假如你想体验这几种场景，可以扫描下面两个二维码，扫码前需要把 ABT 钱包进级到 v2.5（需要进级的可以猛击钱包全球站[5]或钱包中国站[6]）：
如何让 dApp 支持 Webview？为什么要支持 Webview？
<div>
onClose={() => setOpen(false)}
[4] 这里: https://github.com/ArcBlock/forge-js/issues/436
export default function Layout({ title, children }) {
yarn add @arcblock/react-hooks
# OR
setOpen(true);
export default function MyComponent() {
•首先，ABT 钱包的扫码成果可以直接打开网址，假如网址刚巧是 dApp，交互过一次之后就会被钱包记录下来
用钱包直接打开开拓情况的 dApp？
// 检测到在钱包中就自动打开 DID 登录，DID 登录会自动唤起钱包原生界面
import React, { useState, useEffect } from ‘react’;
跟着钱包的迭代，我们在开拓各类小应用的进程中愈觉察到手机操纵系统的安详限制：好比从手机欣赏器调起 ABT 钱包并完成授权操纵之后大概会回调到别的 1 个欣赏器（见这里[3]和这里[4]），这些安详限制所带来的的钱包用户体验问题如鲠在喉，不除不快。
[17] forge-react-starter: https://github.com/ArcBlock/forge-dapp-starters/tree/master/packages/forge-react-starter/templates
# npm install @arcblock/react-hooks -S
用 Chrome 开拓者东西模仿钱包？
集成响应式机关
checkFn={api.get}
const links = [
forge blocklet:use forge-react-starter
接下来我们先容下怎么做才气让你的应用在钱包 Webview 内里的体验更好。
export function Login({ onLogin, loading }) {
yarn add @arcblock/ux
</div>
[19] 这个插件: https://chrome.google.com/webstore/detail/quick-qr-code-generator/afpbjjgbdimpioenaedcjgkaigggcdpp
•最后，任何利用 ArcBlock 技能开拓的 dApp 假如想在钱包内里打开，可以通过钱包支持的 Deep Link 以直接在钱包内打开该应用，以提供最流通的体验
假如你还没有利用过 Forge CLI（ArcBlock 打造的 dApp 开拓的瑞士军刀），请猛击这里[7]。
links.push({ url: getExplorerUrl(env.chainHost, ‘local’), title: ‘Local Chain’ });
[5] 钱包全球站: https://abtwallet.io
[10] forge-react-starter: https://blocklet.arcblockio.cn/starter/forge-react-starter
}
yarn add @arcblock/did-react @arcblock/react-hooks
[13] next.js: https://nextjs.org/
];
setTimeout(() => {
scan: ‘Provide profile to login’,
</div>
{open && (
confirm: ‘Confirm on your ABT Wallet’,
[15] next.js: https://nextjs.org/
return (
{children}
自动调起登录
•ABT Wallet 安卓版: Mozilla/5.0 (Linux; Android 9; MIX 2 Build/PKQ1.190118.001; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/80.0.3987.99 Mobile Safari/537.36 ABTWallet/2.5.0
然后，在 WebApp 的登录页面内里利用 useBrowser Hook 和 DidAuth 组件，更完整的代码可以拜见 forge-react-starter[17]：
{browser.wallet && <p>I am only visible when in ABT Wallet webview</p>}
•其次，ABT 钱包交互过的应用都被会记录下来，下次可以直接在钱包的 Webview 内里打开，让用户的搜索路径更短
{!browser.wallet && <p>I am not visible when in ABT Wallet webview</p>}
success: ‘Login Success’,
钱包支持 DID Auth 协议[2]之后，所有基于 ArcBlock 技能开拓的应用城市以二维码作为进口提倡多种范例的交互，完成应用和用户之间的点对点通信，好比请求用户提供 Profile、请求用户签名转账生意业务、签名交流生意业务等。
Webview 会带来哪些改变？
);
•forge-react-starter[10]，把我们的 Forge SDK 集成到了 create-react-app[11] 而成，很是适合入门
•forge-keystone-starter[14]，把我们的 Forge SDK 集成到了 next.js[15] 和 keystone.js[16] 而成，适合需要处事端渲染和打点靠山的场景
[6] 钱包中国站: https://demo.wallet.arcblockio.cn
<BaseLayout title={title} brand={env.appName} links={links} baseUrl={env.baseUrl}>
今朝宣布的 Javascript Blocklet 前端都是用 React.js[8] 编写，后端利用了 Express.js[9]，你可以按照本身的偏好和实际需求选择如下几个 Blocklet：
•Webview 最大的安详隐患大概存在 JS 注入到原生应用内里的代码，这个在 ABT 钱包内里是不答允和不支持的，原因见下条
<div>
首先，安装依赖：
•forge-next-starter[12]，把我们的 Forge SDK 集成到了 next.js[13] 而成，适合需要处事端渲染的同学
[1] ABT 钱包: https://abtwallet.io
}
<DidAuth
[11] create-react-app: https://github.com/facebook/create-react-app
Layout.propTypes = {
然后，在 WebApp 的机关组件内里利用 Layout 组件：
import BaseLayout from ‘@arcblock/ux/lib/Layout’;
# npm install @arcblock/ux -S
[7] 这里: /handbook/1-introduction/install-forge-cli
•确保你的钱包和电脑在同一个网络内里，否则钱包是无法打开开拓情况的 dApp
title: ‘Login Required’,
[9] Express.js: http://expressjs.com/
假如你不是开拓者，到这里可以封锁这篇文章了。
import useBrowser from ‘@arcblock/react-hooks/lib/useBrowser’;
•在 Chrome 上安装这个插件[19]，一键把当前地点栏的网址转化为二维码
{ url: ‘/profile’, title: ‘Profile’ },
import React from ‘react’;
title: PropTypes.string.isRequired,
首先，安装依赖：
用户打开应用的时候，，假如需要自动登录，可以这么做：
)}
}}
};
}
这种方法适合于建设全新的项目，我们已经更新了所有的 Starter Blocklet，利用这些 Blocklet 建设的应用已经对 ABT 钱包做了很好的适配，好比自动登录、根基的响应式机关等等，而且内置了根基的会话打点、用户打点、付出案例，利用 Blocklet 的步调也很是简朴：
import DidAuth from ‘@arcblock/did-react/lib/Auth’;
碰着问题？
从恒久角度，用户体验抉择了生态的成长，这个问题必需办理掉。做了仔细的接头和调研之后，我们发此刻此刻的情况下支持钱包内的 WebView 是利远大于弊的：
if (browser.wallet) {
checkTimeout={5 * 60 * 1000}
[12] forge-next-starter: https://blocklet.arcblockio.cn/starter/forge-next-starter
首先，安装依赖：
在移动端的样子如下图：
在最初的 ABT 钱包[1]产物设计中，为了钱包内数据的安详，我们直接砍掉了在钱包内里支持 Webview 的想法，让钱包只是个纯粹的 DID 打点东西，究竟 ABT 钱包的用户会在内里存储数字资产，不管是通证照旧 NFT。FAQ
return (
return (
[21] GitHub 客栈: https://github.com/ArcBlock/forge-dapp-starters }
import PropTypes from ‘prop-types’;
•Webview 内里用户触发的和原生钱包的交互（称为 DID-Auth 会话）实际上是应用和钱包之间的点对点通信，有非对称加密技能来保障安详，会话功效直接提到应用后端，也保障了应用的安详
•Webview 已经是较量成熟的技能，经验过屡次注明的安详事件之后，手机操纵系统已经做了许多改造，我们可以站在巨人的肩上
利用 Blocklet
然后，在 WebApp 的页面内里利用 useBrowser Hook：
# OR
const [open, setOpen] = useState(false);
参考这里[18]的教程为你的 Chrome 欣赏器添加几个自界说设备，新设备的 User Agent 字符串可以设定如下：
}, 0);
假如碰着其他问题，请到开拓者社区[20]求助，可能到 GitHub 客栈[21]给我们提 Issue。
import React from ‘react’;
假如你已经有在运行中的应用需要适配 ABT 钱包的 Webview，首先需要思量的是响应式机关，响应式机关能让任何 WebApp 在差异巨细的屏幕尺寸上伸缩自如，我们把内部的响应式机关做了封装，可以按如下步调利用：
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。
