用开源源码做淘宝客网站,Asp.net 手机网站制作,广告设计网站排行榜前十名,上海市建设安全协会网站j文章目录 前言一、几个关键概念1.HTTP无状态性2.Session机制3.Token认证4.JWT 二、通过手机号验证码登录1.前端短信登录界面2.发送短信接口与短信登录接口3.Vue 设置interceptors拦截器4. 服务端验证采用自定义中间件方式实现5. 操作流程及效果图如下#xff1a; 三、通过第三… 文章目录 前言一、几个关键概念1.HTTP无状态性2.Session机制3.Token认证4.JWT 二、通过手机号验证码登录1.前端短信登录界面2.发送短信接口与短信登录接口3.Vue 设置interceptors拦截器4. 服务端验证采用自定义中间件方式实现5. 操作流程及效果图如下 三、通过第三方平台进行登录1.准备工作2.前端钉钉登录界面3.后端逻辑处理4.操作流程及效果图如下 前言 在当今的数字化时代用户认证是任何在线服务安全性的基石。本文将简明扼要地介绍登录注册流程中的核心概念HTTP无状态性、Session、Token与JWT并详细阐述两种实用登录方式—— 手机号登录验证借助容联云/云通讯服务 与钉钉第三方登录。我们将探讨这些概念的基本原理并深入解析两种登录方式的实现流程旨在帮助开发者提升用户认证的安全性与便捷性。 一、几个关键概念 首先我们来分析登录注册流程中涉及的几个关键概念及其工作机制特别是关于HTTP无状态性、Session机制、Token认证以及它们如何影响 单点登录SSO 的实现。
1.HTTP无状态性 HTTP协议本身是无状态的这意味着服务器不会保留来自先前请求的客户端信息。每次请求都被视为完全独立的服务器不会记住之前发生了什么。正是由于HTTP的无状态性服务器无法直接记住用户是否已经登录或注册。这意味着每次用户请求都需要重新验证用户的身份这在没有额外机制的情况下是不可行的。这种设计虽然简化了服务器的实现但也要求开发者实现一些机制来跟踪用户会话和状态。 2.Session机制 工作原理 1. 请求发起客户端如浏览器向服务器发起请求。2. 验证与生成Session服务器验证请求如登录验证验证通过后在服务器上创建一个Session对象并为其分配一个唯一的标识符如JSESSIONID。这个Session对象可以存储用户的信息如用户名、权限等。3. 返回Session ID服务器将JSESSIONID作为响应的一部分通常通过Set-Cookie头部发送给客户端。4. 客户端存储客户端浏览器将JSESSIONID存储在Cookie中。5. 后续请求在后续的请求中客户端会自动将JSESSIONID包含在请求头如Cookie中发送给服务器。6. 验证Session服务器通过JSESSIONID在服务器上查找对应的Session对象如果找到则继续处理请求如果未找到则可能表示用户未登录或Session已过期。 不适合单点登录的原因 每个应用或服务都可能有自己的Session管理机制这使得跨多个应用或服务共享登录状态变得复杂。 3.Token认证 工作原理 1.请求发起客户端向服务器发起请求如登录请求。2.验证与生成Token服务器验证请求如用户名和密码验证通过后生成一个唯一的Token通常是一个加密的字符串并将其存储在数据库中或缓存中。3.返回Token服务器将Token作为响应的一部分发送给客户端。4.客户端存储客户端将Token存储在Cookie、LocalStorage或SessionStorage中取决于具体实现和安全需求。5.后续请求在后续的请求中客户端将Token包含在请求头如Authorization: Bearer 中发送给服务器。6.验证Token服务器通过查询数据库或缓存来验证Token的有效性如果Token有效则继续处理请求。 适合单点登录的原因 Token可以在多个应用或服务之间共享只要它们能够访问存储Token的数据库或缓存。通过适当的认证服务器如OAuth2.0中的授权服务器可以实现跨域的单点登录。 4.JWT JWTJSON Web Token 是一种无状态的Token认证机制它允许服务器在Token中直接包含用户的身份信息和其他必要的验证信息。客户端在每次请求时携带这个Token服务器通过验证Token来识别用户的身份和权限。 JWT的组成部分 JWT由三部分组成头部Header、载荷Payload和签名Signature每一部分都通过Base64编码后进行传输。 头部Header包含了令牌的元数据如令牌的类型JWT和所使用的签名算法如HMAC SHA256或RSA。载荷Payload包含了实际要传输的用户信息和其他元数据。这些信息可以是用户的姓名、角色、权限、到期时间等。载荷是JWT的主体部分用于传递用户信息。签名Signature用于验证JWT的完整性和真实性。签名通过对头部和载荷进行哈希运算并使用私钥在生成JWT时或公钥在验证JWT时进行加密生成。接收者可以使用公钥对签名进行解密从而验证JWT的真实性和来源。 加密 base64(头部).base64(载荷).HS256(base64(头部).base64(载和),‘盐’)解密 HS256(base64(头部).base64(载荷),‘盐’) 生成一个新的签名和传递过来的签名进行对比 根据上述内容我们可以构建一个简单的jwt工具类用于jwt的加密解密 from fuguang_back.settings import SECRET_KEY
import jwt
import timeclass MyJwt():def __init__(self):self.secret SECRET_KEY# 加密def jwt_encode(self, payload):# 载荷、盐、加密方式return jwt.encode(payload, self.secret, algorithmHS256)# 解密def jwt_decode(self, token):# token,盐、解密方式return jwt.decode(token, self.secret, algorithms[HS256])mjwt MyJwt()
# user {id:1,name:zhangsan,exp:int(time.time()) 3600}
# token mjwt.jwt_encode(user)
# print(token)
# token eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MSwibmFtZSI6InpoYW5nc2FuIiwiZXhwIjoxNzE5OTI0OTQ5fQ.rTPpHAx-92Pz1CmoRdO-yfGlAhAfuMInju2bFi1iixs
# data mjwt.jwt_decode(token)
# print(data)
# {id: 1, name: zhangsan, exp: 1719924949}二、通过手机号验证码登录 手机号登录流程 1.在登录界面输入手机号点击发送验证码2.写一个发送验证码的接口获取手机号正则有效性验证限制一分钟内只能发一次查询redis中是否存在如果存在返回已经发过不存在调用发送发送成功后存入redis3.用户输入验证码点击登录4.写一个登录接口 获取用户输入的手机号和验证码通过手机号查询redis获取验证码如果存在则对比验证码通过手机号查询用户表如果存在获取用户信息生成 jwt token如果不存在写入用户表用户信息生成 jwt token返回给客户端 5.客户端把token存在 localStorage中以后每次请求在头部携带token。vue设置 interceptors拦截器对每次请求前统一在头部加token6.服户端验证采用中间件方式实现。自定义中间件继承MiddiwareMinxin类重写process_request.方法中 定义白名单在登录前需要操作的接口放到白名单中 如果不在白名单获取token验证验证是否被修改是否过期是否已经退出 点击退出把token存入redis,加一个过期时间任何一个问题return 401没有权限操作通过继续下一步操作 安全问题及优化 1.token加过期时间 retoken。 登录成功后返回 token(3小时) retoken(4小时)当快到期的时候客户端携带retoken来换取新的token更新 2.oa系统公司内部使用加ip地址过滤3.https证书加密 1.前端短信登录界面 src\components\Login.vue !-- 1-短信登录 --div classinp v-showuser.login_type1input v-modeluser.account typetext placeholder手机号码 classuserinput v-modeluser.code typetext classcode placeholder短信验证码el-button idget_code typeprimary clicksendsms获取验证码/el-buttondiv classremberlabelinput typecheckbox classno v-modeluser.rememberMe/span记住我/span/labelp忘记密码/p/divbutton classlogin_btn clickloginmobile登录/buttonp classgo_login 没有账号 router-link to/register立即注册/router-link/p/div// 点击事件发送短信验证码
const sendsms (){//在前端正则验证手机号是否正确let reg /^1[3-9]\d{9}$/if (!reg.test(user.account)){alert([前端]手机号校验失败)return false;}http.get(/sendsms/?phone${this.account}).then((result) {if (result.data.code 200) {alert(发送成功)} else {alert(result.data.message)}}).catch((err) {alert(err)});
}
// 点击事件登录按钮
const loginmobile (){http.post(/login/,{mobile:user.account,code:user.code}).then(res {if (res.data.code200) { //登录成功localStorage.setItem(userid,res.data.userid); //客户端存储useridlocalStorage.setItem(token,res.data.token); //客户端存储tokenreturn router.push(/); //跳转主页} else {return router.push(/login); //登录失败--调整登录页面}}).catch((err) {console.log(err);});
}
2.发送短信接口与短信登录接口 这里使用容联云服务来通过短信发送验证码 云通讯后台管理https://console.yuntongxun.com/member/numbermanager 容联云短信开发手册https://doc.yuntongxun.com/pe/5f029ae7a80948a1006e776e 参考容联云短信开发手册构建发送短信的工具类代码如下 #tools/common.py
from ronglian_sms_sdk import SmsSDK
import json
accId 容联云通讯分配的主账号ID
accToken 容联云通讯分配的主账号TOKEN
appId 容联云通讯分配的应用ID# 发送短信
def send_message(mobile,sms_code):sdk SmsSDK(accId, accToken, appId)tid 1mobile mobiledatas (sms_code, )resp sdk.sendMessage(tid, mobile, datas)data json.loads(resp) #json--对象print(data)if data[statusCode] 000000:return Truereturn False接口发送短信验证码接口、登录接口 # user/views.py
# 发送验证码/获取验证码接口
class SendMobileCodeView(APIView):def get(self, request):# send_sms前端 /sendsms/?phone${this.account}/phone request.GET.get(phone)print(phone)#if not re.match(r1[3-9]\d{9}$,phone):# return Response({message:手机号验证失败,code:410})flag r.get_str(phone)if flag:return Response({message:一分钟只能发送一次验证码请稍稍后发送,code:200})sms_code random.randint(1000,9999)r.delete_str(sms_code)r.setex_str(sms_code,60*5,sms_code) # times验证码5分钟有效期send_message(phone, sms_code) # 发送短信验证码r.setex_str(phone,60,phone) #同一个手机号60s内只能发送一次验证码return Response({message:发送成功,code:200})# 手机短信登录接口
class LoginView(APIView):def post(self, request):myphone request.data.get(mobile)mycode request.data.get(code)sms_code r.get_str(sms_code) #从redis中取出系统生成的验证码if mycode sms_code: #与前端发送来的验证码对比user UsersModel.objects.filter(phonemyphone).first()# 获取用户信息 生成 jwt tokentoken mjwt.jwt_encode({userid:user.id,exp:int(time.time()) 3600}) return Response({code:200,token:token,userid:user.id})else:return Response({code:4001,message:验证码错误})3.Vue 设置interceptors拦截器 客户端把token存在 localStorage中以后每次请求在头部携带token。vue interceptors拦截器对每次请求前统一在头部添加token src\http\index.js import axios from axios
import settings from ../settings;
import router from ../routerconst http axios.create({// timeout: 2500, // 请求超时有大文件上传需要关闭这个配置baseURL: settings.host, // 设置api服务端的默认地址[如果基于服务端实现的跨域这里可以填写api服务端的地址如果基于nodejs客户端测试服务器实现的跨域则这里不能填写api服务端地址]withCredentials: false, // 是否允许客户端ajax请求时携带cookie
})// 请求拦截器 token
http.interceptors.request.use((config) {console.log(http请求之前);//获取登录后localStorage存储的tokenlet token localStorage.getItem(token) if (token) {config.headers.Authorization token;}return config;
}, (error) {console.log(http请求错误);return Promise.reject(error);
});// 响应拦截器
http.interceptors.response.use((response) {return response;
}, (error) {if (error.code ERR_NETWORK) {ElMessage.error(网络异常无法请求服务端信息);}if (error.response.status 401) {ElMessage.error(未登录或登录超时限制本次请求操作请求登录后继续);return router.push(/login);}return Promise.reject(error);
});export default http;4. 服务端验证采用自定义中间件方式实现 自定义中间件继承MiddiwareMinxin类重写process_request.方法中 定义白名单在登录前需要操作的接口放到白名单中 a.如果不在白名单获取token验证b.验证是否被修改是否过期是否已经退出 点击退出把token存入redis,加一个过期时间任何一个问题return 401没有权限操作通过继续下一步操作 from django.http import JsonResponse
from django.utils.deprecation import MiddlewareMixin
from tools.myjwt import mjwt
from tools.myredis import r
import timeclass PermitionMiddleware(MiddlewareMixin):def process_request(self, request):# 1.定义白名单在登录前需要操作的接口放到白名单中wlist [/register/, /login/, /sendsms/]# 获取当前的urlpath request.path# 2.如果不在白名单获取token验证if path not in wlist:try:token request.headers.get(Authorization)data mjwt.jwt_decode(token)except:return JsonResponse({code: 401, mes: token不存在或者被修改})# data没问题 ↓exp int(data[exp])now int(time.time())# 判断是否过期if now exp:return JsonResponse({code: 401, mes: token已经过期不能操作})#是否退出,退出时存tokenvalue r.get_str(token)if value:return JsonResponse({code: 401, mes: 用户已经退出不能操作})# ↑↑↑3.验证是否被修改是否过期是否已经退出 点击退出把token存入redis, 加一个过期时间任何一个问题return 401没有权限操作通过继续下一步操作 不要忘记在主项目下的settings.py文件下配置写好的自定义中间件 MIDDLEWARE [corsheaders.middleware.CorsMiddleware,django.middleware.security.SecurityMiddleware,django.contrib.sessions.middleware.SessionMiddleware,django.middleware.common.CommonMiddleware,django.middleware.csrf.CsrfViewMiddleware,django.contrib.auth.middleware.AuthenticationMiddleware,django.contrib.messages.middleware.MessageMiddleware,django.middleware.clickjacking.XFrameOptionsMiddleware,# user.middleware.PermitionMiddleware, #自定义中间件
]5. 操作流程及效果图如下 1.输入手机号点击发送验证码 2.手机接收验证码 3.输入验证码后点击登录 三、通过第三方平台进行登录
三方登录这里以钉钉为例
1.准备工作 钉钉开放平台https://open.dingtalk.com/ 进入钉钉开放平台注册登录钉钉账号 注册应用配置回调地址 具体操作流程如下 1.登录开发者后台 2.创建应用 3.安全设置 4.凭证与基础信息 5.权限管理 2.前端钉钉登录界面 !-- 0-密码登录 --div classinp v-ifuser.login_type0input v-modeluser.account typetext placeholder用户名 / 手机号码 / 邮箱 classuserinput v-modeluser.password typepassword classpwd placeholder密码div classremberlabelinput typecheckbox classno v-modeluser.rememberMe/span记住我/span/labelp忘记密码/p/divbutton classlogin_btn clickshow_captcha登录/buttonp classgo_login 没有账号 router-link to/register立即注册/router-link/ppa :hrefddurl钉钉登录/a/p/divonMounted((){http.get(dingtalkLogin/).then((result) {ddurl.value result.data.url;console.log(result.data);}).catch((err) {alert(err)});
})3.后端逻辑处理 三方登录表 字段id、userid外键、方式wb、qq、dd、uid、token、retoken 处理流程 1.点击钉钉登录调用钉钉三方登录接口DingTalkLogin跳转到钉钉授权页面2.授权通过登录成功根据回调地址进行成功接口的回调 获取code、调用授权接口、获取uid根据token获取手机号查询三方登录表 不存在在用户表中进行注册同时更新三方登录表 根据uid获取用户信息生成token跳转到前端页面 # 钉钉三方登录接口
class DingTalkLogin(APIView):def get(self, request):from urllib.parse import quoteparams [fredirect_uri{quote(http://127.0.0.1:8000/user/dingtalkCallback/)},response_typecode,client_iddingrcnkswwakld0y5jx,scopeopenid,promptconsent]url https://login.dingtalk.com/oauth2/auth? (.join(params))return Response({url: url})# 钉钉回调接口(钉钉登录接口 点击登录后调用)
class DingTalkCallback(APIView):def get(self, request):authCode request.query_params.get(authCode)# 根据authCode获取用户accessTokendata {clientId: 钉钉开放平台-Client ID,clientSecret: 钉钉开放平台-Client Secret,code: authCode,grantType: authorization_code}resp requests.post(https://api.dingtalk.com/v1.0/oauth2/userAccessToken, jsondata).json()accessToken resp.get(accessToken)# 根据accessToken获取用户信息headers {x-acs-dingtalk-access-token: accessToken}resp requests.get(https://api.dingtalk.com/v1.0/contact/users/me, headersheaders).json()name resp.get(nick)uid resp.get(openId)phone resp.get(mobile)print(name)print(uid)print(phone)# ---# 登录查询三方登录表,是否存在Sfuser SfLoginModel.objects.filter(uid__exactuid).first()print(三方登录表中---)print(Sfuser)if Sfuser is None:# 注册用户表和三方登录表先判断用户表是否已有用户信息user UsersModel.objects.filter(phone__exactphone).first()print(user)if user is None:userinfo {phone:phone,username:name, password:123}userSer UsersSerializer(datauserinfo)if userSer.is_valid():userSer.save()else:return Response({code:10001,message:userSer.errors})# 存在用户写入三方登录表sfinfo {type:1,uid:uid,token:accessToken,user:user.id}sfSer SfLoginSerializer(datasfinfo)if sfSer.is_valid():sfSer.save()else:return Response({code:10001,message:sfSer.errors})else:#三方登录表中存有信息uid-获取用户信息生成token# 根据uid获取用户信息生成token跳转到前端页面user Sfuser.userSfuser.token accessTokenSfuser.save()# 生成jwt token 并返回前端payload {userid:user.id, username:user.username,exp:int(time.time()) 3600}token mjwt.jwt_encode(payload)payload[exp] int(time.time()) 3600retoken mjwt.jwt_encode(payload)query [fuserid{payload[userid]},fusername{payload[username]},ftoken{token},fretoken{retoken}]return HttpResponseRedirect(http://localhost:3000/? .join(query))
4.操作流程及效果图如下 1.登录界面点击钉钉登录 2.跳转钉钉授权登录页面 3.点击登录后通过钉钉配置的回调接口跳转自己的平台首页
