几天来,我一直在为我的单页应用程序寻找安全的身份验证和会话管理机制。从大量关于SPA和身份验证的教程和博客文章来看,将JWTs存储在localStorage或常规cookie中似乎是最常见的方法,但将JWTs用于会话并不是一个好主意,因此它不是这个应用程序的选项。
由于cookie具有httponly
标志,JavaScript将无法读取其内容,因此只要通过HTTPS传输,就可以安全地免受攻击。
挑战
以下是我遇到的具体问题。我的服务器配置为处理CORS请求。在对用户进行身份验证后,它将正确地在响应中发送cookie:
HTTP/1.1 200 OK
server: Cowboy
date: Wed, 15 Mar 2017 22:35:46 GMT
content-length: 59
set-cookie: _myapp_key=SFMyNTYBbQAAABBn; path=/; HttpOnly
content-type: application/json; charset=utf-8
cache-control: max-age=0, private, must-revalidate
x-request-id: qi2q2rtt7mpi9u9c703tp7idmfg4qs6o
access-control-allow-origin: http://localhost:8080
access-control-expose-headers:
access-control-allow-credentials: true
vary: Origin
context.axios.post(LOGIN_URL, creds).then(response => {
context.$router.push("/api/account")
}
created() {
this.axios.get(SERVER_URL + "/api/account/", {withCredentials: true}).then(response => {
//do stuff
}
}
GET /api/account/ HTTP/1.1
Host: localhost:4000
Connection: keep-alive
Accept: application/json
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36
Referer: http://localhost:8080/
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8,tr;q=0.6
我在Vue.js2上使用credentials=true实现了这个功能。从客户端站点设置凭据只是故事的一半。您还需要从服务器设置响应标头:
header("Access-Control-Allow-Origin: http://localhost:8080");
header("Access-Control-Allow-Credentials: true");
不能将通配符用于Access-Control-Allow-Origin,如下所示:
header("Access-Control-Allow-Origin: *");
当您指定Credentials:true标头时,您需要指定orgin。
Vue.http.options.credentials = true
<template>
<div id="userprofile">
<h2>User profile</h2>
{{init()}}
</div>
</template>
<script>
export default {
name: 'UserProfile',
methods: {
init: function() {
// loggin in
console.log('Attempting to login');
this.$http.get('https://localhost/api/login.php')
.then(resource => {
// logging response - Notice I don't send any user or password for testing purposes
});
// check the user profile
console.log('Getting user profile');
this.$http.get('https://localhost/api/userprofile.php')
.then(resource => {
console.log(resource.data);
})
}
}
}
</script>
<?php
header("Access-Control-Allow-Origin: http://localhost:8080");
header("Access-Control-Allow-Credentials: true");
$cookie = setcookie('user', 'student', time()+3600, '/', 'localhost', false , true);
if($cookie){
echo "Logged in";
}else{
echo "Can't set a cookie";
}
最后,userprofile.php只验证是否设置了cookie=user
<?php
header("Access-Control-Allow-Origin: http://localhost:8080");
header("Access-Control-Allow-Credentials: true");
if(isset($_COOKIE['user'])){
echo "Congratulations the user is ". $_COOKIE['user'];
}else{
echo "Not allowed to access";
}
成功登录
我正在使用Vert。后端为x,前端为AngularJS。 Vert. x服务器使用POST和GET方法接收HTTP操作。不知何故,我为每个请求获取不同的会话ID。 以下是来自我的LoginFormHandler类句柄例程的代码片段。 我正在将用户对象放入当前会话中。然后我移动到新页面并向Vert. x服务器发送POST请求。在那个POST处理程序中,我正在尝试获取会话对象: 我没有得到用户。此外,
问题内容: 我正在PHP Lumen中构建一个应用程序,该应用程序在登录时会返回令牌。我不知道如何继续进行。 我应该如何使用这些令牌维护会话? 具体来说,如果我使用reactjs或原始HTML / CSS / jQuery,如何将令牌存储在客户端,并在我为Web应用程序的安全部分提出的每个请求中发送令牌? 问题答案: 我通常要做的是将令牌保留在本地存储中,这样即使用户离开站点,我也可以保留令牌。
我正在PHP Lumen中构建一个应用程序,它在登录时返回令牌。我不知道如何继续。 我应该如何使用这些令牌维护会话? 具体来说,如果我使用reactjs或vanilla HTML/CSS/jQuery,我如何在客户端存储令牌,并在我为web应用程序的安全部分发出的每个请求中发送它们?
这可能涉及到会话cookie、服务器端会话存储以及一些会话APIendpoint,通过身份验证的web UI可以访问这些endpoint来获取当前用户信息,以帮助个性化或甚至确定客户端的角色/能力。服务器仍将强制执行保护对数据访问的规则当然,UI将仅仅使用这些信息来定制体验。 将其视为使用公共API的任何第三方客户端,并使用类似于OAuth的某种令牌系统进行身份验证。客户端UI将使用此令牌机制来验
我已经制作了我的应用程序,并将其发布到谷歌游戏商店。我使用Firebase Phone Authentication验证成员,在我将其发布到play商店之前,它运行良好,但当我从google play下载它时,它抛出一个错误: (此应用程序未被授权使用Firebase Authentification。请验证Firebase控制台中配置了正确的包名和SHA-1。[应用程序验证失败]) 我还在goo
问题内容: 我是AngularJS的新手,并仔细阅读了他们的教程,并对此有所了解。 我为我的项目准备了一个后端,每个端点都需要进行身份验证。 我想做什么 a。)我想为我的项目准备一个页面。 b。)用户在浏览器中单击URL后,根据用户是否登录,将在同一URL下向他显示主页/视图或登录页面/视图。 c。)如果用户未登录,则填写该表单,服务器将设置一个in会话,因此将根据以下身份验证对端点的所有其他请求