WebApi增長Oauth2認證

時間 2019-11-09

標籤 webapi 增長 oauth2 oauth 認證简体版

原文原文鏈接

前期搭建可看這篇博文：http://www.javashuo.com/article/p-xdmkgqii-cr.html，此博文是在本篇博文實踐才產生的，在實踐中，也產生了幾個問題，但願可以共同交流，一塊兒進步。html

在這次測試，咱們分爲先後端：後端：WebAPIvue

前段 Jquery jquery

主要是測試，對於前段框架，我也不怎麼熟悉，好比VUE，這些相似風格的，我熟悉知識 Boostrap 這種簡單樣式框架，不得不說，這是個人悲哀ajax

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Web;
 5 
 6 namespace WebAPI5.Models
 7 {
 8     /// <summary>
 9     /// 用戶信息類
10     /// </summary>
11     public class UserInfo
12     {
13        /// <summary>
14        /// ID
15        /// </summary>
16         public int id { get; set; }
17         /// <summary>
18         /// 用戶姓名
19         /// </summary>
20         public string UserName { get; set; }
21         /// <summary>
22         /// 用戶密碼
23         /// </summary>
24         public string UserPwd { get; set; }
25         /// <summary>
26         /// 性別   0 是女 1 是男
27         /// </summary>
28         public int UserSex { get; set; }
29 
30 
31     }
32 }

 1 using System;
 2 using System.Collections.Generic;
 3 using System.Linq;
 4 using System.Net;
 5 using System.Net.Http;
 6 using System.Web.Http;
 7 using WebAPI5.Models;
 8 
 9 namespace WebAPI5.Controllers
10 {
11     [Authorize]
12     public class BlogController : ApiController
13     {
14         //查詢全部員工
15         [HttpGet]
16         public IHttpActionResult GetAll()
17         {
18             List<UserInfo> uf = new List<UserInfo>() {
19                  new UserInfo {  id=1, UserName="陳粒", UserPwd="weeweewwee", UserSex=0},
20                  new UserInfo {  id=1, UserName="小半", UserPwd="qdaqwdqqd", UserSex=1},
21                  new UserInfo {  id=1, UserName="Grain", UserPwd="dasad", UserSex=0},
22                  new UserInfo {  id=1, UserName="Cgrain", UserPwd="weeadadweewwee", UserSex=1}
23             };
24             return Json(uf);
25         }
26     }
27 }

Controllers

 1   public override async Task GrantResourceOwnerCredentials(OAuthGrantResourceOwnerCredentialsContext context)
 2         {
 3 
 4             context.OwinContext.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" });
 5 
 6             string usepwd = context.Password;
 7             string usename = context.UserName;
 8             ////判斷是否有這個帳號，有才能訪問
 9             if (usename.Contains("C")&& usepwd.Contains("C"))
10             {  
11                 context.SetError("invalid_grant", "The username or password is incorrect");
12                 return;
13             }
14             var identity = new ClaimsIdentity(context.Options.AuthenticationType);
15             identity.AddClaim(new Claim("sub", context.UserName)); 
16             context.Validated(identity);
17          
18         }

