ASP.NET MVCレッスンB.ジョンソン

レッスンの目的。 JSON形式での作業を学びます。 jsonを操作するためのツール。 facebookおよびvkontakteからデータを受信することにより、サードパーティのリクエスト、承認を作成します。 json(rewrite authorization)と連携するAjax。 サイトAPI。



JsonとJson.net


Jsonは、Javascriptベースのテキストデータ形式です。

Jsonのサンプルデータ:

{ "firstName": "", "lastName": "", "address": { "streetAddress": " ., 101, .101", "city": "", "postalCode": 101101 }, "phoneNumbers": [ "812 123-1234", "916 123-4567" ] }
      
      









私の実践では、yandex.maps api、facebook api、vk api、bronni api(これはそのような旅行ポータルです)などのアプリケーションで、さらにはビットコインウォレットを使用してjsonで作業しました。 これを行うには、 http: //james.newtonking.com/pages/json-net.aspxのJSON.netライブラリを使用します。

さらに詳しく調べてみましょう。





修正する

 PM> Get-Package Json.net Id Version Description/Release Notes -- ------- ------------------------- Newtonsoft.Json 4.5.1 Json.NET is a popular high-performance... PM> Install-Package Newtonsoft.Json Successfully installed 'Newtonsoft.Json 4.5.11'. Successfully added 'Newtonsoft.Json 4.5.11' to LessonProject.
      
      







ドキュメント

このリンクはドキュメントです。 オブジェクトをjson形式に、またはその逆に単純に変換することから始めます。 LessonProject.Consoleを作成し、それをデフォルトのプロジェクトにします。 ユーザータイプを追加:



 public class User { public string Id { get; set; } public string Name { get; set; } public string FirstName { get; set; } public string MiddleName { get; set; } public string LastName { get; set; } public string UserName { get; set; } public string Gender { get; set; } public string Email { get; set; } }
      
      







オブジェクトを作成し、jsonに変換します。

 var user = new User() { Id = "404", Email = "chernikov@gmail.com", UserName = "rollinx", Name = "Andrey", FirstName = "Andrey", MiddleName = "Alexandrovich", LastName = "Chernikov", Gender = "M" }; var jsonUser = JsonConvert.SerializeObject(user); System.Console.Write(jsonUser); System.Console.ReadLine();
      
      







結果:

 {"Id":"404","Name":"Andrey","FirstName":"Andrey","MiddleName":"Alexandrovich","LastName":"Chernikov","UserName":"rollinx","Gender":"M","Email":"chernikov@gmail.com"}
      
      





逆を試してみましょう:

  var jsonUserSource = "{\"Id\":\"405\",\"Name\":\"Andrey\",\"FirstName\":\"Andrey\",\"MiddleName\":\"Alexandrovich\",\"LastName\":\"Chernikov\",\"UserName\":\"rollinx\",\"Gender\":\"M\",\"Email\":\"chernikov@gmail.com\"}"; var user2 = JsonConvert.DeserializeObject<User>(jsonUserSource);
      
      







そして結果が得られます:







つまり 双方向に機能します。 しかし、もう少し複雑です。 たとえば、列挙型の男性と女性を介して性別を設定し、男性と女性を正確にjsonに渡す必要があります。 Idは数値です:

 public class User { public enum GenderEnum { Male, Female } public int Id { get; set; } public string Name { get; set; } public string FirstName { get; set; } public string MiddleName { get; set; } public string LastName { get; set; } public string UserName { get; set; } public GenderEnum Gender { get; set; } public string Email { get; set; } }
      
      







最初の部分を試します:

 var user = new User() { Id = 404, Email = "chernikov@gmail.com", UserName = "rollinx", Name = "Andrey", FirstName = "Andrey", MiddleName = "Alexandrovich", LastName = "Chernikov", Gender = User.GenderEnum.Male }; var jsonUser = JsonConvert.SerializeObject(user);
      
      







