Cookie与登录注册

预备知识

请预习 Cookie、Session、Cache-Control 等 HTTP 知识

要点：

Cookie 的特点

服务器通过 Set-Cookie 响应头设置 Cookie
浏览器得到 Cookie 之后，每次请求都要带上 Cookie
服务器读取 Cookie 就知道登录用户的信息（email）

问题

我在 Chrome 登录了得到 Cookie，用 Safari 访问，Safari 会带上 Cookie 吗
no
Cookie 存在哪
Windows 存在 C 盘的一个文件里
Cookie会被用户篡改吗？
可以，下节课会讲 Session 来解决这个问题，防止用户篡改
Cookie 有效期吗？
默认有效期20分钟左右，不同浏览器策略不同
后端可以强制设置有效期，具体语法看 MDN
Cookie 遵守同源策略吗？
也有，不过跟 AJAX 的同源策略稍微有些不同。
当请求 qq.com 下的资源时，浏览器会默认带上 qq.com 对应的 Cookie，不会带上 baidu.com 对应的 Cookie
当请求 v.qq.com 下的资源时，浏览器不仅会带上 v.qq.com 的Cookie，还会带上 qq.com 的 Cookie
另外 Cookie 还可以根据路径做限制，请自行了解，这个功能用得比较少。
今天讲的Cookie、Session、Cache-Control都是响应头里面的内容，请求头没有相关内容
Cache-Control用于控制缓存的，Cookie的意思是曲奇饼
请求和响应

image.png
JS发送请求

image.png

注册

我们给原先创造的server添加一个路由，路径是sign_up，并创建相应的文件，以便访问

image.png

image.png
我们做一个登录界面

image.png
我们希望当点击提交的时候，会连带这些输入信息提交到服务器，服务器看看这些是不是正确的。
我们打开这个https://www.bootcdn.cn来找jQuery的链接

收集用户输入的东西，并存入哈希中

let hash = {}
$('#signUpForm').on('submit', (e)=>{
    e.preventDefault()
    let need = ['email', 'password', 'password_confirmation']
    need.forEach((name)=>{
        let value = $('#signUpForm').find(`[name=${name}]`).val()
        hash[name] = value
    })
    console.log(hash)
})

接下来，我们就可以使用jquery的ajax发送ajax，问，下面这种ajax返回的会是什么？是404，还是一串html？

let hash = {}
$('#signUpForm').on('submit', (e)=>{
    // 拿到用户提交的信息并传入hash中
    e.preventDefault()
    let need = ['email', 'password', 'password_confirmation']
    need.forEach((name)=>{
        let value = $('#signUpForm').find(`[name=${name}]`).val()
        hash[name] = value
    })
    // 发送ajax
    $.post('/sign_up', hash)
        .then(()=>{console.log('success')}, ()=>{console.log('error')})
})

返回的是一串字符串，因为我们在路由那边写了，只要是这个路径就是200，其他什么都没管，没有限定请求方式等。

image.png

image.png
我们可以区分一下这个路径及方式

image.png
我们点击提交的时候，还是200，返回的response是空的。接下来我们需要读取用户提交的数据

image.png
email=1&password=2&password_confirmation=3，这个形式的代码，node不好读取，因为上传是一段一段上传的，我们需要借助工具。这个跟TCP有关，第四部分不一块上传
google搜索node http get post data，

image.png
点击之后，后台会打印字符串，前端发送请求

image.png

image.png
解析这个拿到的字符串

image.png

image.png
我们对拿到的字符串解析后进行验证

image.png

image.png
当我们前后端分离后，我们需要定前后端协议，我们返回的信息可以使用JSON，JS就可以读取JSON语法数据

image.png
这样打印出来的是字符串还是对象呢？

image.png

image.png
答案是符合JSON对象语法的字符串，我们传入JSON.parse中去，就是一个对象了

image.png

image.png
我们每次都需要进行JSON.parse一下，比较麻烦，其实如果在server那边声明是JSON，jQuery就会自动识别的；response.setHeader('Content-Type', 'application/json;charset=utf-8')，然后使用request.responseJSON就可以拿到的，这是基于协议的，因此可以自动识别
这样我们就可以针对错误，发起不同提示

image.png

image.png
前端验证，在POST之前展示错误并return

image.png
后端验证是一定需要的，前端验证不一定要，因为有的直接使用curl发送请求了，并不通过JS

