Securing ASP.NET Core 2.0 Applications with JWTs

Posted on 29 August, 2018 by jack

โหลดตัวอย่างมาจาก Git Using JWTs in .NET Core 2

เปิดขึ้นมาแล้วลองรัน
browser จะชี้ไปที่ http://localhost:63939/api/books ซึ่งจะ Error ดังนี้
This page isn’t working
If the problem continues, contact the site owner.
HTTP ERROR 401

แล้วถ้าเรียกไปที่ http://localhost:63939/api/token ก็จะ Error แบบนี้
This localhost page can’t be found
No webpage was found for the web address: http://localhost:63939/api/token
Search Google for localhost 63939 api token
HTTP ERROR 404

เป็นเพราะไม่ได้ส่งพารามิเตอร์ที่จำเป็นไปให้

ทีนี้ลองใช้ Postman เรียกไปที่ http://localhost:63939/api/token
พร้อมส่งค่าไปดังนี้

[code]
{
"username": "mario",
"password": "secret"
}
[/code]

จะได้ค่าคืนมาเป็นแบบข้างล่างนี้ก็เป็นอันใช้ได้

[code]
{
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJNYXJpbyBSb3NzaSIsImVtYWlsIjoibWFyaW8ucm9zc2lAZG9tYWluLmNvbSIsImJpcnRoZGF0ZSI6IjI1MjYtMDktMjMiLCJqdGkiOiJhYzdlYWRhZS02YzI4LTRlMDctOWM2OC1mMjAxMjNjYWY1OTUiLCJleHAiOjE1MzU1MzI2NTUsImlzcyI6Imh0dHA6Ly9sb2NhbGhvc3Q6NjM5MzkvIiwiYXVkIjoiaHR0cDovL2xvY2FsaG9zdDo2MzkzOS8ifQ.dCmNVlejU4kjQI1NNZRbBPXZ19AKQmWwekHT8aSCAsY"
}
[/code]

Continue reading →

การใช้ ionic เรียก WebApi เป็น Object

Posted on 24 August, 2018 by jack

1. สร้างโปรเจ็กส์ ASP.NET Core

สร้างโปรเจ็กส์แบบ ASP.NET Core WebAPI in Azure

Startup.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.Options;

namespace JackWebAPI
{
    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors(options =>
            {
                options.AddPolicy("AllowAll", builder =>
                {
                    builder.AllowAnyOrigin()
                    .AllowAnyHeader()
                    .AllowAnyMethod();
                });
            });

            services.AddMvc();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            // Shows UseCors with named policy.
            app.UseCors("AllowAll");

            app.UseMvc();
        }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Builder;

using Microsoft.AspNetCore.Hosting;

using Microsoft.Extensions.Configuration;

using Microsoft.Extensions.DependencyInjection;

using Microsoft.Extensions.Logging;

using Microsoft.Extensions.Options;

namespace JackWebAPI

