基於 antd pro 的短信驗證碼登錄功能(流程分析)

Posted on by

概要

最近使用 antd pro 開發項目時遇到個新的需求, 就是在登錄界面通過短信驗證碼來登錄, 不使用之前的用戶名密碼之類登錄方式.

這種方式雖然增加瞭額外的短信費用, 但是對於安全性確實提高瞭不少. antd 中並沒有自帶能夠倒計時的按鈕,
但是 antd pro 的 ProForm components 中倒是提供瞭針對短信驗證碼相關的組件.
組件說明可參見: https://procomponents.ant.design/components/form

整體流程

通過短信驗證碼登錄的流程很簡單:

  1. 請求短信驗證碼(客戶端)
  2. 生成短信驗證碼, 並設置驗證碼的過期時間(服務端)
  3. 調用短信接口發送驗證碼(服務端)
  4. 根據收到的短信驗證碼登錄(客戶端)
  5. 驗證手機號和短信驗證碼, 驗證通過之後發行 jwt-token(服務端)

前端

頁面代碼

import React, { useState } from 'react';
  import { connect } from 'umi';
   import { message } from 'antd';
  import ProForm, { ProFormText, ProFormCaptcha } from '@ant-design/pro-form';
 import { MobileTwoTone, MailTwoTone } from '@ant-design/icons';
  import { sendSmsCode } from '@/services/login';
 
 const Login = (props) => {
    const [countDown, handleCountDown] = useState(5);
    const { dispatch } = props;
    const [form] = ProForm.useForm();
    return (
      <div
        style={{
          width: 330,
          margin: 'auto',
        }}
      >
        <ProForm
          form={form}
          submitter={{
            searchConfig: {
              submitText: '登錄',
            },
            render: (_, dom) => dom.pop(),
            submitButtonProps: {
              size: 'large',
              style: {
                width: '100%',
              },
            },
            onSubmit: async () => {
              const fieldsValue = await form.validateFields();
              console.log(fieldsValue);
              await dispatch({
                type: 'login/login',
                payload: { username: fieldsValue.mobile, sms_code: fieldsValue.code },
              });
            },
          }}
        >
          <ProFormText
            fieldProps={{
              size: 'large',
              prefix: <MobileTwoTone />,
            }}
            name="mobile"
            placeholder="請輸入手機號"
            rules={[
              {
                required: true,
                message: '請輸入手機號',
              },
              {
                pattern: new RegExp(/^1[3-9]\d{9}$/, 'g'),
                message: '手機號格式不正確',
              },
            ]}
          />
          <ProFormCaptcha
            fieldProps={{
              size: 'large',
              prefix: <MailTwoTone />,
            }}
            countDown={countDown}
            captchaProps={{
              size: 'large',
            }}
            name="code"
            rules={[
              {
                required: true,
                message: '請輸入驗證碼！',
              },
            ]}
            placeholder="請輸入驗證碼"
            onGetCaptcha={async (mobile) => {
              if (!form.getFieldValue('mobile')) {
                message.error('請先輸入手機號');
                return;
              }
              let m = form.getFieldsError(['mobile']);
              if (m[0].errors.length > 0) {
                message.error(m[0].errors[0]);
                return;
              }
              let response = await sendSmsCode(mobile);
              if (response.code === 10000) message.success('驗證碼發送成功!');
              else message.error(response.message);
            }}
          />
        </ProForm>
      </div>
    );
  };
  
  export default connect()(Login);

請求驗證碼和登錄的 service (src/services/login.js)

import request from '@/utils/request';

  export async function login(params) {
  return request('/api/v1/login', {
     method: 'POST',
     data: params,
   });
 }
 
  export async function sendSmsCode(mobile) {
    return request(`/api/v1/send/smscode/${mobile}`, {
      method: 'GET',
    });
  }

處理登錄的 model (src/models/login.js)

