第一個SSM前端專案(八)：賬號登陸與手機快捷登入
阿新 • • 發佈：2018-12-18
一、登入頁面
二、賬號登入流程
1）賬號登入程式碼如下
package cn.com.gulu.controller; import javax.servlet.http.HttpServletRequest; import org.apache.commons.lang.StringUtils; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import cn.com.gulu.entity.User; import cn.com.gulu.service.UserService; import cn.com.gulu.util.ConstUtil; import cn.com.gulu.util.Md5Util; /** * 登入管理類 * @author Administrator * */ @Controller @RequestMapping(value="/login") public class LoginController { @Autowired private UserService userService; /** * 進行登入 */ @RequestMapping(value="/login") public String login(Model model,String username,String password,String code,HttpServletRequest request) { //校驗驗證碼 if(StringUtils.isBlank(code)) { model.addAttribute("error", "codeFail"); return "../../login"; } Object attribute = request.getSession().getAttribute(ConstUtil.VALIDATIONCODE); if(attribute==null) { model.addAttribute("error", "codeFail"); return "../../login"; }else if(!code.equalsIgnoreCase(attribute.toString())) { model.addAttribute("error", "codeFail"); return "../../login"; } User user=userService.findByEmail(username); String passwordInput=Md5Util.encodeString(password+ConstUtil.ENCODE); if(user==null) { model.addAttribute("error", "fail"); return "../../login"; }else if(!user.isIs_active()) { model.addAttribute("error", "active"); return "../../login"; }else if(!passwordInput.equals(user.getPassword())) { model.addAttribute("error", "fail"); return "../../login"; }else { model.addAttribute("user", user); //存入session request.getSession().setAttribute(ConstUtil.CURENTUSER, user); //重定向到個人主頁 return "redirect:personal/list"; } } }
三、手機快捷登入流程如下
1）手機快捷登入使用的是騰訊雲簡訊服務，因此需要去騰訊雲開通簡訊服務，拿到對應的APPID和APPKEY、模板編號等
2）pom檔案引入騰訊雲簡訊相關依賴
<!--騰訊雲簡訊相關依賴 --> <dependency> <groupId>com.github.qcloudsms</groupId> <artifactId>qcloudsms</artifactId> <version>1.0.5</version> </dependency>
3） 設計騰訊雲簡訊傳送工具類，根據騰訊雲返回的結果狀態碼給予不同的提示
package cn.com.gulu.util; import com.github.qcloudsms.SmsSingleSender; import com.github.qcloudsms.SmsSingleSenderResult; /** * 騰訊雲相關工具類 * @author Administrator * */ public class TengXunYunUtil { /** * 傳送簡訊 */ public static int SendDuanXin(String phone,String code) { int templateId=215311; //簡訊正文模板id(在騰訊雲簡訊控制檯上設定) String[] params={code}; //引數個數需與模板的變數個數一致 String smsSign="咕嚕小窩"; //簽名引數，使用的是簽名內容而非簽名id--需跟控制檯一致 //傳送簡訊 SmsSingleSender sender=new SmsSingleSender(ConstUtil.TENGXUNYUN_DUANXIN_APPID,ConstUtil.TENGXUNYUN_DUANXIN_APPKEY); SmsSingleSenderResult result=sender.sendWithParam("86", phone, templateId, params, smsSign, "", ""); //返回結果碼 return result.result; } }
4）根據jsp頁面的方法在後臺設定傳送簡訊方法
//獲取驗證碼
$(function () {
var go = document.getElementById('go');
go.onclick = function (ev){
if(!flag2){
$("#phone_span").text("手機號碼非法或者未註冊！").css("color","red");
}else {
// 傳送簡訊給使用者手機..
// 1 傳送一個HTTP請求，通知伺服器 傳送簡訊給目標使用者
var telephone =$("input[name='telephone']").val();// 使用者輸入的手機號
// 使用者輸入手機號校驗通過
$("#go").attr("disabled", "");
countDown(60);
$.ajax({
method: 'POST',
url: '<%=basePath%>login/sendSms',
data : {
telephone : telephone
},
success:function(data) {
var tt = data["msg"];
if(tt){
new $.zui.Messager('簡訊傳送成功！', {
type: 'success',
icon:'ok-sign',
actions: [{
name: 'close',
icon: 'remove'
}]
}).show();
}else{
var msg=data["msgContent"]
new $.zui.Messager(msg, {
type: 'danger',
icon:'fail',
actions: [{
name: 'close',
icon: 'remove'
}]
}).show();
}
}
});
}
var oEvent = ev || event;
//js阻止連結預設行為，沒有停止冒泡
oEvent.preventDefault();
return false;
}
});5）傳送簡訊方法如下
/**
* 傳送手機簡訊
*/
@RequestMapping(value="/sendSms")
@ResponseBody
public Object sendSms(String telephone)
{
Map<String, Object> map = new HashMap<String, Object>();
map.put("msg",false);
String code=UuidUtil.get6Uuid();
//把簡訊驗證碼存入redis,3分鐘有效
redisTemplate.opsForValue().set(telephone, code, 3, TimeUnit.MINUTES);
//呼叫簡訊工具類傳送簡訊
try
{
int result=TengXunYunUtil.SendDuanXin(telephone, code);
if(result==0)
{
map.put("msg", true);
}else if(result==1025)
{
map.put("msgContent", "單日該手機下發簡訊達到上限數量10條,無法傳送");
}else if(result==1024)
{
map.put("msgContent", "該手機小時內下發簡訊達到上限數量5條,無法傳送");
}
}
catch (Exception e)
{
e.printStackTrace();
}
return map;
}6）修改後臺登入方法修改如下：
/**
* 進行登入
*/
@RequestMapping(value = "/login")
public String login(Model model, String username, String password,
String code, String telephone, String phone_code,
HttpServletRequest request)
{
// 手機號不為空代表手機快捷登入
if (!StringUtils.isBlank(telephone))
{
String redisCode=redisTemplate.opsForValue().get(telephone);
if(phone_code.equals(redisCode))
{
User curentUser = userService.findByPhone(telephone);
model.addAttribute("user", curentUser);
request.getSession().setAttribute(ConstUtil.CURENTUSER, curentUser);
// 重定向到個人主頁
return "redirect:personal/list";
}else
{
model.addAttribute("error", "phone_fail");
return "../../login";
}
}
else
{
// 校驗驗證碼
if (StringUtils.isBlank(code))
{
model.addAttribute("error", "codeFail");
return "../../login";
}
Object attribute = request.getSession().getAttribute(
ConstUtil.VALIDATIONCODE);
if (attribute == null)
{
model.addAttribute("error", "codeFail");
return "../../login";
}
else if (!code.equalsIgnoreCase(attribute.toString()))
{
model.addAttribute("error", "codeFail");
return "../../login";
}
User user = userService.findByEmail(username);
String passwordInput = Md5Util.encodeString(password
+ ConstUtil.ENCODE);
if (user == null)
{
model.addAttribute("error", "fail");
return "../../login";
}
else if (!user.isIs_active())
{
model.addAttribute("error", "active");
return "../../login";
}
else if (!passwordInput.equals(user.getPassword()))
{
model.addAttribute("error", "fail");
return "../../login";
}
else
{
model.addAttribute("user", user);
// 存入session
request.getSession().setAttribute(ConstUtil.CURENTUSER, user);
// 重定向到個人主頁
return "redirect:personal/list";
}
}
}
7）測試賬號登入和手機快捷登入(重點是手機快捷登入)
.