## 介绍之前实现 WhereIN 微信小程序的登录功能时，出于用户秘钥安全的考虑，希望可以通过授权而不是存储 posting key 的方式来实现用户对 Steem blockchain 的操作。但由于 [steemconnect](https://steemconnect.com/) 使用的 api.steemit.com 节点在国内不能使用，所以不得不对 steemconnect 做了一些简单的更改，实现了一个国内版，并加上了一些对小程序的支持，在这里做一些简单的分享。所作的修改主要是两点： 1. 修改 api.steemit.com 节点为其他国内可用的节点，例如 anyx.io 2. 支持微信小程序登录：登录完成时，向小程序返回登录成功或失败的信息，以便小程序继续完成登录 fork 的 steemconnect 的项目代码在：https://github.com/steem-driver/steemconnect ，以MIT协议开源，如有需要可以进一步修改。 v0.1.3 的 release note 也可以看这里：https://github.com/steem-driver/steemconnect/releases/tag/v0.1.3 根据上面的修改，我们部署了一些国内可用的 steemconnect 版本： 1. https://steemconnect.netlify.com/ 部署在 Netlify 静态网站服务，国内访问速度较慢 2. https://steemconnect.cocozl.cn/ 部署在 @iguazi123 瓜子的服务器，国内访问速度较快大家也可以根据需要使用。 ![image.png](https://files.steempeak.com/file/steempeak/robertyan/w9BGaVpu-image.png) ^{screenshot from https://steemconnect.netlify.com} 下面简要介绍一些修改的经过。 ### 1. 修改默认的 API 节点这一步是最重要的，但也是最简单的。在 steemconnect 项目中搜索 api.steemit.com，然后修改成希望使用的节点即可。具体可以参见这个[commit](https://github.com/steem-driver/steemconnect/commit/c43f9637da7609eb200ff2d78cba38616c146c4a) ![image.png](https://files.steempeak.com/file/steempeak/robertyan/frYRnXlh-image.png) ^{screenshot from [this commit](https://github.com/steem-driver/steemconnect/commit/c43f9637da7609eb200ff2d78cba38616c146c4a)} ### 2. 添加 Netlify 部署支持完成上面的改动后，我一开始使用 [gh-pages](https://www.npmjs.com/package/gh-pages) 将 steemconnect 直接部署到 GitHub pages (https://steemconnect.tribes.rocks/)，但访问一些路径就会失败，比如：https://steemconnect.tribes.rocks/settings 返回 404 。这是由于 GitHub pages 不支持伪静态的路径。 ![image.png](https://files.steempeak.com/file/steempeak/robertyan/jtGDYwIk-image.png) ^{screenshot from https://steemconnect.tribes.rocks/settings} 因此，根据 [Vue CLI](https://cli.vuejs.org/guide/deployment.html#netlify) 里的建议我们将 steemconnect 重新部署到了 Netlify。只需要添加一个 `_redirects` 文件即可。 ```txt # Netlify settings for single-page application /* /index.html 200 ``` 然后，在 Netlify 里，访问 https://steemconnect.netlify.com/settings 路径是成功的： ![image.png](https://files.steempeak.com/file/steempeak/robertyan/KkWyr7CQ-image.png) ^{screenshot from https://steemconnect.netlify.com/settings} 就此，我们已经可以用 https://steemconnect.netlify.com/ 来更方便的支持国内的用户了。 ### 3. 添加微信小程序通讯不过，我们的初始目的是为了在微信小程序里可以登录和授权，只部署一个国内版是还不够的。为此，我们需要在 steemconnect 中判断此时是在微信小程序的 webview 中运行，并且在登录完成后，将登录的Steem用户名等信息返回给小程序。判断是否在微信小程序的webview中： src/helpers/utils.js ```js export function isWeixinMiniProgram() { const ua = window.navigator.userAgent.toLowerCase(); return new Promise(resolve => { if (ua.indexOf('micromessenger') === -1) { resolve(false); } else { wx.miniProgram.getEnv(res => { if (res.miniprogram) { resolve(true); } else { resolve(false); } }); } }); } ``` 成功时，发送Steem用户名等信息（而不是使用默认的通过 redirect_uri 重定向的方法）： src/views/LoginRequest.vue ```js if (isWeixin) { weixinNavigateBack(); weixinSendMessage({ context: 'login', ok: true, err: null, username: this.username, token, expired_in: 604800, }); } else { // ... } ``` 此后，我们在微信小程序的 web-view 里使用 steemconnect 登录成功时，就会成功获得用户、access_token 等信息用户进一步的处理。另外，由于以上代码中会判断所处的环境，针对小程序所作的修改，并不会影响非小程序环境的 steemconnect 的使用，所以需要对 web 应用进行登录的情况，也可以使用这个版本。 ### 4. 本地部署，提高访问速度现在，我们基本可以使用修改后的 steemconnect 进行微信小程序登录了（当然，小程序本身还需要做很多修改）。但实际部署后，我们发现 https://steemconnect.netlify.com 速度还是太慢了，登录页面完整加载经常需要 60 ~ 100s 的时间。于是，我们将 steemconnect 部署到了 https://cocozl.cn 的国内服务器，地址为：https://steemconnect.cocozl.cn/ ，访问速度有了明显的提高，大概 5s 左右可以加载完成，至少在用户还可以忍受的范围内了。就此 WhereIN 小程序或其他小程序，都可以加入 Steem 的登录方式了。当然，之后 WhereIN 小程序会进一步优化，新用户可能只需要使用微信登录就可以了，这是后话。在与 @iguazi123 瓜子讨论后，同意把 https://steemconnect.cocozl.cn/ 服务也开放给更多人使用，希望对其他面向国内用户的应用部署会有帮助。感谢瓜子和 WhereIN。如果对于基于 Steem 的小程序的开发有兴趣，也欢迎加入我们一起来玩耍。 ## 下一个版本 v0.1.3 版本还存在一些问题，大多数是 steemconnect 自身的问题：比如不支持中文，steemconnect 的UI流程冗余难用，API node 修改不便等。为此，在下一个版本 steemconnect 国内版 v0.1.4 中，我们计划进行如下改进： 1. 简化 steemconnect 登录和授权的流程 2. 增强节点配置的灵活性和可控性 3. 加强 steemconnect 的多语言支持（中文） ## 其他最后，其实之前村长 @ericet 也部署了一个旧版的 steemconnect http://steemconnectcn.herokuapp.com/ ，我之前研究时忘了这回事。。。而且 heroku app 的启动时间和访问速度可能也存在一些挑战，所以最后还是基于最新版的 steemconnect 修改了。大家需要使用旧版时也可以尝试用这个版本测试。