結果:

 {"Id":404,"Name":"Andrey","FirstName":"Andrey","MiddleName":"Alexandrovich","LastName":"Chernikov","UserName":"rollinx","Gender":0,"Email":"chernikov@gmail.com"}
      
      





追加:

 [JsonConverter(typeof(StringEnumConverter))] public enum GenderEnum { Male, Female }
      
      







結果:

 {"Id":404,"Name":"Andrey","FirstName":"Andrey","MiddleName":"Alexandrovich","LastName":"Chernikov","UserName":"rollinx","Gender":"Male","Email":"chernikov@gmail.com"}
      
      







すでに良い。 確認してください-すべて大丈夫です。 微妙なチューニングルールを定義する他の属性を調べます。 たとえば、json形式では、first_name型のハンガリー語レコードに名前があります。

 [JsonObject] public class User { [JsonConverter(typeof(StringEnumConverter))] public enum GenderEnum { Male, Female } [JsonProperty("id")] public int Id { get; set; } [JsonProperty("name")] public string Name { get; set; } [JsonProperty("first_name")] public string FirstName { get; set; } [JsonProperty("middle_name")] public string MiddleName { get; set; } [JsonProperty("last_name")] public string LastName { get; set; } [JsonProperty("user_name")] public string UserName { get; set; } [JsonProperty("gender")] public GenderEnum Gender { get; set; } [JsonProperty("email")] public string Email { get; set; } }
      
      







結果:

 {"id":404,"name":"Andrey","first_name":"Andrey","middle_name":"Alexandrovich","last_name":"Chernikov","user_name":"rollinx","gender":"Male","email":"chernikov@gmail.com"}
      
      







リストを説明するには、Photoクラスを追加します。

 [JsonObject] public class Photo { [JsonProperty("id")] public int Id { get; set; } [JsonProperty("name")] public string Name { get; set; } }
      
      







そして、ユーザーに追加:

 [JsonProperty("photo_album")] public List<Photo> PhotoAlbum { get; set; }
      
      







結果:

 {"id":404,"name":"Andrey","first_name":"Andrey","middle_name":"Alexandrovich","last_name":"Chernikov","user_name":"rollinx","gender":"Male","email":"chernikov@gmail.com","photo_album":[{"id":1,"name":"  "},{"id":2,"name":"    "}]}
      
      





すべてがシンプルで予測可能です。

