只需6步,教你從零開發一個簽到小程式

華為雲開發者社群發表於2021-08-06
摘要:針對於具備瞬時流量、業務場景比較簡單的小程式,開發者藉助FunctionGraph,可以方便快捷的搭建一個健壯的小程式後臺。

本文分享自華為雲社群《智慧校園想搞好,FunctionGraph少不了——從零開發簽到小程式so easy!》,作者: 一隻程式猿。

背景

華為romalab實驗室在構建智慧教育領域app時,以FunctionGraph為試點,嘗試基於FunctionGraph雲函式開發一個簽到小程式。針對於具備瞬時流量、業務場景比較簡單的小程式,開發者藉助FunctionGraph,可以方便快捷的搭建一個健壯的小程式後臺。

免登方案設計與前後端通訊邏輯

方案概述

App在登入以後,才會開啟小程式。如果小程式和app的使用者體系一致,使用者就不用再次登入。在首次訪問小程式的時候,呼叫智慧校園app的免登介面,獲取使用者資訊,然後小程式構建自己的登入狀態。由於雲函式本身屬於無狀態的服務,需要藉助授權伺服器(或者簽發jwt)實現自己的介面認證。

小程式在呼叫後臺業務介面時,攜帶票據。

互動流程圖

(注:智慧校園app是基於華為內部的移動使能平臺OneMobile構建,此處的OneMobile就可以理解為智慧校園app)

只需6步,教你從零開發一個簽到小程式只需6步,教你從零開發一個簽到小程式

流程描述

流程描述:

  1. 開啟簽到小程式,呼叫getToken()獲取ssoTikect票據資訊
  2. 小程式將ssoTicket傳入到認證函式A中,在A中去呼叫智慧校園app的開放平臺介面,根據ssoTicket獲得當前的使用者資訊
  3. 拿到使用者資訊以後,根據該使用者資訊,生成票據token ,返還給小程式

只需6步,教你從零開發一個簽到小程式

  1. 小程式呼叫業務函式B,在請求中攜帶token
  2. 業務函式B在拿到請求以後,校驗token、換取使用者資訊
  3. 校驗通過,根據獲取的使用者資訊,執行業務功能,返還結果

只需6步,教你從零開發一個簽到小程式

業務實現

角色許可權管理策略

智慧校園app本身對小程式有著嚴格的許可權控制體系,可以在使用者、組織、崗位等維度,對小程式的可見性進行控制。由於簽到打卡這個業務場景比較簡單,且人員有著明顯的角色特徵,老師設定簽到規則,學生掃碼進行簽到。

結合當前的現狀,此次簽到小程式不再單獨構建自己的許可權管理體系,而是依託於智慧校園app本身的許可權體系。提供兩個小程式,一個是教師使用的“教師上課點名”小程式,用於協助老師生成簽到二維碼。一個是“簽到打卡”小程式,用於學生上課簽到。由智慧校園app在入口處對小程式的使用者進行管控。

App掃碼簽到實現

如何簽到

簽到是通過掃描二維碼進行簽到,在掃碼的時候,將掃碼得到的資訊,傳遞到後臺,後臺對二維碼中的課程資訊與簽到規則進行比對後,返還簽到結果。小程式根據不同的簽到結果,給使用者展示不同的頁面。

如何掃碼

當前掃碼的入口有兩個,一個在小程式內部,一個在app的右上角。二者呼叫的都是系統的掃碼能力。

只需6步,教你從零開發一個簽到小程式

只需6步,教你從零開發一個簽到小程式

由於在app上掃碼能夠進入簽到小程式並進行簽到,就需要簽到二維碼不僅僅要攜帶課程資訊,同時也要攜帶要開啟小程式的資訊。

如何實現掃碼進入小程式

智慧校園app的掃一掃能力,預製了一些通用的能力,當掃碼得到的結果是某一個固定型別的資料格式,就會自動完成一些操作。

如掃碼能識別開啟小程式的資料格式為:native://openapp?data={"appid":"88157779"},而開啟小程式的能力,其實是封裝了jssdk的xm.openApp()的能力。xm.openApp()允許開發者能在一個小程式裡面開啟另外一個小程式。

App掃碼簽到程式碼實現流程圖

只需6步,教你從零開發一個簽到小程式

FunctionGraph實現簽到業務

開發函式支援多種語言型別,如nodejs、python、java等。後端邏輯中,除了普通業務邏輯(如跟資料庫互動)之外,最主要的是跟智慧校園app的互動,如獲取使用者資訊。互動形式是介面呼叫,可以直接引用封裝好的客戶端來實現,以nodejs開發語言為例,直接引入npm包即可。

