現在手機驗證碼登入似乎是每個網站必備的功能，OAuth2支援擴充套件自定義授權模式，前面介紹瞭如何在系統整合簡訊通知服務，這裡我們進行OAuth2的授權模式自定義擴充套件，使系統支援簡訊驗證碼登入。
1、在gitegg-oauth中新增SmsCaptchaTokenGranter 自定義簡訊驗證碼令牌授權處理類
/**
* 簡訊驗證碼模式
*/
public class SmsCaptchaTokenGranter extends AbstractTokenGranter {
private static final String GRANT_TYPE = "sms_captcha";
private final AuthenticationManager authenticationManager;
private UserDetailsService userDetailsService;
private IUserFeign userFeign;
private ISmsFeign smsFeign;
private RedisTemplate redisTemplate;
private CaptchaService captchaService;
private String captchaType;
public SmsCaptchaTokenGranter(AuthenticationManager authenticationManager,
AuthorizationServerTokenServices tokenServices, ClientDetailsService clientDetailsService,
OAuth2RequestFactory requestFactory, RedisTemplate redisTemplate, IUserFeign userFeign, ISmsFeign smsFeign, CaptchaService captchaService,
UserDetailsService userDetailsService, String captchaType) {
this(authenticationManager, tokenServices, clientDetailsService, requestFactory, GRANT_TYPE);
this.redisTemplate = redisTemplate;
this.captchaService = captchaService;
this.captchaType = captchaType;
this.smsFeign = smsFeign;
this.userFeign = userFeign;
this.userDetailsService = userDetailsService;
}
protected SmsCaptchaTokenGranter(AuthenticationManager authenticationManager,
AuthorizationServerTokenServices tokenServices, ClientDetailsService clientDetailsService,
OAuth2RequestFactory requestFactory, String grantType) {
super(tokenServices, clientDetailsService, requestFactory, grantType);
this.authenticationManager = authenticationManager;
}
@Override
protected OAuth2Authentication getOAuth2Authentication(ClientDetails client, TokenRequest tokenRequest) {
Map<string, string=""> parameters = new LinkedHashMap<>(tokenRequest.getRequestParameters());
// 獲取驗證碼型別
String captchaType = parameters.get(CaptchaConstant.CAPTCHA_TYPE);
// 判斷傳入的驗證碼型別和系統配置的是否一致
if (!StringUtils.isEmpty(captchaType) && !captchaType.equals(this.captchaType)) {
throw new UserDeniedAuthorizationException(ResultCodeEnum.INVALID_CAPTCHA_TYPE.getMsg());
}
if (CaptchaConstant.IMAGE_CAPTCHA.equalsIgnoreCase(captchaType)) {
// 圖片驗證碼驗證
String captchaKey = parameters.get(CaptchaConstant.CAPTCHA_KEY);
String captchaCode = parameters.get(CaptchaConstant.CAPTCHA_CODE);
// 獲取驗證碼
String redisCode = (String)redisTemplate.opsForValue().get(CaptchaConstant.IMAGE_CAPTCHA_KEY + captchaKey);
// 判斷驗證碼
if (captchaCode == null || !captchaCode.equalsIgnoreCase(redisCode)) {
throw new UserDeniedAuthorizationException(ResultCodeEnum.INVALID_CAPTCHA.getMsg());
}
} else {
// 滑動驗證碼驗證
String captchaVerification = parameters.get(CaptchaConstant.CAPTCHA_VERIFICATION);
CaptchaVO captchaVO = new CaptchaVO();
captchaVO.setCaptchaVerification(captchaVerification);
ResponseModel responseModel = captchaService.verification(captchaVO);
if (null == responseModel || !RepCodeEnum.SUCCESS.getCode().equals(responseModel.getRepCode())) {
throw new UserDeniedAuthorizationException(ResultCodeEnum.INVALID_CAPTCHA.getMsg());
}
}
String phoneNumber = parameters.get(TokenConstant.PHONE_NUMBER);
String smsCode = parameters.get(TokenConstant.SMS_CODE);
String code = parameters.get(TokenConstant.CODE);
// Protect from downstream leaks of password
parameters.remove(TokenConstant.CODE);
Result<boolean> checkResult = smsFeign.checkSmsVerificationCode(smsCode, phoneNumber, code);
if (null == checkResult || !checkResult.getData()) {
throw new InvalidGrantException(("Could not authenticate user: " + phoneNumber));
}
UserDetails userDetails = this.userDetailsService.loadUserByUsername(phoneNumber);
Authentication userAuth = new UsernamePasswordAuthenticationToken(userDetails, null, userDetails.getAuthorities());
((AbstractAuthenticationToken)userAuth).setDetails(parameters);
OAuth2Request storedOAuth2Request = getRequestFactory().createOAuth2Request(client, tokenRequest);
return new OAuth2Authentication(storedOAuth2Request, userAuth);
}
}
2、自定義GitEggTokenGranter，支援多種token模式
/**
* 自定義token
*/
public class GitEggTokenGranter {
/**
* 自定義tokenGranter
*/
public static TokenGranter getTokenGranter(final AuthenticationManager authenticationManager,
final AuthorizationServerEndpointsConfigurer endpoints, RedisTemplate redisTemplate, IUserFeign userFeign,
ISmsFeign smsFeign, CaptchaService captchaService, UserDetailsService userDetailsService, String captchaType) {
// 預設tokenGranter集合
List<tokengranter> granters = new ArrayList<>(Collections.singletonList(endpoints.getTokenGranter()));
// 增加驗證碼模式
granters.add(new CaptchaTokenGranter(authenticationManager, endpoints.getTokenServices(),
endpoints.getClientDetailsService(), endpoints.getOAuth2RequestFactory(), redisTemplate, captchaService,
captchaType));
// 增加簡訊驗證碼模式
granters.add(new SmsCaptchaTokenGranter(authenticationManager, endpoints.getTokenServices(),
endpoints.getClientDetailsService(), endpoints.getOAuth2RequestFactory(), redisTemplate, userFeign, smsFeign, captchaService,
userDetailsService, captchaType));
// 組合tokenGranter集合
return new CompositeTokenGranter(granters);
}
}
3、GitEggOAuthController中增加獲取簡訊驗證碼的方法
@ApiOperation("傳送簡訊驗證碼")
@PostMapping("/sms/captcha/send")
public Result sendSmsCaptcha(@RequestBody SmsVerificationDTO smsVerificationDTO) {
Result<object> sendResult = smsFeign.sendSmsVerificationCode(smsVerificationDTO.getSmsCode(), smsVerificationDTO.getPhoneNumber());
return sendResult;
}
4、前端頁面增加簡訊驗證碼登入方式
<a-tab-pane key="phone_account" :tab="$t('user.login.tab-login-mobile')" class="color:#1890ff;">
<a-form-item>
<a-input size="large" type="text" :placeholder="$t('user.login.mobile.placeholder')" v-decorator="['phoneNumber', {rules: [{ required: true, pattern: /^1[34578]\d{9}$/, message: $t('user.phone-number.required') }], validateTrigger: 'change'}]">
<a-icon slot="prefix" type="mobile" :style="{ color: '#1890ff' }">
</a-icon></a-input>
</a-form-item>
<a-row :gutter="16">
<a-col class="gutter-row" :span="16">
<a-form-item>
<a-input size="large" type="text" :placeholder="$t('user.login.mobile.verification-code.placeholder')" v-decorator="['captcha', {rules: [{ required: true, message: $t('user.verification-code.required') }], validateTrigger: 'blur'}]">
<a-icon slot="prefix" type="mail" :style="{ color: '#1890ff' }">
</a-icon></a-input>
</a-form-item>
</a-col>
<a-col class="gutter-row" :span="8">
<a-button class="getCaptcha" tabindex="-1" :disabled="state.smsSendBtn" @click.stop.prevent="getCaptcha" v-text="!state.smsSendBtn && $t('user.register.get-verification-code') || (state.time+' s')"></a-button>
</a-col>
</a-row>
</a-tab-pane>
getCaptcha (e) {
e.preventDefault()
const { form: { validateFields }, state } = this
validateFields(['phoneNumber'], { force: true }, (err, values) => {
if (!err) {
state.smsSendBtn = true
const interval = window.setInterval(() => {
if (state.time-- <= 0) {
state.time = 60
state.smsSendBtn = false
window.clearInterval(interval)
}
}, 1000)
const hide = this.$message.loading('驗證碼傳送中..', 0)
getSmsCaptcha({ phoneNumber: values.phoneNumber, smsCode: 'aliLoginCode' }).then(res => {
setTimeout(hide, 2500)
this.$notification['success']({
message: '提示',
description: '驗證碼獲取成功，您的驗證碼為：' + res.result.captcha,
duration: 8
})
}).catch(err => {
setTimeout(hide, 1)
clearInterval(interval)
state.time = 60
state.smsSendBtn = false
this.requestFailed(err)
})
}
})
},
stepCaptchaSuccess () {
this.loginSuccess()
},
stepCaptchaCancel () {
this.Logout().then(() => {
this.loginBtn = false
this.stepCaptchaVisible = false
})
},
5、通過簡訊驗證碼登入介面