{

public class Startup

{

public Startup(IConfiguration configuration)

{

Configuration = configuration;

}

public IConfiguration Configuration { get; }

// This method gets called by the runtime. Use this method to add services to the container.

public void ConfigureServices(IServiceCollection services)

{

services.AddCors(options =>

{

options.AddPolicy("AllowAll", builder =>

{

builder.AllowAnyOrigin()

.AllowAnyHeader()

.AllowAnyMethod();

});

services.AddMvc();

}

// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.

public void Configure(IApplicationBuilder app, IHostingEnvironment env)

{

if (env.IsDevelopment())

{

app.UseDeveloperExceptionPage();

}

// Shows UseCors with named policy.

app.UseCors("AllowAll");

app.UseMvc();

}

ValuesController.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace JackWebAPI.Controllers
{
    [Route("api/[controller]")]
    public class ValuesController : Controller
    {
        public class Person
        {
            public int ID { get; set; }
            public string FirstName { get; set; }
            public string LastName { get; set; }
        }

        // GET api/values
        [HttpGet]
        public IEnumerable<string> Get()
        {
            return new string[] { "Jack1", "Jack2" };
        }

        // GET api/values/5
        [HttpGet("{id}")]
        public Person Get(int id)
        {
            Person person = new Person();
            person.ID = 50;
            person.FirstName = "Phaisarn";
            person.LastName = "Sutheebanjard";
            return person;
        }

        // POST api/values
        public string Post([FromBody]Person person)
        {
            return $"{person.ID} : {person.FirstName}  {person.LastName}";
        }

        // PUT api/values/5
        [HttpPut("{id}")]
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/values/5
        [HttpDelete("{id}")]
        public void Delete(int id)
        {
        }
    }
}

using System;

using System.Collections.Generic;

using System.Linq;

using System.Threading.Tasks;

using Microsoft.AspNetCore.Mvc;

namespace JackWebAPI.Controllers

{

[Route("api/[controller]")]

public class ValuesController : Controller

{

public class Person

{

public int ID { get; set; }

public string FirstName { get; set; }

public string LastName { get; set; }

}

// GET api/values

[HttpGet]

public IEnumerable<string> Get()

{

return new string[] { "Jack1", "Jack2" };

}

// GET api/values/5

[HttpGet("{id}")]

public Person Get(int id)

{

Person person = new Person();

person.ID = 50;

person.FirstName = "Phaisarn";

person.LastName = "Sutheebanjard";

return person;

}

// POST api/values

public string Post([FromBody]Person person)

{

return $"{person.ID} : {person.FirstName} {person.LastName}";

}

// PUT api/values/5

[HttpPut("{id}")]

public void Put(int id, [FromBody]string value)

{

}

// DELETE api/values/5

[HttpDelete("{id}")]

public void Delete(int id)

{

}

2. สร้างโปรเจ็กส์ ionic

สร้างโปรเจ็กส์ ionic เรียกใช้ HTTP แบบ Native (GET)

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <p>Status: {{stStatus}}</p>
  <p>Value: {{stValue}}</p>
  <button (click)="doGet()" ion-button color="primary" block>1. Get Person</button>
  <button (click)="doPost()" ion-button color="primary" block>2. Post Person</button>
</ion-content>

<ion-header>

<ion-navbar>

<ion-title>

Ionic Blank

</ion-title>

</ion-navbar>

</ion-header>

<ion-content padding>

<p>Status: {{stStatus}}</p>

<p>Value: {{stValue}}</p>

<button (click)="doGet()" ion-button color="primary" block>1. Get Person</button>

<button (click)="doPost()" ion-button color="primary" block>2. Post Person</button>

</ion-content>

home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

import { HTTP } from '@ionic-native/http';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  stStatus;
  stValue;
    
  constructor(public navCtrl: NavController, private http: HTTP) {
   this.stStatus = "";
   this.stValue = "";
  }

  doGet(){
    let url = 'http://jackwebapi25610824112107.azurewebsites.net/api/values/1';
    //let url = 'http://localhost:50172/api/values/1';
    console.log(url);

    this.http.get(url, {}, {})
      .then(resp => {
        this.stStatus = resp.status;
        this.stValue = resp.data;
        let person = JSON.parse(resp.data);
        console.log("this.stStatus ", this.stStatus);
        console.log("this.stValue ", this.stValue);
        console.log("person['id'] ", person['id']);
        console.log("person['firstName'] ", person['firstName']);
        console.log("person['lastName'] ", person['lastName']);
      })
      .catch(error => {
        this.stStatus =  error.status;
        this.stValue =  error.error;
        console.log("this.stStatus ", this.stStatus);
        console.log("this.stValue ", this.stValue);
      });
  }

  doPost() {
    // var myData = JSON.stringify({
    //   "LocationID": 1,
    //   "Flag": "O",
    //   "UserFingerID": "66"
    // });
 
    // const httpOptions = {
    //   headers: new HttpHeaders({ 'Content-Type': 'application/json' })
    // };
 
    this.http.setDataSerializer('json');
    this.http.post('http://jackwebapi25610824112107.azurewebsites.net/api/values',
      {
        'ID': 101,
        'FirstName': 'Phaisarn',
        'LastName': 'Sutheebanjard'
      }, {})
      .then(resp => {
        this.stStatus = resp.status;
        this.stValue = resp.data;
        console.log("this.stStatus ", this.stStatus);
        console.log("this.stValue ", this.stValue);
      })
      .catch(error => {
        this.stStatus = error.status;
        this.stValue = error.data;
        console.log("this.stStatus ", this.stStatus);
        console.log("this.stValue ", this.stValue);
      });
  }
}

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

import { HTTP } from '@ionic-native/http';

@Component({

selector: 'page-home',

templateUrl: 'home.html'

})

export class HomePage {

stStatus;

stValue;

constructor(public navCtrl: NavController, private http: HTTP) {

this.stStatus = "";

this.stValue = "";

}

doGet(){

let url = 'http://jackwebapi25610824112107.azurewebsites.net/api/values/1';

//let url = 'http://localhost:50172/api/values/1';

console.log(url);

this.http.get(url, {}, {})

.then(resp => {

this.stStatus = resp.status;

this.stValue = resp.data;

let person = JSON.parse(resp.data);

console.log("this.stStatus ", this.stStatus);

console.log("this.stValue ", this.stValue);

console.log("person['id'] ", person['id']);

console.log("person['firstName'] ", person['firstName']);

console.log("person['lastName'] ", person['lastName']);

})

.catch(error => {

this.stStatus = error.status;

this.stValue = error.error;

console.log("this.stStatus ", this.stStatus);

console.log("this.stValue ", this.stValue);

});

}

doPost() {

// var myData = JSON.stringify({

// "LocationID": 1,

// "Flag": "O",

// "UserFingerID": "66"

// });

// const httpOptions = {

// headers: new HttpHeaders({ 'Content-Type': 'application/json' })

// };

this.http.setDataSerializer('json');

this.http.post('http://jackwebapi25610824112107.azurewebsites.net/api/values',

{

'ID': 101,

'FirstName': 'Phaisarn',

'LastName': 'Sutheebanjard'

}, {})

.then(resp => {

this.stStatus = resp.status;

this.stValue = resp.data;

console.log("this.stStatus ", this.stStatus);

console.log("this.stValue ", this.stValue);

})

.catch(error => {

this.stStatus = error.status;

this.stValue = error.data;

console.log("this.stStatus ", this.stStatus);

console.log("this.stValue ", this.stValue);

});

}

3. ผลการรัน

ลองใช้ Postman ทำการ POST

[code]
{
"ID": 101,
"FirstName": "Phaisarn",
"LastName": "Sutheebanjard"
}
[/code]

ได้ผลลัพธ์กลับมาเป็น

[code]
101 : Phaisarn Sutheebanjard
[/code]

เรียกผ่าน browser แบบ Get

ไปที่ http://jackwebapi25610824112107.azurewebsites.net/api/values/1

ได้ผลลัพธ์กลับมาเป็น

[code]
{"id":50,"firstName":"Phaisarn","lastName":"Sutheebanjard"}
[/code]

ใช้ ionic เรียกแบบ Get

[code]
http://jackwebapi25610824112107.azurewebsites.net/api/values/1
this.stStatus 200
this.stValue {"id":50,"firstName":"Phaisarn","lastName":"Sutheebanjard"}
person[‘id’] 50
person[‘firstName’] Phaisarn
person[‘lastName’] Sutheebanjard
[/code]

ใช้ ionic เรียกแบบ Post

[code]
this.stStatus 200
this.stValue 101 : Phaisarn Sutheebanjard
[/code]

การใช้ ionic เรียก WebApi

Posted on 24 August, 2018 by jack

สร้างโปรเจ็กส์ ASP.NET Core
สร้างโปรเจ็กส์ ionic
ผลการรัน

Continue reading →

ASP.Net: login เข้าระบบด้วย Username โดยไม่เก็บ Email

Posted on 6 June, 2018 by jack

เตรียมโปรเจ็กส์ก่อน โดยสร้างโปรเจ็กส์แบบ MVC แบบมี user

แก้ไขหน้า Register
แก้ไขหน้า Login
IdentityConfig

Continue reading →

ASP.Net: login เข้าระบบด้วย Username แทนที่ Email

Posted on 6 June, 2018 by jack

เตรียมโปรเจ็กส์ก่อน โดยสร้างโปรเจ็กส์แบบ MVC แบบมี user

1. แก้ไขหน้า Register

Models/AccountViewModels.cs
Views/Account/Register.cshtml
Controllers/AccountController.cs

2. แก้ไขหน้า Login

Models/AccountViewModels.cs
Views/Account/Login.cshtml
Controllers/AccountController.cs

Continue reading →

ASP.Net: สร้างโปรเจ็กส์ MVC แบบมี user

Posted on 6 June, 2018 by jack

1. สร้างโปรเจ็กส์

เลือกเมนู
File > New > Project …

เลือก
Visual C# > Web > ASP.NET Web Application (.NET Framework)

ตั้งชื่อโปรเจ็กส์
WebMVC

เลือก MVC

Continue reading →

Binary Search

Posted on 23 May, 2018 by jack

ค้นหาจากตำแหน่งกึ่งกลาง ถ้าเจอก็จบ
ถ้าไม่เจอ แล้วเลขที่ค้นหามีค่ามากกว่า ก็หาต่อทางครึ่งซ้าย
ถ้าไม่เจอ แล้วเลขที่ค้นหามีค่าน้อยกว่า ก็หาต่อทางครึ่งขวา

โค๊ด

using System;

namespace ConsoleApp1
{
    class Program
    {
        static void Main(string[] args)
        {
            // declare an array of integers that will be used for searching
            int[] arrLinearSearch = { 2, 3, 4, 5, 8, 10 };
            int searchTerm = 8;
            int result = BinarySearch(arrLinearSearch, searchTerm, 0, arrLinearSearch.Length - 1);

            if (result != -1)
            {
                Console.WriteLine($"Search term found at index {result}.");
            }
            else
            {
                Console.WriteLine("Search term not found in the array.");
            }
        }

        public static int BinarySearch(int[] arr, int key, int first, int last)
        {
            while (first <= last)
            {
                int mid = (first + last) / 2;
                if (key == arr[mid])
                {
                    return mid;
                }
                else if (key < arr[mid])
                {
                    last = mid - 1;
                }
                else
                {
                    first = mid + 1;
                }
            }
            return -1;
        }
    }
}

using System;

namespace ConsoleApp1

{

class Program

{

static void Main(string[] args)

{

// declare an array of integers that will be used for searching

int[] arrLinearSearch = { 2, 3, 4, 5, 8, 10 };

int searchTerm = 8;

int result = BinarySearch(arrLinearSearch, searchTerm, 0, arrLinearSearch.Length - 1);

if (result != -1)

{

Console.WriteLine($"Search term found at index {result}.");

}

else

{

Console.WriteLine("Search term not found in the array.");

}

public static int BinarySearch(int[] arr, int key, int first, int last)

{

while (first <= last)

{

int mid = (first + last) / 2;

if (key == arr[mid])

{

return mid;

}

else if (key < arr[mid])

{

last = mid - 1;

}

else

{

first = mid + 1;

}

return -1;

}

ผลการรัน
[code]
Search term found at index 4.
Press any key to continue . . .
[/code]

สร้างโปรเจ็กส์ ionic ไว้ทดสอบ CORS

Posted on 18 May, 2018 by jack

ใช้ทดสอบกับ

Continue reading →

ASP.Net: WebApi คืนค่าจากคลาส

Posted on 17 May, 2018 by jack

สร้างโปรเจ็กส์แบบ WebApi
แล้วกำหนดให้คืนค่าเฉพาะ application/json

แก้ไข Controllers > ValuesController.cs

using System.Collections.Generic;
using System.Web.Http;

namespace WebApi.Controllers
{
    public class Person
    {
        public int ID;
        public string FirstName;
        public string LastName;

        //public Person()
        //{
        //}
    }

    public class ValuesController : ApiController
    {
        // GET api/values
        public List<Person> Get()
        {
            List<Person> people = new List<Person>{
                   new Person{ID = 1, FirstName = "Phaisarn", LastName = "Sutheebanjard"},
                   new Person{ID = 2, FirstName= "Foo", LastName = "Bar"}
                   };
            return people;
        }

        // GET api/values/5
        public Person Get(int id)
        {
            Person person = new Person
            {
                ID = 1,
                FirstName = "Phaisarn",
                LastName = "Sutheebanjard"
            };
            return person;
        }

        // POST api/values
        public void Post([FromBody]string value)
        {
        }

        // PUT api/values/5
        public void Put(int id, [FromBody]string value)
        {
        }

        // DELETE api/values/5
        public void Delete(int id)
        {
        }
    }

}

using System.Collections.Generic;

using System.Web.Http;

namespace WebApi.Controllers

{

public class Person

{

public int ID;

public string FirstName;

public string LastName;

//public Person()

//{

//}

}

public class ValuesController : ApiController

{

// GET api/values

public List<Person> Get()

{

List<Person> people = new List<Person>{

new Person{ID = 1, FirstName = "Phaisarn", LastName = "Sutheebanjard"},

new Person{ID = 2, FirstName= "Foo", LastName = "Bar"}

};

return people;

}

// GET api/values/5

public Person Get(int id)

{

Person person = new Person

{

ID = 1,

FirstName = "Phaisarn",

LastName = "Sutheebanjard"

};

return person;

}

// POST api/values

public void Post([FromBody]string value)

{

}

// PUT api/values/5

public void Put(int id, [FromBody]string value)

{

}

// DELETE api/values/5

public void Delete(int id)

{

}

Continue reading →

ASP.Net: สร้างโปรเจ็กส์แบบ WebApi

Posted on 17 May, 2018 by jack

สร้างโปรเจ็กส์
รันโปรเจ็กส์
กำหนดให้คืนค่าเฉพาะ application/json

Continue reading →

Phaisarn Sutheebanjard

blog.phaisarn.com

Category Archives: CSharp

Securing ASP.NET Core 2.0 Applications with JWTs

การใช้ ionic เรียก WebApi เป็น Object

การใช้ ionic เรียก WebApi

ASP.Net: login เข้าระบบด้วย Username โดยไม่เก็บ Email

ASP.Net: login เข้าระบบด้วย Username แทนที่ Email

ASP.Net: สร้างโปรเจ็กส์ MVC แบบมี user

Binary Search

สร้างโปรเจ็กส์ ionic ไว้ทดสอบ CORS

ASP.Net: WebApi คืนค่าจากคลาส

ASP.Net: สร้างโปรเจ็กส์แบบ WebApi