应用开发 —— 从 Authing 开始

时间 2019-12-12

标签应用开发 authing 开始繁體版

原文原文链接

应用开发 —— 从 Authing 开始

本文使用 Authing 实现一个基于 Web 的登陆退出应用，同时为了简单起见，本文不使用任何高级前端框架。

开发前准备

学习目标

学会在控制台中建立 Authing 应用
使用 Authing 实现登陆和退出

预备知识

基本的 HTML 和 CSS 知识
中级 JavaScript 技能

所需工具

你喜欢的文本编辑器
能够在本地运行的 Web 服务器（好比：npm install http-server -g）

本文的所有代码能够在 Github 上找到，你也能够点击这里查看线上 DEMO。javascript

第零步：注册 Authing 帐号并建立一个应用

若是你尚未帐号，请点击这里注册 Authing 帐号，注册完成后请建立一个应用：html

点击「+ 建立应用」

填写应用名称，类型选择 Web 类型

建立成功后便可进入应用控制台（空空如也）

若是你有不少独立的系统，那么能够建立多个「用户池」来分割用户，若是你想多个应用共用一个用户池，请学习咱们的单点登陆概念。前端

第一步：配置一个基本的 HTML 页面和 CSS

建立一个空白的 HTML 文档用来编写 Authing 程序：java

<!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。jquery

本教程只是为了演示，所以咱们没选择其余更加高级的框架，这可让咱们专一于 Authing 自己。git

第二步：增长登陆状态 UI 元素

增长一段 HTML 到 HTML 页面中，用处是显示已经登陆用户的用户名和完整用户信息（一段 JSON 字符串），而且又一个「退出」按钮能够用来退出。github

<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 身份认证表单

<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 的使用方法，下面有几个连接可供参考：