SimpleAuthorizationServerProvider

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6     <meta charset="utf-8" />
  7     <title>你的 ASP.NET 應用程序</title>
  8     <script src="jquery-1.10.2.min.js"></script>
  9 </head>
 10 
 11 <body>
 12     <input type="text" id="username" />
 13     <input type="text" id="pwd" />
 14     <input type="button" onclick="add()" value="Come On" />
 15     <input type="button" onclick="showdata()" value="顯示data" />
 16     <input type="button" onclick="reftoken()" value="刷新token" />
 17 
 18     <div>
 19         <ul id="My_ul"></ul>
 20     </div>
 21     <script>
 22         var token;
 23         var refresh_token;
 24         function add() {
 25             $.ajax({
 26                 url: "http://localhost:1985/token",
 27                 dataType: "Json",
 28                 method: "POST",
 29                 data: {
 30                     "grant_type": "password",
 31                     "UserName": $("#username").val(),
 32                     "Password": $("#pwd").val()
 33 
 34                 },
 35                 success: function (data) {
 36                     console.log(data);
 37                     token = data["access_token"];
 38                     refresh_token = data["refresh_token"];
 39                     console.log(refresh_token);
 40                     $.ajax({
 41                         url: "http://localhost:1985/api/Blog/GetAll",
 42                         dataType: "Json",
 43                         method: "GET",
 44                         headers: {
 45                             "Authorization": "Bearer  " + token   //把登陸獲取的Token加入到http請求頭中
 46                         },
 47                         success: function (data) {
 48 
 49                             console.log(data);
 50                         },
 51                         error: function (error) {
 52                             alert(error["message"]);
 53 
 54                         }
 55 
 56                     });
 57                 },
 58                 error: function (error) {
 59 
 60                     alert(error["responseJSON"]["error_description"]);
 61                     //console.log(error);
 62                     //                 alert(error["error_description"]);
 63                 }
 64 
 65             });
 66 
 67 
 68         };
 69         function showdata() {
 70             $.ajax({
 71                 url: "http://localhost:1985/api/Blog/GetAll",
 72                 dataType: "Json",
 73                 method: "GET",
 74                 headers: {
 75                     "Authorization": "Bearer  " + token   //把登陸獲取的Token加入到http請求頭中
 76                 },
 77                 success: function (data) {
 78                     var html = "";
 79                     for (index = 0; index < data.length; index++) {
 80                         html += "<li> " + data[index]["UserName"] + "  </li>";
 81 
 82 
 83                     }
 84                     $("#My_ul").append(html)
 85                     console.log(data);
 86                 },
 87                 complete: function (xhr, ts) {
 88                    
 89                     // console.log(); 
 90                     // console.log
 91                     // (ts);
 92                     if (xhr.status== 401 ) {
 93                         reftoken();
 94                         showdata();
 95                     }
 96                 }
 97                 // },
 98                 // error: function (error) {
 99                 //     alert(error["responseJSON"]["message"]); 
100 
101                 // }
102 
103             });
104 
105 
106         }
107 
108         function reftoken() { 
109             $.ajax({
110                 url: "http://localhost:1985/token",
111                 dataType:"Json",
112                 type:"POST", 
113                 data: {
114                     "grant_type": "refresh_token",
115                     "refresh_token": refresh_token
116                 }, 
117                 success: function (data) { 
118                     console.log(data)
119                     token=data["access_token"];
120                     refresh_token=data["refresh_token"];
121                 
122                 },
123                 error: function (error) {
124                     console.log(error);  
125                 }
126 
127             });
128 
129 
130         }
131     </script> 
132 </body>
133 
134 </html>

Html

爲了便於觀察，我expires_in 設置一分鐘後端

這裏報錯是由於咱們的token 已通過期，爲了避免影響用戶操做，咱們刷新了token，在從新請求了數據api

隨後我又點擊了顯示數據按鈕安全

顯示了兩次：app

爲了便於觀察，咱們修改已經ajax框架

showdata 方法，咱們註釋掉token過時從新獲取的方法調用前後端分離

點擊請求都沒有了數據

咱們刷新token

咱們忽然發現，剛剛獲取的token過時（其實沒過時的）

ajax 請求，每次都會進入這個方法，因此纔會有咱們的 if 判斷，只有當請求是401 的時候（這裏能夠再詳細一點，指出錯誤請求的類型或者緣由，更精確的判斷）

好了，這裏就是簡單的介紹了，當時這樣，我也發現了幾個問題：

第一個問題：儘管咱們用到了api的受權，但是，如何防止他大規模的數據調用。

第二個問題：先後端分離的項目，或者說未分離的項目，確定不是這樣調用的，這樣子，我總根據不安全（只能把一些技術在我之下的大佬給攔截，技術在我之上的大佬，估計看到這篇文件就在呵呵了，心想：要是每一個api都這樣，我就不難了 o(╥﹏╥)o），好了，這個問題就是：如何標準化？沒用到vue 前段只是簡單的使用 boostrap +ajax （自我感受這個問題也問到了也許有部分人的心聲，並非每一個人作的項目都比較超強，其實還有許多大佬們，許多普通人，作的項目都比較普通，還有不少人還在苦海中掙扎，好比我），如何更安全的使用標準化？

第三個問題：自定義修改他的返回：好比說：

如何修改呀？？

第四個問題：咱們返回給前段的token ，須要加密不？

以爲好就點個關注點個贊，留下你的思路或者說改進點哦 ☺ 還能夠留下大佬有話的代碼

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。