内容简介：本文使用 Authing 实现一个基于 Web 的登录退出应用，同时为了简单起见，本文不使用任何高级前端框架。本文的全部代码可以在如果你还没有账号，请
应用开发 —— 从 Authing 开始
本文使用 Authing 实现一个基于 Web 的登录退出应用，同时为了简单起见，本文不使用任何高级前端框架。
开发前准备
学习目标
- 学会在控制台中创建 Authing 应用
- 使用 Authing 实现登录和退出
预备知识
- 基本的 HTML 和 CSS 知识
- 中级 JavaScript 技能
所需工具
npm install http-server -g
本文的全部代码可以在 Github 上找到，你也可以 点击这里查看线上 DEMO 。
第零步：注册 Authing 账号并创建一个应用
如果你还没有账号，请 点击这里注册 Authing 账号 ，注册完成后请创建一个应用：
点击「+ 创建应用」
填写应用名称，类型选择 Web 类型
创建成功后即可进入应用控制台（空空如也）
如果你有很多独立的系统，那么可以创建多个「用户池」来分割用户，如果你想多个应用共用一个用户池，请学习我们的单点登录概念。
第一步：配置一个基本的 HTML 页面和 CSS
创建一个空白的 HTML 文档用来编写 Authing 程序：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Authing Hello World</title>
<style>
.btn {
background-color: #45bbee;
border: none;
border-radius: 4px;
padding: 5px 10px;
color: #fff;
}
.btn:hover {
background-color: #45aaff;
cursor: pointer;
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
<script>
// Custom Codes
</script>
</body>
</html>
复制代码
示例中使用了 jQuery。
本教程只是为了演示，因此我们没选择其他更加高级的框架，这可以让我们专注于 Authing 本身。
第二步：增加登录状态 UI 元素
增加一段 HTML 到 HTML 页面中，用处是显示已经登录用户的用户名和完整用户信息（一段 JSON 字符串），并且又一个「退出」按钮可以用来退出。
<div id="logout" style="display: none">
你已登录，用户名为：<span id="user"></span>。
<div>
完整用户信息：
<code id="userInfo"></code>
</div>
<button class="btn" id="logout-btn" style="margin-top:11px">退出</button>
</div>
复制代码
第三步：增加 Authing 身份认证表单
Login-Form 库可以帮助我们快速生成用来验证用户身份的表单，你只需要添加此库的 CDN 就可以使用：
<script src="https://cdn.authing.cn/sdk/javascript/authing-login-form-1.7.1.js"></script> 复制代码
将脚本文件放到入口脚本之前即可。
使用该库可以生成一个登录表单，其样式如下图所示：
登录表单
调用方法非常简单，代码如下所示：
const form = new AuthingForm({
// 必填，client ID
clientId: 'your_client_id',
// 必填，timestamp
timestamp: Math.round(new Date() / 1000),
// 必填，nonce
nonce: Math.ceil(Math.random() * Math.pow(10, 6)),
});
复制代码
所需参数解释如下：
- clientId
- 应用 ID，可从Authing 控制台 中 获取 。
- timestamp
- 当前时间戳
Math.round(new Date() / 1000) - nonce
- 一个随机数字，不要超过十位数
clientId 参数获取方式如下：
你可以点击这里访问 DEMO 网站。
第四步：监听登录成功事件并显示用户名
在 Login-Form 中，开发者可以使用 .on 方法监听登录成功的事件， 完整的事件列表请参考这里 。
登录成功的事件名称为「login」：
const form = new AuthingForm({
// 必填，client ID
clientId: 'your_client_id',
// 必填，timestamp
timestamp: Math.round(new Date() / 1000),
// 必填，nonce
nonce: Math.ceil(Math.random() * Math.pow(10, 6)),
title: '第一个应用' // 设置登录表单标题
});
form.on('login', function(user) {
// 成功登录后的回调事件，参数 user 为用户数据
localStorage.setItem('userInfo', JSON.stringify(user)); // 存储用户 id 到 localStorage 中
localStorage.setItem('userId', user._id); // 存储用户 id 到 localStorage 中
localStorage.setItem('username', user.username); // 存储用户 username 到 localStorage 中
localStorage.setItem('token', user.token); // 存储用户的 JWT Token 到 localStorage 中
form.hide(); // 为了简单起见，这里在登录成功后直接隐藏表单，在 React 或 Vue 应用中，你可以执行路由跳转或其他业务
showLoginStatus(); // 改变 UI 状态，显示用户名和完整的用户 JSON 信息
});
const showLoginStatus = () => {
$('#logout').show(); // 显示退出按钮
$('#user').html(localStorage.getItem('username')); // 显示用户名
$('#userInfo').html(localStorage.getItem('userInfo')); // 显示完整的用户信息
}
复制代码
登录成功的回调事件中会返回登录用户的 userInfo，其中有 JWT Token，点击此处 查看 JWT Token 的释义、使用及验证 。
第五步：调试登录/注册功能
到第四步为止，恭喜你已经完成了登录和注册功能，现在让我们运行程序体验一下。
调试 Authing 程序需要启动一个 Web 服务器，推荐 http-server，如果你还未安装 http-server，那么请使用下面的命令进行安装：
$ npm install http-server -g 复制代码
安装完成后请进入项目根目录然后执行以下命令：
$ http-server 复制代码
如果你看到下列输出（端口可能不同），那么代表已经启动成功：
Starting up http-server, serving ./ Available on: http://127.0.0.1:8080 http://192.168.0.103:8080 Hit CTRL-C to stop the server 复制代码
现在让我们用浏览器打开 http://127.0.0.1:8080 ，应该可以看到如下界面：
此时，请先点击「注册」按钮注册一个账户：
注册成功后点击「登录」便可以登录
登录完成后可以看到如下信息：
登录后能看到此界面表明已经调试成功了。
第六步：为退出按钮增加事件
到上一步，我们完成了登录功能并体验了流程，下面，我们还需要支持退出功能：
退出功能需要用到 authing 对象的 logout 方法，authing 对象需要在 authingLoad 事件中获取，代码如下：
form.on('authingLoad', async function(authing) {
// Authing 实例加载成功后的回调函数，参数 authing 为 authing 对象
// 使用 checkLoginStatus 方法判断当前的登录状态，需要使用 await
// 如已经登录则隐藏登录框并显示当前的用户信息
// 这段代码的作用是用户如果已经登录，那么刷新后还可以看到自己的用户信息
const result = await authing.checkLoginStatus();
if (result.status) {
// 隐藏登录框
form.hide();
// 显示用户基础信息
showLoginStatus();
}
// 使用 jQuery 监听退出按钮的点击事件
$('#logout-btn').click(async function() {
// 使用 logout 方法，并传入用户的 userId 进行退出
await authing.logout(localStorage.getItem('userId'));
alert('退出成功');
// 刷新页面，此时可以重新看到登录框
location.reload();
});
})
复制代码
最后，我们来测试下退出功能。
请打开浏览器，刷新页面，点击「退出」，稍等片刻后可以看到页面弹出了下面这个提示：
点击弹出对话框的「OK」或「确认」按钮后可以看到页面重新启用了登录框：
若你需要在后端验证 JWT Token 的合法性请点击这里查看。
如果你还不理解什么是 JWT Token 请查看这篇文章。
恭喜你，到此为止，你已经学会了如何使用 Authing 开发第一个应用。
本文的全部代码可以在 Github 上找到，你也可以 点击这里查看线上 DEMO 。
若你想要了解更多 Login-Form 的使用方法，下面有几个链接可供参考：
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Web容量规划的艺术
阿尔斯帕瓦 / 叶飞、罗江华 / 机械工业出版社 / 2010-1 / 29.00元
《Web容量规划的艺术》由John Allspaw(F订ickr的工程运营经理)撰写，结合了他个人在F1ickr成长过程中的许多经历和很多其他产业中同行的洞察力。在衡量增长、预测趋势、成本效益等方面，他们的经验都会给你一些可靠并有效的指导。 网站的成功是以使用和增长来衡量的，而且网站类公司的成败(生死)是依赖于他们是否有能力来衡量决定他们的基础结构，从而适应不断增长的需求。作者通过自身实践给......一起来看看 《Web容量规划的艺术》 这本书的介绍吧!