import { stringify } from 'querystring';
 import { history } from 'umi';
  import { login } from '@/services/login';
 import { getPageQuery } from '@/utils/utils';
 import { message } from 'antd';
  import md5 from 'md5';
 
  const Model = {
   namespace: 'login',
    status: '',
    loginType: '',
    state: {
      token: '',
    },
    effects: {
      *login({ payload }, { call, put }) {
        payload.client = 'admin';
        // payload.password = md5(payload.password);
        const response = yield call(login, payload);
        if (response.code !== 10000) {
          message.error(response.message);
          return;
        }
  
        // set token to local storage
        if (window.localStorage) {
          window.localStorage.setItem('jwt-token', response.data.token);
        }
  
        yield put({
          type: 'changeLoginStatus',
          payload: { data: response.data, status: response.status, loginType: response.loginType },
        }); // Login successfully
  
        const urlParams = new URL(window.location.href);
        const params = getPageQuery();
        let { redirect } = params;
  
        console.log(redirect);
        if (redirect) {
          const redirectUrlParams = new URL(redirect);
  
          if (redirectUrlParams.origin === urlParams.origin) {
            redirect = redirect.substr(urlParams.origin.length);
  
            if (redirect.match(/^\/.*#/)) {
              redirect = redirect.substr(redirect.indexOf('#') + 1);
            }
          } else {
            window.location.href = '/home';
          }
        }
        history.replace(redirect || '/home');
      },
  
      logout() {
        const { redirect } = getPageQuery(); // Note: There may be security issues, please note
  
        window.localStorage.removeItem('jwt-token');
        if (window.location.pathname !== '/user/login' && !redirect) {
          history.replace({
            pathname: '/user/login',
            search: stringify({
              redirect: window.location.href,
            }),
          });
        }
      },
    },
    reducers: {
      changeLoginStatus(state, { payload }) {
        return {
          ...state,
          token: payload.data.token,
          status: payload.status,
          loginType: payload.loginType,
        };
      },
    },
  };
  export default Model;

後端

後端主要就 2 個接口, 一個處理短信驗證碼的發送, 一個處理登錄驗證

路由的代碼片段:

apiV1.POST("/login", authMiddleware.LoginHandler)
 apiV1.GET("/send/smscode/:mobile", controller.SendSmsCode)

短信驗證碼的處理

  1. 短信驗證碼的處理有幾點需要註意:
  2. 生成隨機的固定長度的數字調用短信接口發送驗證碼保存已經驗證碼, 以備驗證用
  3. 生成固定長度的數字

以下代碼生成 6 位的數字, 隨機數不足 6 位前面補 0

r := rand.New(rand.NewSource(time.Now().UnixNano()))
 code := fmt.Sprintf("%06v", r.Int31n(1000000))

調用短信接口

這個簡單, 根據購買的短信接口的說明調用即可

保存已經驗證碼, 以備驗證用

這裡需要註意的是驗證碼要有個過期時間, 不能一個驗證碼一直可用.
臨時存儲的驗證碼可以放在數據庫, 也可以使用 redis 之類的 KV 存儲, 這裡為瞭簡單, 直接在內存中使用 map 結構來存儲驗證碼

package util

 import (
    "fmt"
   "math/rand"
   "sync"
  "time"
  )

  type loginItem struct {
    smsCode       string
    smsCodeExpire int64
  }
  
  type LoginMap struct {
    m           map[string]*loginItem
    l           sync.Mutex
  }
  
  var lm *LoginMap
  
  func InitLoginMap(resetTime int64, loginTryMax int) {
    lm = &LoginMap{
      m:           make(map[string]*loginItem),
    }
  }
  
  func GenSmsCode(key string) string {
    r := rand.New(rand.NewSource(time.Now().UnixNano()))
    code := fmt.Sprintf("%06v", r.Int31n(1000000))
  
    if _, ok := lm.m[key]; !ok {
      lm.m[key] = &loginItem{}
    }
  
    v := lm.m[key]
    v.smsCode = code
    v.smsCodeExpire = time.Now().Unix() + 600 // 驗證碼10分鐘過期
  
    return code
  }
  
  func CheckSmsCode(key, code string) error {
    if _, ok := lm.m[key]; !ok {
      return fmt.Errorf("驗證碼未發送")
    }
  
    v := lm.m[key]
  
    // 驗證碼是否過期
    if time.Now().Unix() > v.smsCodeExpire {
      return fmt.Errorf("驗證碼(%s)已經過期", code)
    }
  
    // 驗證碼是否正確
    if code != v.smsCode {
      return fmt.Errorf("驗證碼(%s)不正確", code)
    }
  
    return nil
  }

登錄驗證

登錄驗證的代碼比較簡單, 就是先調用上面的 CheckSmsCode 方法驗證是否合法.
驗證通過之後, 根據手機號獲取用戶信息, 再生成 jwt-token 返回給客戶端即可.

FAQ

antd 版本問題

使用 antd pro 的 ProForm 要使用 antd 的最新版本, 最好 >= v4.8, 否則前端組件會有不兼容的錯誤.

可以優化的點

上面實現的比較粗糙, 還有以下方面可以繼續優化:

驗證碼需要控制頻繁發送, 畢竟發送短信需要費用驗證碼直接在內存中, 系統重啟後會丟失, 可以考慮放在 redis 之類的存儲中

到此這篇關於基於 antd pro 的短信驗證碼登錄功能(流程分析)的文章就介紹到這瞭,更多相關antd pro 驗證碼登錄內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：