困難なケースを分析しましょう。たとえば、性別の場合、男性\女性ではなく、M \ Fと記述する必要がある場合です。 これを行うには、GenderEnumConverter解析クラスを作成します。

 public class GenderEnumConverter : JsonConverter { public override object ReadJson(JsonReader reader, Type objectType, object existingValue, JsonSerializer serializer) { var value = reader.Value.ToString(); if (string.Compare(value, "M", true) == 0) { return User.GenderEnum.Male; } if (string.Compare(value, "F", true) == 0) { return User.GenderEnum.Female; } return User.GenderEnum.Male; } public override void WriteJson(JsonWriter writer, object value, JsonSerializer serializer) { var obj = (User.GenderEnum)value; // Write associative array field name writer.WriteValue(value.ToString().Substring(0,1)); } public override bool CanConvert(Type objectType) { return false; } }
      
      







そして、このコンバーターをインストールして処理します

 [JsonConverter(typeof(GenderEnumConverter))] public enum GenderEnum { Male, Female }
      
      







一般に、コンバーターはJSONデータを解析するのが限りなく困難です。 非定型の日付レコード、複雑なデータ構造を処理し、クラスをシリアル化できます。



Facebookで作業する


これらはすべて理解可能で退屈なので、facebook APIを使用します。 すべての人にエンターテイメントを! まず、LessonProject.FacebookAPIプロジェクトを開始します。 そこにJson.NETを追加し、メインプロジェクトにリンクします。



Facebookでは、次の場所でApplicationIDを取得する必要があります。

https://developers.facebook.com/apps







作成し、受け取るもの:





AppIDとAppSecretに興味があります。

このデータをConfig / FacebookSetting.csに追加します(方法は既にわかっています)

 public class FacebookSetting : ConfigurationSection { [ConfigurationProperty("AppID", IsRequired = true)] public string AppID { get { return this["AppID"] as string; } set { this["AppID"] = value; } } [ConfigurationProperty("AppSecret", IsRequired = true)] public string AppSecret { get { return this["AppSecret"] as string; } set { this["AppSecret"] = value; } } }
      
      







Facebookとの通信は次のとおりです。





FacebookSettingが実装するインターフェースを作成します(つまり、下位互換性があります)(LessonProject.FacebookAPI / IFbAppConfig.cs):

 public interface IFbAppConfig { string AppID { get; } string AppSecret { get; } }
      
      





FacebookSettingに追加(/Global/Config/FacebookSetting.cs):

 public class FacebookSetting : ConfigurationSection, IFbAppConfig
      
      





AppIDを使用して、次のような行に沿って進みます。

 https://www.facebook.com/dialog/oauth?client_id=136398216534301&redirect_uri=http%3A%2F%2Flocalhost%3A54484%2FFacebook%2FToken&scope=email
      
      





そして、それはこのように見えます:







「Go to the application」をクリックすると、ページにリダイレクトされます

localhost:54484/Facebook/Token



localhost:54484/Facebook/Token



codeパラメーター付きの localhost:54484/Facebook/Token



これにより、トークンを取得できます(これは以前から有効でした)。 次のリクエストを実行します。

 https://graph.facebook.com/oauth/access_token?client_id=136398216534301&redirect_uri=http://localhost:54484/Facebook/Token&client_secret=e6de78fd40596f00e225dce861b34a1a&code=AQAScKUYKGpzwijzT3Y3SHjNOd4Q5nsyrYPdJaPhX-88r-wBOuMrdimL8h82bGv3HAh7TL6oJyZ0gNgiB8BcCeH8G_Zj7h6hlft_BFbOfIJIZJB9nKW6Q4iR3a0VVImxM0QYJas3eVg4qtYNkqUcWbgXDSK2JENcuomUX38haxFUFdKXrVjL1acNZSocESsx6nfx_FyF_QlbwnUO5cwogrLp
      
      





答えを得るもの:

 access_token=AAAB8Da8ZBmR0BAMCOx5293ZArYvFu5oRkmZCrwZAbvpWZB3ZCLBeiooslyYPZBVwHjxSpe3KzJ4VLFPIxwwf0D6TIEiM5ApzU8EMoDpOxE4uAZDZD&expires=5183977
      
      





このaccess_tokenが必要です。保存して、リンクからデータをリクエストします。

 https://graph.facebook.com/me?access_token=AAAB8Da8ZBmR0BAImiTO9QwuUXbgHPLZBQWmAyZBUkjR2A37aVNs4vaqaFmt6h1ZBvurUpvN95EXddy5d6J1ldZA2jWTxSd3eZBHlYMzKwdxgZDZD
      
      







彼は私たちに答えます:

 {"id":"708770020","name":"Andrey Chernikov","first_name":"Andrey","last_name":"Chernikov","link":"http:\/\/www.facebook.com\/chernikov1","username":"chernikov1","gender":"male","email":"chernikov\u0040gmail.com","timezone":2,"locale":"ru_RU","verified":true,"updated_time":"2013-03-06T15:01:28+0000"}
      
      







そして、ここでFbUserInfoクラス(LessonProject.FacebookAPI / FbUserInfo.cs)にそれをもたらします:

 [JsonObject] public class FbUserInfo { [JsonProperty("id")] public string Id { get; set; } [JsonProperty("name")] public string Name { get; set; } [JsonProperty("first_name")] public string FirstName { get; set; } [JsonProperty("last_name")] public string LastName { get; set; } [JsonProperty("link")] public string Link { get; set; } [JsonProperty("username")] public string UserName { get; set; } [JsonProperty("gender")] public string Gender { get; set; } [JsonProperty("email")] public string Email { get; set; } [JsonProperty("locale")] public string Locale { get; set; } [JsonProperty("timezone")] public double? Timezone { get; set; } [JsonProperty("verified")] public bool? Verified { get; set; } [JsonProperty("updated_time")] public DateTime? updatedTime { get; set; } }
      
      





FbProvider.cs(LessonProject.FacebookAPI / Provider.cs)で上記のすべての作業を完了します。

 public class FbProvider { private static string AuthorizeUri = "https://graph.facebook.com/oauth/authorize?client_id={0}&redirect_uri={1}&scope=email"; private static string GetAccessTokenUri = "https://graph.facebook.com/oauth/access_token?client_id={0}&redirect_uri={1}&client_secret={2}&code={3}"; private static string GetUserInfoUri = "https://graph.facebook.com/me?access_token={0}"; private static string GraphUri = "https://graph.facebook.com/{0}"; public IFbAppConfig Config { get; set; } public string AccessToken { get; set; } public string Authorize(string redirectTo) { return string.Format(AuthorizeUri, Config.AppID, redirectTo); } public bool GetAccessToken(string code, string redirectTo) { var request = string.Format(GetAccessTokenUri, Config.AppID, redirectTo, Config.AppSecret, code); WebClient webClient = new WebClient(); string response = webClient.DownloadString(request); try { var pairResponse = response.Split('&'); AccessToken = pairResponse[0].Split('=')[1]; return true; } catch (Exception ex) { return false; } } public JObject GetUserInfo() { var request = string.Format(GetUserInfoUri, AccessToken); WebClient webClient = new WebClient(); string response = webClient.DownloadString(request); return JObject.Parse(response); } }
      
      







どこで





WebClient.DownloadString



とop-paの使用方法に注目してください。インターネットの腸から必要なデータを取得しました。



さらに進んでいます。 FacebookControllerコントローラー(/Areas/Default/Controllers/FacebookController.cs)を作成します。

 public class FacebookController : DefaultController { private FbProvider fbProvider; protected override void Initialize(System.Web.Routing.RequestContext requestContext) { fbProvider = new FbProvider(); fbProvider.Config = Config.FacebookSetting; base.Initialize(requestContext); } public ActionResult Index() { return Redirect(fbProvider.Authorize("http://" + HostName + "/Facebook/Token")); } public ActionResult Token() { if (Request.Params.AllKeys.Contains("code")) { var code = Request.Params["code"]; if (fbProvider.GetAccessToken(code, "http://" + HostName + "/Facebook/Token")) { var jObj = fbProvider.GetUserInfo(); var fbUserInfo = JsonConvert.DeserializeObject<FbUserInfo>(jObj.ToString()); return View(fbUserInfo); } } return View("CantInitialize"); } }
      
      







Initializeでは、 AppID



AppSecret



ます。 入力後-ユーザーの権利を要求してFacebookにリダイレクトします(許可ウィンドウ)。 ユーザーが既にこれを許可している場合、100回尋ねないように、facebookはページ/ Facebook /トークンにリダイレクトします。 トークンを取得するためのコードを取得できなかった場合、View CantInitialize(/Areas/Default/Views/Facebook/CantInitialize.cshtml)を返します。

 @{ ViewBag.Title = "CantInitialize"; Layout = "~/Areas/Default/Views/Shared/_Layout.cshtml"; } <h2>CantInitialize</h2> <h3>   -  </h3>
      
      







それ以外の場合、すべてが正常である場合、トークン(fbProviderに格納されています)を取得し、ユーザーデータを要求します。 それを受け取ったら、それをFbUserInfoクラスのオブジェクトに変換し、View(/Areas/Default/Views/Facebook/Token.cshtml)に表示します。

 @model LessonProject.FacebookAPI.FbUserInfo @{ ViewBag.Title = "Token"; Layout = "~/Areas/Default/Views/Shared/_Layout.cshtml"; } <h2></h2> <p>      :</p> <dl class="dl-horizontal"> <dt>ID</dt> <dd>@Model.Id</dd> <dt>FirstName</dt> <dd>@Model.FirstName</dd> <dt>LastName</dt> <dd>@Model.LastName</dd> <dt>Link</dt> <dd>@Model.Link</dd> </dl>
      
      







クライアントコード/サーバーコード(Access-Control-Allow-Origin)




また、この相互作用がすべてjsファイルで囲まれ、ajaxリクエストのみを実行する状況を考えてみましょう。 Tokenメソッドのコードを変更します。 Facebookのサーバーコードからユーザーデータを取得するのではなく、トークンをビューに渡します(/Areas/Default/Controllers/FacebookController.cs:Token):

 public ActionResult Token() { if (Request.Params.AllKeys.Contains("code")) { var code = Request.Params["code"]; if (fbProvider.GetAccessToken(code, "http://" + HostName + "/Facebook/Token")) { /* var jObj = fbProvider.GetUserInfo(); var fbUserInfo = JsonConvert.DeserializeObject<FbUserInfo>(jObj.ToString()); */ ViewBag.Token = fbProvider.AccessToken; return View(); } } return View("CantInitialize"); }
      
      







Token.cshtml(/Areas/Default/Views/Facebook/Token.cshtml)を変更します:

 @{ ViewBag.Title = "Token"; Layout = "~/Areas/Default/Views/Shared/_Layout.cshtml"; } @section scripts { @Scripts.Render("~/Scripts/default/facebook-token.js") } @Html.Hidden("Token", ViewBag.Token as string) <h2></h2> <p>      :</p> <dl class="dl-horizontal"> <dt>ID</dt> <dd id="ID"></dd> <dt>FirstName</dt> <dd id="FirstName"></dd> <dt>LastName</dt> <dd id="LastName"></dd> <dt>Link</dt> <dd id="Link"></dd> </dl>
      
      







facebook-token.js(/Scripts/default/facebook-token.js)を追加します。

 function FacebookToken() { _this = this; this.ajaxGetUserInfo = "https://graph.facebook.com/me?access_token="; this.init = function () { var token = $("#Token").val(); $.ajax({ type: "GET", dataType: 'json', url: _this.ajaxGetUserInfo + token, success: function (data) { $("#ID").text(data.id); $("#FirstName").text(data.first_name); $("#LastName").text(data.last_name); $("#Link").text(data.link); } }) } } var facebookToken = null; $().ready(function () { facebookToken = new FacebookToken(); facebookToken.init(); });
      
      







実行して確認してください。 すべてが素晴らしいです。 ただし、http応答のこのパラメーターに注意してください。







Access-control-allow-originは、インストールされると、ブラウザーから別のドメインでホストされているサイトにajaxリクエストを行うことができるパラメーターです。

つまり ブラウザから$ .ajax()にアクセスし、応答にthisヘッダーがない場合、エラーが発行されます。

Origin localhost:8080 is not allowed by Access-Control-Allow-Origin





これを行うには、他のサイト(/Attribute/AllowCrossSiteJson.cs)からサイトへのアクセスを整理する場合に、このヘッダーを追加する属性を作成します。

 public class AllowCrossSiteJsonAttribute : ActionFilterAttribute { public override void OnActionExecuting(ActionExecutingContext filterContext) { filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*"); base.OnActionExecuting(filterContext); } }
      
      







使用を追加します。 たとえば、アクションメソッドOKは、常に{“ result”:“ OK”}(/Areas/Default/Controllers/HomeController.cs)を返します。

 [AllowCrossSiteJson] public ActionResult OK() { return Json(new { result = "OK" }, JsonRequestBehavior.AllowGet); }
      
      







JsonとFacebookでの作業は以上です。 vk apiを使用して、認証と対話を練習および操作できます。 ドキュメントはこちら: http : //vk.com/developers.php



すべてのソースはhttps://bitbucket.org/chernikov/lessonsにあります



All Articles