[

image.png

登录以及Cookie

如果服务器发现密码和邮箱等正确，一般会存下来，但是密码一般不存。
我们需要有文件存储数据，创建一个文件，专门用于存储数据
之前拿到的数据需要使用decodeURIComponent()进行转译

image.png
我们可以通过后台将这个新的账户存入到数据文件中
数据存储必须使用字符串，不可以使用对象，所以需要使用JSON.stringify
我们存入的时候，需要遍历，看看有没有存进去，如果存进去，就不要再存了
理论上，我们不能存用户的密码，应该存加密后的东西，只要后面能对上就代表输对了
我们再添加一个sing_in路由
假设登陆成功，我们跳到首页。
问题1：登录成功与否都可以到首页，这样有问题
问题2：能不能登录成功有名字显示呢
这就是引入今天的主题，需要一个Cookie，即告诉服务器，或者浏览器，我是谁；在登录成功的一瞬间，我们需要Cookie
可以查询http set cookie
设置好之后，点击preserver log阻止页面刷新，可以看到response有特殊的响应头，下面所有的请求，只要是相同的源，都会携带这个Cookie

image.png

image.png
有了这个标识信息，网页就可以认得是谁访问了
总结：
1. 服务器通过 Set-Cookie 响应头设置 Cookie
2. 浏览器得到 Cookie 之后，每次请求都要带上 Cookie
3. 服务器读取 Cookie 就知道登录用户的信息（email）
问题
1. 我在 Chrome 登录了得到的 Cookie，用 Safari 访问，Safari会带上Cookie吗？
  答案：不会
2. Cookie存在哪？
  Window 存在 C 盘的一个文件里
3. 票能作假吗？
  可以
4. Cookie有效期吗？
  默认有效期20分钟左右
  后端可以强制设置有效期
  HttpOnly是可以防止用户使用JS修改的，但是还是可以使用手动
  
  image.png
拿到Cookie使用线程现成的框架就好
退出登录，点击X就好了

image.png
总结：

image.png

server代码

var http = require('http')
var fs = require('fs')
var url = require('url')
var port = process.argv[2]
if(!port){
    console.log('请指定端口奥好不好？\nnode server.js 8888 这样不会吗？')
    process.exit(1)
}
var server = http.createServer(function(request, response){
    var parsedUrl = url.parse(request.url, true)
    var pathWithQuery = request.url
    var queryString = ''
    if(pathWithQuery.indexOf('?') >= 0){queryString=pathWithQuery.substring(pathWithQuery.indexOf('?'))}
    var path = parsedUrl.pathname
    var query = parsedUrl.query
    var method = request.method
    /*********从这里开始看，上面不要看*********/
    console.log('方方说：含查询字符串的路径为\n' + pathWithQuery)

    if(path === '/'){
        let string = fs.readFileSync('./index.html', 'utf-8')  //同步读取网页文件
        let cookies = request.headers.cookie.split('; ')
        let hash = {}
        for(let i=0; i<cookies.length; i++){
            let parts = cookies[i].split('=')
            let key = parts[0]
            let value = parts[1]
            hash[key] = value
        }
        let email = hash.sign_in_email
        let users = fs.readFileSync('./db/users', 'utf8')
        users = JSON.parse(users)
        let foundUser
        for(let i=0; i< users.length; i++){
            if(users[i].email === email){
                foundUser = users[i]
                break
            }
        }
        if(foundUser){
            string = string.replace('__password__', foundUser.password)
        }else{
            string = string.replace('__password__', '不知道')
        }
        response.statusCode = 200
        response.setHeader('Content-Type', 'text/html;charset=utf-8')
        response.write(string)    // 将网页文件写入到response中返回
        response.end()
    }else if(path==='/sign_up' && method === 'GET'){
        let string = fs.readFileSync('./sign_up.html', 'utf-8')
        response.statusCode = 200
        response.setHeader('Content-Type', 'text/html;charset=utf-8')
        response.write(string)
        response.end()
    }else if(path==='/sign_up' && method === 'POST'){
        readBody(request).then((body)=>{
            let strings = body.split('&')    // ['email=1', 'password=2', 'password_confirmation=3']
            let hash = {}
            strings.forEach((string)=>{
                let parts = string.split('=')    // ['email', '1']
                let key = parts[0]
                let value = parts[1]
                // 进行转译，否则会拿不到@，使用%40代替
                hash[key] = decodeURIComponent(value)    // hash['email'] = '1'
            })
            // let email = hash['email']
            // let password = hash['password']
            // let password_confirmation = hash['password_confirmation']
            let {email, password, password_confirmation} = hash
            if(email.indexOf('@') === -1){
                response.statusCode = 400
                response.setHeader('Content-Type', 'application/json;charset=utf-8')
                // 我们返回JSON数据，这样就可以实现选择性展示出错误信息，最外端的''不属于JSON，只表示是一个字符串
                // JS可以理解JSON语法
                response.write(`{
                    "errors": {
                        "email": "invalid"
                    }
                }`)
            }else if(password !== password_confirmation){
                response.statusCode = 400
                response.write('password not match')
            }else{
                // 这个users拿到之后是一个字符串
                var users = fs.readFileSync('./db/users', 'utf8')
                try{
                    users = JSON.parse(users)    // []
                }catch{
                    users = []
                }
                let inUse = false
                for(let i=0; i<users.length; i++){
                    let user = users[i]
                    if(user.email === email){
                        inUse = true
                        break;
                    }
                }
                if(inUse){
                    response.statusCode = 400
                    response.write('email in use')
                }else{
                    users.push({email: email, password: password})
                    // 对象不能直接存，我们需要使用字符串化
                    var usersString = JSON.stringify(users)
                    fs.writeFileSync('./db/users', usersString)
                    response.statusCode = 200
                }

            }
            response.end()
        })
    }else if(path === '/sign_in' && method === 'GET'){
        let string = fs.readFileSync('./sign_in.html', 'utf-8')
        response.statusCode = 200
        response.setHeader('Content-Type', 'text/html;charset=utf-8')
        response.write(string)
        response.end()
    }else if(path === '/sign_in' && method === 'POST'){
        readBody(request).then((body)=>{
            let strings = body.split('&')    // ['email=1', 'password=2', 'password_confirmation=3']
            let hash = {}
            strings.forEach((string)=>{
                let parts = string.split('=')    // ['email', '1']
                let key = parts[0]
                let value = parts[1]
                // 进行转译，否则会拿不到@，使用%40代替
                hash[key] = decodeURIComponent(value)    // hash['email'] = '1'
            })
            // let email = hash['email']
            // let password = hash['password']
            // let password_confirmation = hash['password_confirmation']
            let {email, password} = hash
            var users = fs.readFileSync('./db/users', 'utf8')
            try{
                users = JSON.parse(users)    // []
            }catch{
                users = []
            }
            let found
            for(let i=0;i<users.length;i++){
                if(users[i].email === email && users[i].password === password){
                    found = true
                    break
                }
            }
            console.log(found)
            if(found){
                // 设置cookie
                response.setHeader('Set-Cookie', `sign_in_email=${email}; HttpOnly`)
                response.statusCode = 200
            }else{
                response.statusCode = 401
            }
            response.end()
        })
    }else if(path==='/xxxx'){
        response.statusCode = 200
        response.setHeader('Content-Type', 'text/json;charset=utf-8')
        // 加一个后台的响应头，告诉浏览器，这个域名可以访问我的后台
        response.setHeader('Access-Control-Allow-Origin', 'http://frank.com:8001')
        // 这边其实返回的是一个字符串，这个字符串刚好符合JSON语法，此处绝对不是一个对象
        response.write(`
            {
                "note": {
                    "to": "小谷",
                    "from": "芳芳",
                    "heading": "打招呼",
                    "content": "hi"
                }
            }
        `)
        response.end()
    }else if(path='/main.js'){
        let string = fs.readFileSync('./main.js')  //同步读取网页文件
        response.statusCode = 200
        response.setHeader('Content-Type', 'text/javascript;charset=utf-8')
        response.write(string)    // 将网页文件写入到response中返回
        response.end()
    }else{
        response.statusCode = 404
        response.setHeader('Content-Type', 'text/html;charset=utf-8')
        response.write('呜呜呜')
        response.end()
    }
    /*********代码结束，下面不要看*********/
})
function readBody(request){
    return new Promise((resolve, reject)=>{
        let body = [];    // 请求体
        // request监听data事件，每次data事件会给一小块数据
        request.on('data', (chunk) => {
            // 将一小块数据放入body中
            body.push(chunk);
        }).on('end', () => {
            // end就是上传结束，将body里面的数据全部连成字符串
            body = Buffer.concat(body).toString();
            resolve(body)
        })
    })
}
server.listen(port)
console.log('监听 ' + port + ' 成功\n请在空中转体720度然后用电饭煲打开 http://localhost:' + port)

Cookie与登录注册

预备知识

注册

登录以及Cookie

推荐阅读更多精彩内容