開發後端函式邏輯

認證函式

App在登入以後,才會開啟小程式。如果小程式和app的使用者體系一致,使用者就不用再次登入。而小程式如何在不登入的情況下想要拿到當前使用該App的使用者,就需要藉助app的介面,實現免登。認證函式的作用就是獲取當前app的使用者,並且能夠簽發小程式自己的自定義登入狀態,如簽發一個jwt

認證函式的入參為小程式前臺從app獲取到的ssoTicket。

具體實現如下:

1. 獲取智慧校園app的api呼叫SDK程式碼,執行npm pack打包,生成OneMobileSDK-0.0.1.tgz, 在新專案中安裝該依賴npm install OneMobileSDK-0.0.1.tgz,然後將node-modules檔案壓縮成zip,上傳到FunctionGraph的依賴倉庫中去。在建立函式時新增該依賴。

a.建立依賴包

只需6步,教你從零開發一個簽到小程式

b.上傳依賴檔案

只需6步,教你從零開發一個簽到小程式

c.新增依賴

只需6步,教你從零開發一個簽到小程式

2. 參照步驟1,將mysql-node的依賴,加入到FG的依賴倉庫中去,在建立函式時新增該依賴。

3.呼叫OneMobileBaseSDK裡面的getUserInfoBySsoTicket(ssoTicket),獲取使用者資訊

a.在程式碼中引用SDK

只需6步,教你從零開發一個簽到小程式

b.呼叫介面

只需6步,教你從零開發一個簽到小程式

4. 校驗使用者資訊。

5. 根據獲取到的使用者資訊,生成業務介面的呼叫憑證,返還給小程式前臺。

簽到函式

關於簽到函式,在操作流程上面和認證函式相似,這裡不做過多的闡述。其主體的流程如下:

1. 建立函式時,新增mysql-node相關依賴

2. 校驗簽到資訊

3. 將簽到結果入庫

4. 返還簽到結果給小程式

介面開放

函式開發完成以後,需要將函式開放給小程式使用,具體操作步驟如下。

1. 在函式詳情頁面,點選觸發器頁籤

只需6步,教你從零開發一個簽到小程式

2.建立觸發器,觸發器型別選擇APIG。由於程式碼中有認證邏輯,所以閘道器層不做認證

只需6步,教你從零開發一個簽到小程式

3.獲取建立的APIG呼叫地址,小程式前端即可根據業務需要,呼叫相應的rest介面。

只需6步,教你從零開發一個簽到小程式只需6步,教你從零開發一個簽到小程式

總結

此次小程式開發識別到的問題

智慧校園app

  1. FullCode模式下,頁面的碎片化問題亟待解決,智慧校園app缺少頁面預覽工具以及通用的元件庫。
  2. 免登介面只能在容器中才能呼叫,而除錯的時候部分介面強依賴ssoTicket,只能通過整合vconsole,然後在手機中執行getToken()指令才可以獲取ssoTicket。
  3. 公司內部沒有除錯環境,公網調測,每次都需要傳包到開放平臺,操作起來很麻煩。
  4. 文件仍需補齊,一些非常規能力,如掃碼開啟小程式功能,沒有相應的文件支撐
  5. 缺少支撐一套前端調測多套環境的解決方案

FunctionGraph

  1. 程式碼分佈在3個地方:前臺程式碼由智慧校園app託管執行、閘道器api直接配置在APIG、函式程式碼在Function裡。功能除錯成功後,如果有一鍵歸檔(或者下載)功能或者下載工具會比較好。同樣,希望也有一鍵部署功能的工具。
  2. 當前加密配置粒度是單個函式,以連線資料庫為例,多個函式連線同一個資料庫,需要在每個函式中都增加資料庫賬號密碼加密配置,繁瑣而且無法保證資料一致。

能力待提升

智慧校園app

  1. 參照微信,求助IDE團隊,為提供小程式開發工具
  2. 參照welink為開發者提供開放平臺的調測工具,並能一鍵生成不同語言的介面呼叫程式碼
  3. 構建小程式專門的雲開發平臺,小程式流量走App基座的閘道器,打通各個雲服務,服務之間鑑權由開發平臺承接,小程式開發者更專注於業務能力構建。

FunctionGraph

  1. 能夠通過函式應用生命週期管理功能解決函式開發、部署、釋出(到APIG)一體化的問題
  2. 能夠實現使用者或租戶級別的配置共享

參考文件:

https://support.huaweicloud.com/usermanual-romalab/lab_03_0001.html

https://www.huaweicloud.com/product/functiongraph.html

 

點選關注,第一時間瞭解華為雲新鮮技術~

相關文章