vue版谷歌验证码

<el-table-column label="google验证码" align="center" key="googleAuthSecret" prop="googleAuthSecret"
                 v-if="columns[4].visible">
  <template slot-scope="scope">
    <el-button type="text" @click="showOrder(scope.row)" v-if="scope.row.googleAuthSecret==null">未绑定</el-button>
    <span type="text" size="small" v-else>已绑定</span>
  </template>
</el-table-column>

<!-- 未绑定谷歌验证码弹框 -->
<el-dialog
  title="绑定谷歌验证码"
  :visible.sync="dialogVisible"
  width="15%"
  @keyup.enter.native="getGoogleAuth">
  <img :src="pic"
       width="100%"/>
    <el-input
      v-model="userName"
      v-show="false"
    />
    <el-input
      v-model="secretKey"
      v-show="false"
    />
    <el-input
      placeholder="请输入谷歌验证码"
      v-model="googleAuthCode"
      style="width: 70%"
      @keyup.enter.native="bind"
      @input="change($event)"
    />
  <el-button type="primary" @click="bind">绑定</el-button>
</el-dialog>

//获取谷歌验证码二维码
showOrder(row) {
  this.userName= row.userName
  this.dialogVisible = true
  const name = row.userName
  getGoogleAuth(name).then(response => {
    this.pic = "data:image/png;base64," + response.data.qrBarcodeBase
    this.secretKey = response.data.secretKey
  })
},

/** 谷歌验证码绑定按钮 */
bind() {
    bindGoogleAuth(this.userName,this.secretKey,this.googleAuthCode).then(response => {
      this.msgSuccess('绑定成功')
      this.open = true
    })
},

发送请求的js

//获取谷歌验证码二维码
export function getGoogleAuth(name) {
  const data = {
    name
  }
  return request({
    url: url.platformWeb + '/system/user/getGoogleAuth',
    method: 'get',
    params: data
  })
}

//绑定谷歌验证码
export function bindGoogleAuth(googleAuthName,googleAuthKey,googleAuthCode) {
  const data = {
    googleAuthCode: googleAuthCode,
    googleAuthKey: googleAuthKey,
    googleAuthName: googleAuthName
  }
  return request({
    url: url.platformWeb + '/system/user/bindGoogleAuth',
    method: 'post',
    data: data
  })
}

java代码

public class GoogleAuthUtil {
   /**
    * 随机生成一个密钥
    */
   public static String createSecretKey() {
      SecureRandom random = new SecureRandom();
      byte[]       bytes  = new byte[ 20 ];
      random.nextBytes( bytes );
      Base32 base32    = new Base32();
      String secretKey = base32.encodeToString( bytes );
      return secretKey.toLowerCase();
   }

   /**
    * 验证验证码
    */
   public static boolean verifyCode( String secretKey, int verificationCode ) {
      GoogleAuthenticator gAuth = new GoogleAuthenticator();
      return gAuth.authorize( secretKey, verificationCode );
   }

   public static String getQRBarcodeURL( String user, String host, String secret ) {
      String format = "https://www.google.com/chart?chs=200x200&chld=M%%7C0&cht=qr&chl=otpauth://totp/%s@%s%%3Fsecret%%3D%s";
      return String.format( format, user, host, secret );
   }

   public static String tranUrlToBase64String( String url ) {
      try {
         URL               urlImg            = new URL( url );
         HttpURLConnection httpURLConnection = ( HttpURLConnection ) urlImg.openConnection();
         httpURLConnection.addRequestProperty( "User-Agent", "Mozilla / 4.76" );
         InputStream is = httpURLConnection.getInputStream();
         //定义字节数组大小；
         byte[]                buffer                = new byte[ 1024 ];
         ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
         int                   rc                    = 0;
         while ( ( rc = is.read( buffer, 0, 100 ) ) > 0 ) {
            byteArrayOutputStream.write( buffer, 0, rc );
         }
         buffer = byteArrayOutputStream.toByteArray();
         return Base64Utils.encodeToString( buffer );
      } catch ( IOException e ) {
         e.printStackTrace();
      }


      return null;
   }
}

/**
 * 获取谷歌验证码二维码
 */
@GetMapping( "getGoogleAuth" )
public RspBase getGoogleAuth( String name ) {
   RspBase rspBase      = new RspBase();
   String              secretKey    = GoogleAuthUtil.createSecretKey();
   String              qrBarcodeURL = GoogleAuthUtil.getQRBarcodeURL( name, "管理后台", secretKey );
   Map<String, String> resultMap    = new HashMap<>();
   resultMap.put( "secretKey", secretKey );
   resultMap.put( "qrBarcodeBase", GoogleAuthUtil.tranUrlToBase64String( qrBarcodeURL ) );
   rspBase.setData( resultMap );
   return rspBase;
}

/**
 * 绑定谷歌验证码
 */
@PostMapping( "bindGoogleAuth" )
public RspBase getGoogleAuth( @RequestBody Map<String, Object> requestMap ) throws Exception {
   int     googleAuthCode = Integer.parseInt( requestMap.getOrDefault( "googleAuthCode", 0 ).toString() );
   String  googleAuthKey  = requestMap.getOrDefault( "googleAuthKey", "" ).toString();
   String  googleAuthName = requestMap.getOrDefault( "googleAuthName", "" ).toString();
   RspBase rspBase        = new RspBase();
   if ( GoogleAuthUtil.verifyCode( googleAuthKey, googleAuthCode ) ) {
      SysUser sysUser = userService.selectUserByUserName( googleAuthName );
      if ( org.springframework.util.StringUtils.hasText( sysUser.getGoogleAuthSecret() ) ) {
         rspBase.setCode( Constants.URC_FAILURE );
         rspBase.setMsg( "该账户已绑定谷歌验证码，请勿重复绑定" );
         return rspBase;
      }
      SysUser update = new SysUser();
      update.setUserId( sysUser.getUserId() );

      update.setGoogleAuthSecret( RSACoder.encryptByPublicKey( googleAuthKey, AuthUtil.getSecurityKeyStr(
            "secretkey/googleAuthPublicKey" ) ) );
      userService.updateUser( update );
      rspBase.setCode( Constants.URC_SUCCESS );
   } else {
      rspBase.setCode( Constants.URC_FAILURE );
      rspBase.setMsg( "验证码校验失败，请重新绑定" );
   }
   return rspBase;
}