Authing 社區(qū)好文推薦:如何 15 分鐘開發(fā)一個(gè)很棒的登錄系統(tǒng)
據(jù) Stripe 的一項(xiàng)全球研究,開發(fā)人員每周近 75% 的時(shí)間花在維護(hù)任務(wù)上。低代碼開發(fā)有助于解決組織數(shù)字化轉(zhuǎn)型的許多常見挑戰(zhàn):比如提高開發(fā)的敏捷性,更快地推出項(xiàng)目抓住商機(jī),更輕松地替換或升級(jí)舊系統(tǒng)的關(guān)鍵組件,極高的擴(kuò)展性等。
到 2025 年將有 60% 的 CIO 使用低代碼工具,超過 65% 的應(yīng)用程序開發(fā)將在低代碼環(huán)境中進(jìn)行。
本文由“壹伴編輯器”提供技術(shù)支Authing 的低代碼方式,可以幫助開發(fā)者在幾分鐘內(nèi)實(shí)施身份認(rèn)證。
如果您正希望解決身份管理的問題,Authing 已經(jīng)被驗(yàn)證提供了一個(gè)很棒的方法。以下三種方式,幫助您實(shí)現(xiàn)出色的登錄認(rèn)證:
No Code
使用 Authing 托管登錄頁,無需一行代碼,您可以在幾分鐘內(nèi)將為您的用戶定制登錄體驗(yàn),配置注冊頁面,自定義配置手機(jī)/密碼/掃碼以及多種社會(huì)化登錄方式、自定義密碼強(qiáng)度配置、主題色配置、注冊信息配置、多因素身份驗(yàn)證等……
示例:在應(yīng)用配置中修改登錄注冊方式
示例:在自定義密碼強(qiáng)度中配置密碼強(qiáng)度
Low Code
使用 Authing 提供的內(nèi)嵌登錄組件,可以集成到您的 Web 和移動(dòng)端項(xiàng)目中,可以支持完整的 UI 自定義功能,所有資源打包起來只有幾百 kb。
內(nèi)嵌登錄組件由 Authing 構(gòu)建和更新,使用行業(yè)最佳實(shí)踐安全性設(shè)計(jì),幾行 JavaScript 代碼就可以集成到您開發(fā)的項(xiàng)目中。它可以直接從 CDN 或 NPM 加載,也可以從源代碼構(gòu)建。Authing 登錄組件同時(shí)提供 Javascript 原生、React、Vue 和 Angular 等多種集成模式。
您無需設(shè)置完整的開發(fā)環(huán)境,無需從頭開始編寫代碼,通過運(yùn)行在云端的 JavaScript 代碼,可以讓您擴(kuò)展、自定義 Authing 能力;還有大量豐富的函數(shù)模板,幫助您快速上手;自定義數(shù)據(jù)庫,使用自己的數(shù)據(jù)庫保存用戶數(shù)據(jù);自定義處理用戶注冊、登錄等行為監(jiān)測……
示例:Authing Guard 自動(dòng)從服務(wù)器拉取配置
示例:自動(dòng)開啟多因素認(rèn)證
Pro Code
您可以隨需調(diào)用 Authing 提供的 1000+ API 以及十余種語言和框架的 SDK 資源,基于此靈活地組合出適合的認(rèn)證流程和自定義 UI 頁面,快速集成預(yù)設(shè)的各種主流應(yīng)用系統(tǒng),為您的內(nèi)部/外部用戶實(shí)現(xiàn)統(tǒng)一身份管理,創(chuàng)造安全無縫的登錄體驗(yàn)……
Authing 為前端開發(fā)者提供輕量級(jí)、開發(fā)者友好的 Auth SDK(支持 JavaScript/Node、Java、Python、PHP、C# 等語言),能夠讓您更靈活、快捷、安全地實(shí)現(xiàn)認(rèn)證邏輯。
Authing 提供的托管登錄頁、嵌入登錄組件、Auth SDK 底層能力都是通過 Authentication API 提供的。Authing Authentication API 支持兩種調(diào)用方式:RESTful 和 GraphQL(端點(diǎn)為 https://core.authing.cn/graphql/v2),您也可以直接調(diào)用 Authentication API 實(shí)現(xiàn)認(rèn)證邏輯。
以五分鐘接入微信網(wǎng)頁授權(quán)登錄為例 體驗(yàn)入口:
https://www.authing.cn/developer/
1. 開發(fā)準(zhǔn)備
在微信公眾平臺(tái)后臺(tái) 開發(fā) -> 基本配置 獲取開發(fā)者 ID (AppID) 和開發(fā)者密碼(AppSecret)。
在微信公眾平臺(tái)后臺(tái) 設(shè)置 -> 公眾號(hào)設(shè)置 -> 功能設(shè)置 設(shè)置網(wǎng)頁授權(quán)域名。
域名填寫:core.authing.cn。
出于安全驗(yàn)證考慮,微信服務(wù)器需要和 Authing 服務(wù)器做一次請求驗(yàn)證,開發(fā)者需要下載 txt 文件,并記錄文件名和文本內(nèi)容。
最后,在 Authing 控制臺(tái) 連接身份源 -> 社會(huì)化登錄 開啟微信網(wǎng)頁授權(quán)登錄,并填寫配置信息。
示例:配置信息表單
2. 安裝
使用 CDN 引入 authing-wxmp-sdk
- <script src="https://cdn.jsdelivr.net/npm/@authing/wxmp/dist/authing-wxmp-sdk.min.js"></script>
使用 npm / yarn
- npm install --save @authing/wxmp
或者
- yarn add @authing/wxmp
然后通過以下方式引入
- import AuthingWxmp from "@authing/wxmp";
3. 發(fā)起微信授權(quán)
先從 Authing 控制臺(tái)中獲取用戶池 ID
- const authingWx = new AuthingWxmp({ userPoolId: 'YOUR_USERPOOLID',})
調(diào)用 getAuthorizationUrl 方法獲取微信授權(quán)登錄鏈接,修改 window.location 跳轉(zhuǎn)到微信登錄授權(quán)頁面
- // 跳轉(zhuǎn)到微信授權(quán)頁面window.location = authingWx.getAuthorizationUrl()
4. 獲取用戶信息
- // 若在回調(diào)頁面 authingWx 未初始化,需要先初始化,具體初始化方式參考上文const { ok, userinfo, message } = authingWx.getUserInfo()if (ok) { // do with userinfo console.log(userinfo)} else if (message) { // message 中包含了錯(cuò)誤提示 alert(message)}
5. 使用 token 維持登錄狀態(tài)
以 axios 為例:
- const axios = require("axios");axios .get({ url: "https://yourdomain.com/api/v1/your/resources", headers: { Authorization: "Bearer ID_TOKEN", }, }) .then((res) => { // custom codes });
識(shí)別用戶身份之后,可能還需要對(duì)該用戶進(jìn)行權(quán)限管理,以判斷用戶是否對(duì)此 API 具備操作權(quán)限。
6. 總結(jié)授權(quán)流程
· 開發(fā)者引導(dǎo)用戶跳轉(zhuǎn)到 Authing 設(shè)置的授權(quán)鏈接:
https://oauth.authing.cn/oauth/wechatmp/url:userPoolId。
· Authing 和微信根據(jù) OAuth 協(xié)議完成用戶信息交互。
· Authing 將用戶信息(包含 token)發(fā)送到開發(fā)者自定義的業(yè)務(wù)回調(diào)鏈接。
· 開發(fā)者使用 token 維持登錄狀態(tài),檢驗(yàn) token 的合法性以及登錄狀態(tài)。
· 終端用戶后續(xù)的請求將 token 攜帶上。
· 開發(fā)者在后端調(diào)用 Authing 提供的方法檢驗(yàn) token 的合法性以及登錄狀態(tài)。
· 根據(jù) Authing 返回的登錄狀態(tài)和開發(fā)者自己的業(yè)務(wù)邏輯,對(duì)請求進(jìn)行相應(yīng)處理。