当前位置：首页 > 后端技术 > PHP

使用JWT（JsonWebToken）实现登录认证

时间：2023-03-29 23:37:46 PHP

今天我们将通过实例来描述JWT（JsonWebToken）的实际应用，即如何使用前端axios和后端PHP实现的过程用户登录认证。本文涉及的重要知识点：axios异步请求：基于axios-promise的HTTP请求客户端php-jwt库：https://github.com/firebase/p...HTML5相关知识，所以在阅读本文之前，请先理解以上知识点和JWT的基本概念，这样你会很快理解我们文章中的示例代码。准备用户登录认证流程：用户使用用户名和密码向服务器请求服务器验证用户的信息服务器验证后向用户发送token客户端存储token并在每次请求时附加token值服务器验证令牌值，并返回数据，所以现在我们从这个过程开始。HTML我们的HTML结构如下：一个登录表单，供用户输入用户名和密码，还有一个提交按钮；一是登录成功后的显示信息。用户名

密码

登录

演示用户名和密码均为demo。

欢迎，您已登录，Exit>>

详细代码可以下载demo源码查看。这里我们使用Bootstrap3的经典风格。Javascript前端Javascript异步请求，我们使用axios库，当然你也可以使用jQuery的ajax方法。首先介绍axios库：按照流程，1.提交登录表单，发送用户名和密码到PHP后台，2.后台验证成功后，会发送一个token给前台，3.前台拿这个token请求用户权限访问，4.后台验证token，认证，返回相应的结果。下面的js代码实现了步骤1和3。<脚本>document.querySelector('#sub-btn').onclick=function(){letusername=document.querySelector('#username').value;letpassword=document.querySelector('#password').value;varparams=newURLSearchParams();params.append('用户',用户名);params.append('通过',密码);axios.post('user.php?action=login',params).then((response)=>{if(response.data.result==='success'){//本地存储tokenlocalStorage.setItem('jwt',response.data.jwt);//把token加入header里axios.defaults.headers.common['X-token']=response.data.jwt;axios.get('user.php').then(function(response){if(response.data.result==='success'){document.querySelector('#showpage').style.display='none';document.querySelector('#user').style.display='block';document.querySelector('#una我').innerHTML=response.data.info.data.username;}别的{}}）;}else{console.log(response.data.msg);}}).catch(function(error){console.log(error);});}很明显，当登录成功后，立即使用本地存储令牌，然后将这个令牌放在请求头中，然后在后台再次请求另一个用户信息接口，如果成功，则显示用户信息。如果要注销，我们不需要再次请求后端接口，只需要在前端清空本地存储就可以了。document.querySelector('#logout').onclick=function(){localStorage.removeItem('jwt');document.querySelector('#showpage').style.display='block';document.querySelector('#user').style.display='none';}登录成功后，当我们刷新页面时（再次请求需要登录才能访问的页面），需要判断是否有token在本地存储中。如果有token，则拿去后台接口验证token是否合法。如果没有问题，它会显示用户相关的信息。如果验证失败，可能是因为过去的令牌或伪造的令牌。让jwt=localStorage.getItem('jwt');if(jwt){axios.defaults.headers.common['X-token']=jwt;axios.get('user.php').then(function(response){if(response.data.result==='success'){document.querySelector('#showpage').style.display='none';document.querySelector('#user').style.display='block';document.querySelector('#uname').innerHTML=response.data.info.data.username;}else{document.querySelector('#showpage').style.display='block';console.log(response.data.msg);}}).catch(function(error){console.log(error);});}else{document.querySelector('#showpage').style.display='block';}我们为PHP后端使用了一个特殊的JWT库：php-jwt使用composer安装php-jwt。PHP接收到登录用户名和密码后，验证用户名和密码是否正确（实际开发要结合数据库，从数据库中获取用户名和密码对比，本例只做简单验证，用于演示），如果用户名和密码正确，那么就会颁发token，在token中，我们可以定义token的颁发者，过期时间等，返回给前端。注意，在发行代币的时候，我们需要定义一个密钥，这个密钥是私钥，在实际应用中是保密的，不能与他人共享。需要'vendor/autoload.php';使用\Firebase\JWT\JWT;定义（'KEY'，'1gHuiop975cdashyex9Ud23ldsvm2Xq'）;//Key$res['result']='failed';$action=isset($_GET['action'])?$_GET['action']:'';if($action=='login'){if($_SERVER['REQUEST_METHOD']=='POST'){$username=htmlentities($_POST['user']);$password=htmlentities($_POST['pass']);if($username=='demo'&&$password=='demo'){//用户名和密码正确，则发出tokon$nowtime=time();$token=['iss'=>'http://www.helloweba.net',//发行者'aud'=>'http://www.helloweba.net',//jwt的用户'iat'=>$nowtime,//发行时间'nbf'=>$nowtime+10,//什么时候可以使用jwt'exp'=>$nowtime+600,//过期时间-10min'data'=>['userid'=>1,'username'=>$username]];$jwt=JWT::编码($to肯，钥匙）；$res['结果']='成功';$res['jwt']=$jwt;}else{$res['msg']='用户名或密码错误！';}}echojson_encode($res);}else{$jwt=isset($_SERVER['HTTP_X_TOKEN'])?$_SERVER['HTTP_X_TOKEN']:'';if(empty($jwt)){$res['msg']='您没有访问权限。';回声json_encode($res);出口;}尝试{JWT::$leeway=60;$decoded=JWT::decode($jwt,KEY,['HS256']);$arr=(array)$decoded;if($arr['exp']

上一篇：开发了一个微信群支付入口功能

下一篇：CentOS-6.7编译安装PHP-7.1.5

使用JWT（JsonWebToken）实现登录认证相关文章

最新推荐

猜你喜欢