分类 Web 中的文章

Oauth2.0

Oauth2.0 什么是Oauth2.0? OAuth 2.0 是目前最流行的授权机制,用来授权第三方应用,获取用户数据。 简单说:OAuth 就是一种授权机制。数据的所有者告诉系统,同意授权第三方应用进入系统,获取这些数据。系统从而产生一个短期的进入令牌(token),用来代替密码,供第三方应用使用。 令牌与密码 令牌(token)与密码(password)的作用是一样的,都可以进入系统,但是有三点差异。 - (1)令牌是短期的,到期会自动失效,用户自己无法修改。密码一般长期有效,用户不修改,就不会发生变化。 (2)令牌可以被数据所有者撤销,会立即失效。以上例而言,屋主可以随时取消快递员的令牌。密码一般不允许被他人撤销。 (3)令牌有权限范围(scope),比如只能进小区的二号门。对于网络服务来说,只读令牌就比读写令牌更安全。密码一般是完整权限。 上面这些设计,保证了令牌既可以让第三方应用获得权限,同时又随时可控,不会危及系统安全。这就是 OAuth 2.0 的优点。 OAuth 2.0 对于如何颁发令牌?四种授权类型(authorization grant) 授权码(authorization code)方式 授权码方式指的是:第三方应用先申请一个授权码,然后再用该码获取令牌。 这种方式是最常用的流程,安全性也最高,它适用于那些有后端的 Web 应用。授权码通过前端传送,令牌则是储存在后端,而且所有与资源服务器的通信都在后端完成。这样的前后端分离,可以避免令牌泄漏。 - 第一步:A网站生成授权链接,用户点击后跳转到B网站,授权用户数据给A网站使用。 https://b.com/oauth/authorize? response_type=code& client_id=CLIENT_ID& redirect_uri=CALLBACK_URL& scope=read 主要参数: response_type参数表示要求返回授权码(code) client_id参数让 B 知道是谁在请求 redirect_uri参数是 B 接受或拒绝请求后的跳转网址 scope参数表示要求的授权范围(这里是只读) 第二步:跳转到B网站后,需要用户确认授权,用户确认后跳转到第一步的redirect_url,并返回一个授权码。 https://a.com/callback?code=AUTHORIZATION_CODE 第三步:A网站拿到授权码后,后台请求B网站,获取令牌。 https://b.com/oauth/token? client_id=CLIENT_ID& client_secret=CLIENT_SECRET& grant_type=authorization_code& code=AUTHORIZATION_CODE& redirect_uri=CALLBACK_URL 主要参数 client_id参数和client_secret参数用来让 B 确认 A 的身份(client_secret参数是保密的,因此只能在后端发请求)。 grant_type参数的值是AUTHORIZATION_CODE,表示采用的授权方式是授权码。 code参数是上一步拿到的授权码。 redirect_uri参数是令牌颁发后的回调网址。 第四步:B 网站收到请求以后,就会颁发令牌。具体为向第三 步的redirect_url发送一段令牌json。……

阅读全文

WebStorm

当执行webpack -v报错时 One CLI for webpack must be installed. These are recommended choices 先全局安装webpack和webpack-cli cnpm install webpack -g cnpm install webpack-cli -g 再局部安装webpack和webpack-cli cnpm install webpack –save-dev cnpm install webpack-cli –save-dev……

阅读全文

HTML

list-style-type: 默认点 none 无 square 方格 后代组合器 li em 相邻兄弟选择器 h1 + p 根据状态确定样式 a:link 链接颜色 a:visited 访问后的颜色 a:hover{ text-decoration: none; 覆盖后,链接去除下划线 } body h1 + p .special { color: yellow; background-color: black; padding: 5px; } 上面的代码为以下元素建立样式:在之内,紧接在后面的元素的内部,类名为special。 refer to : https://developer.mozilla.org/zh-CN/docs/Web/HTML……

阅读全文

HTML

disabled 布尔熟悉,可以使输入框变得不可选(变灰色) 例如: <!-- 使用disabled属性来防止终端用户输入文本到输入框中 --> <input type="text" disabled> 粗体 有语义 斜体 有语义 下划线 无语义 当链接到同一网站的其他位置时,你应该使用相对链接(当链接到另一个网站时,你需要使用绝对链接) 下标 上标 有大量的HTML元素可以来标记计算机代码: : 用于标记计算机通用代码。 : 对保留的空格(通常是代码块)——如果您在文本中使用缩进或多余的空白,浏览器将忽略它,您将不会在呈现的页面上看到它。但是,如果您将文本包含在标签中,那么空白将会以与你在文本编辑器中看到的相同的方式渲染出来。 : 用于标记具体变量名。 : 用于标记输入电脑的键盘(或其他类型)输入。 : 用于标记计算机程序的输出。 HTML 还支持将时间和日期标记为可供机器识别的格式的 元素。例如: 2016年1月20日 html5包括,,,,,和元素。 div中的img和p可替换成 figure中的img和figcaption html5 中的 和 元素 总而言之,如果图像对您的内容里有意义,则应使用HTML图像。 如果图像纯粹是装饰,则应使用CSS背景图片 可点击图片创建 <a href="https://developer.mozilla.org/en-US/"> <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png" alt="MDN logo" /> </a> refer to : https://developer.mozilla.org/zh-CN/docs/Web/HTML……

阅读全文

HTML&CSS

第一课 常见HTML术语: 元素(elements): <h1>-<h6>、<p>、<a>,<div>,<span>,<strong>,和<em>元素,等等。 自封闭元素 <br><embed><hr><img><input><link><meta><param><source><wbr> 标签(tags): <a>...</a> 属性(attribute): <a href="http://shayhowe.com/">Shay Howe</a> 典型的HTML文档结构 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hello World</title> </head> <body> <h1>Hello World</h1> <p>This is a web page.</p> </body> </html> CSS术语 选择器 在CSS中,选择器后跟花括号,{}其中包含要应用于所选元素的样式。这里的选择器以所有<p>元素为目标 属性 p { color: ...; font-size: ...; } 值 p { color: orange; font-size: 16px; } 选择器分类 类型选择器 div { ... } 类选择器……

阅读全文