應用開發 —— 從 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();
 });
})
複製代碼

最後，咱們來測試下退出功能。

請打開瀏覽器，刷新頁面，點擊「退出」，稍等片刻後能夠看到頁面彈出了下面這個提示：