<div class="maincontent">
                                                            <h1 class="page-header">基於 Token 的身份驗證</h1>
                                        <div id="node-2834" class="node node-blog view-mode-full clearfix" about="/blog/2834" typeof="sioc:Item foaf:Document">      <span property="dc:title" content="基於 Token 的身份驗證" class="rdf-meta element-hidden"></span><span property="sioc:num_replies" content="7" datatype="xsd:integer" class="rdf-meta element-hidden"></span>    <div class="node-content">
        <div class="content">
                <p>最近了解下基於 Token 的身份驗證，跟大夥分享下。很多大型網站也都在用，比如&nbsp;Facebook，Twitter，Google+，Github 等等，比起傳統的身份驗證方法，Token 擴充套件性更強，也更安全點，非常適合用在 Web 應用或者移動應用上。Token 的中文有人翻譯成 “令牌”，我覺得挺好，意思就是，你拿著這個令牌，才能過一些關卡。</p>
<h2>傳統身份驗證的方法</h2>
<p>HTTP 是一種沒有狀態的協議，也就是它並不知道是誰是訪問應用。這裡我們把使用者看成是客戶端，客戶端使用使用者名稱還有密碼通過了身份驗證，不過下回這個客戶端再發送請求時候，還得再驗證一下。</p>
<p>解決的方法就是，當用戶請求登入的時候，如果沒有問題，我們在服務端生成一條記錄，這個記錄裡可以說明一下登入的使用者是誰，然後把這條記錄的 ID 號傳送給客戶端，客戶端收到以後把這個 ID 號儲存在 Cookie 裡，下次這個使用者再向服務端傳送請求的時候，可以帶著這個 Cookie ，這樣服務端會驗證一個這個 Cookie 裡的資訊，看看能不能在服務端這裡找到對應的記錄，如果可以，說明使用者已經通過了身份驗證，就把使用者請求的資料返回給客戶端。</p>
<p>上面說的就是 Session，我們需要在服務端儲存為登入的使用者生成的 Session ，這些 Session 可能會儲存在記憶體，磁碟，或者資料庫裡。我們可能需要在服務端定期的去清理過期的 Session 。</p>
<h2>基於 Token 的身份驗證方法</h2>
<p>使用基於 Token 的身份驗證方法，在服務端不需要儲存使用者的登入記錄。大概的流程是這樣的：</p>
<ol><li>客戶端使用使用者名稱跟密碼請求登入</li>
<li>服務端收到請求，去驗證使用者名稱與密碼</li>
<li>驗證成功後，服務端會簽發一個 Token，再把這個 Token 傳送給客戶端</li>
<li>客戶端收到 Token 以後可以把它儲存起來，比如放在 Cookie 裡或者 Local Storage 裡</li>
<li>客戶端每次向服務端請求資源的時候需要帶著服務端簽發的 Token</li>
<li>服務端收到請求，然後去驗證客戶端請求裡面帶著的 Token，如果驗證成功，就向客戶端返回請求的資料</li>
</ol><h2>JWT</h2>
<p>實施 Token 驗證的方法挺多的，還有一些標準方法，比如 JWT，讀作：jot ，表示：JSON Web Tokens 。JWT 標準的 Token 有三個部分：</p>
<ul><li>header</li>
<li>payload</li>
<li>signature</li>
</ul><p>中間用點分隔開，並且都會使用 Base64 編碼，所以真正的 Token 看起來像這樣：</p>
<pre class="hljs css"><span class="hljs-selector-tag">eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9</span><span class="hljs-selector-class">.eyJpc3MiOiJuaW5naGFvLm5ldCIsImV4cCI6IjE0Mzg5NTU0NDUiLCJuYW1lIjoid2FuZ2hhbyIsImFkbWluIjp0cnVlfQ</span><span class="hljs-selector-class">.SwyHTEx_RQppr97g4J5lKXtabJecpejuef8AqKYMAJc</span></pre><h3>Header</h3>
<p>header 部分主要是兩部分內容，一個是 Token 的型別，另一個是使用的演算法，比如下面型別就是 JWT，使用的演算法是 HS256。</p>
<pre class="hljs json">{
  <span class="hljs-attr">"typ"</span>: <span class="hljs-string">"JWT"</span>,
  <span class="hljs-attr">"alg"</span>: <span class="hljs-string">"HS256"</span>
}</pre><p>上面的內容要用 Base64 的形式編碼一下，所以就變成這樣：</p>
<pre class="hljs">eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9</pre><h3>Payload</h3>
<p>Payload 裡面是 Token 的具體內容，這些內容裡面有一些是標準欄位，你也可以新增其它需要的內容。下面是標準欄位：</p>
<ul><li>iss：Issuer，發行者</li>
<li>sub：Subject，主題</li>
<li>aud：Audience，觀眾</li>
<li>exp：Expiration time，過期時間</li>
<li>nbf：Not before</li>
<li>iat：Issued at，發行時間</li>
<li>jti：JWT ID</li>
</ul><p>比如下面這個 Payload ，用到了 iss 發行人，還有 exp 過期時間。另外還有兩個自定義的欄位，一個是 name ，還有一個是 admin 。</p>
<pre class="hljs json">{
 <span class="hljs-attr">"iss"</span>: <span class="hljs-string">"ninghao.net"</span>,
 <span class="hljs-attr">"exp"</span>: <span class="hljs-string">"1438955445"</span>,
 <span class="hljs-attr">"name"</span>: <span class="hljs-string">"wanghao"</span>,
 <span class="hljs-attr">"admin"</span>: <span class="hljs-literal">true</span>
}</pre><p>使用 Base64 編碼以後就變成了這個樣子：</p>
<pre class="hljs">eyJpc3MiOiJuaW5naGFvLm5ldCIsImV4cCI6IjE0Mzg5NTU0NDUiLCJuYW1lIjoid2FuZ2hhbyIsImFkbWluIjp0cnVlfQ</pre><h3>Signature</h3>
<p>JWT 的最後一部分是 Signature ，這部分內容有三個部分，先是用 Base64 編碼的 header.payload ，再用加密演算法加密一下，加密的時候要放進去一個 Secret ，這個相當於是一個密碼，這個密碼祕密地儲存在服務端。</p>
<ul><li>header</li>
<li>payload</li>
<li>secret</li>
</ul><pre class="hljs javascript"><span class="hljs-keyword">var</span> encodedString = base64UrlEncode(header) + <span class="hljs-string">"."</span> + base64UrlEncode(payload); 
HMACSHA256(encodedString, <span class="hljs-string">'secret'</span>);</pre><p>處理完成以後看起來像這樣：</p>
<pre class="hljs">SwyHTEx_RQppr97g4J5lKXtabJecpejuef8AqKYMAJc</pre><p>最後這個在服務端生成並且要傳送給客戶端的 Token 看起來像這樣：</p>
<pre class="hljs css"><span class="hljs-selector-tag">eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9</span><span class="hljs-selector-class">.eyJpc3MiOiJuaW5naGFvLm5ldCIsImV4cCI6IjE0Mzg5NTU0NDUiLCJuYW1lIjoid2FuZ2hhbyIsImFkbWluIjp0cnVlfQ</span><span class="hljs-selector-class">.SwyHTEx_RQppr97g4J5lKXtabJecpejuef8AqKYMAJc</span></pre><p>客戶端收到這個 Token 以後把它儲存下來，下回向服務端傳送請求的時候就帶著這個 Token 。服務端收到這個 Token ，然後進行驗證，通過以後就會返回給客戶端想要的資源。</p>
<h2>相關連結</h2>
<ul><li><a href="http://jwt.io/">http://jwt.io/</a></li>
<li><a href="https://github.com/firebase/php-jwt">https://github.com/firebase/php-jwt</a></li>
<li><a href="https://scotch.io/tutorials/the-anatomy-of-a-json-web-token">https://scotch.io/tutorials/the-anatomy-of-a-json-web-token</a></li>
<li><a href="https://github.com/auth0/jwt-decode">https://github.com/auth0/jwt-decode</a></li>
</ul>         </div>
  </div>
  </div>
</div>
<!-- /.node --> 
        </div>