ASP.NET Core 3.0 connect with LINE Login

การพัฒนาโปรแกรมเชื่อมต่อระบบ Authentication ของ ASP .NET Core 3.0 เข้ากับ LINE Login

สมัครสมาชิก LINE Developers

  1. เข้าไปที่ https://developers.line.biz เพื่อสมัครสมาชิกเป็นนักพัฒนา
  2. คลิ๊กที่รูป แล้วกดลิ้ง Add new provider

2019-10-13_18-38-40
3. ใส่ชื่อ Provider name และกดปุ่ม Confirm และ Create ในหน้าถัดไป

  1. กดปุ่ม Create Channel ที่ Line Login

  1. ใส่ชื่อ App name, description เลือก App type ใส่ Email address และกดปุ่ม Confirm ในหน้าถัดไปให้เช็คที่ LINE Developers Agreement และกดปุ่ม Create

  1. คลิ๊กที่ Channel ที่สร้างขึ้นมา

  1. ก็อปปี้ Channel ID กับ Channel secret เก็บเอาไว้

  1. คลิ๊กที่ App settings และกดปุ่ม Edit ที่ Callback URL

  1. ใส่ Callback URL แล้วกดปุ่ม Update

ใส่เว็บโดนเมนเนมแล้วต่อท้ายด้วย /signin-line

https://localhost:5001/signin-line

สร้างโปรเจ็ค ASP .NET Core 3.0

  1. รันคำสั่ง dotnet เพื่อสร้างโปรเจ็ค ASP .NET Core Web App เพิ่มออฟชั่น Individual Authentication

dotnet new webapp -au individual -o LineLogin

2.เพิ่มโค้ด setting ที่ไฟล์ appsettings.json แล้วนำ ChannelId กับ ChannelSecret ที่ก๊อปปี้ไว้เอามาใส่ที่นี่

"Authentication" : {
    "Line" : {
      "ChannelId" : "",
      "ChannelSecret" : ""
    }
  }

2019-10-13_23-24-26

  1. ติดตั้ง Microsoft.AspNetCore.Authentication.OAuth Package แต่!!! ในช่วงที่ผมเขียนบทความอยู่นี้ Microsoft.AspNetCore.Authentication.OAuth ยังเป็นเวอร์ชั่นเก่า 2.2.0 ทำให้เราไม่สามารถใช้ได้

  2. วิธีแก้คือให้ไปติดตั้ง Microsoft.AspNetCore.Authentication.Facebook แทนเพราะได้อัพเกรด OAuth เป็นเวอร์ชั่น 3.0 แล้ว ให้รันคำสั่งนี้

dotnet add package Microsoft.AspNetCore.Authentication.Facebook

  1. แก้ไขไฟล์ Startup.cs เพิ่ม Using namespace ดังนี้
using Microsoft.AspNetCore.Authentication;
using System.Security.Claims;
using Microsoft.AspNetCore.Http;
using Microsoft.AspNetCore.Authentication.OAuth;
using System.Net.Http;
using System.Net.Http.Headers;
using System.Text.Json;
  1. เพิ่มโค้ดนี้เข้าไปที่ ConfigureServices
services.AddAuthentication().AddOAuth("Line", "Line", options => {
    // Code here
}); 

  1. ใส่โค้ดเต็มๆเข้าไปดังนี้
services.AddAuthentication().AddOAuth("Line", "Line", options => {
    options.ClientId = Configuration["Authentication:Line:ChannelId"];
        options.ClientSecret = Configuration["Authentication:Line:ChannelSecret"];
        options.AuthorizationEndpoint = "https://access.line.me/oauth2/v2.1/authorize";
        options.TokenEndpoint = "https://api.line.me/oauth2/v2.1/token";
        options.UserInformationEndpoint = "https://api.line.me/v2/profile";
        options.CallbackPath = new PathString("/signin-line");

        // Set the scopes you want to request
        options.Scope.Add("profile");
        options.Scope.Add("openid");
        options.Scope.Add("email");

        // Define how to map returned user data to claims
        options.ClaimActions.MapJsonKey(ClaimTypes.NameIdentifier, "userId");
        options.ClaimActions.MapJsonKey(ClaimTypes.Email, "email", ClaimTypes.Email);
        options.ClaimActions.MapJsonKey("urn:line:picture", "pictureUrl", "url");
        options.ClaimActions.MapJsonKey("urn:line:display", "displayName", "string");      

        // Register to events
        options.Events = new OAuthEvents
        {
            // After OAuth2 has authenticated the user
            OnCreatingTicket = async context =>
            {
                // Create the request message to get user data via the backchannel
                var request = new HttpRequestMessage(HttpMethod.Get, context.Options.UserInformationEndpoint);                            
                request.Headers.Authorization = new AuthenticationHeaderValue("Bearer", context.AccessToken);
                
                request.Headers.Accept.Add(new MediaTypeWithQualityHeaderValue("application/json"));

                // Query for user data via backchannel
                var response = await context.Backchannel.SendAsync(request, context.HttpContext.RequestAborted);
                response.EnsureSuccessStatusCode();

                // Parse user data into an object
                var json = await response.Content.ReadAsStringAsync();
                var user = JsonDocument.Parse(json);

                // Store the received authentication token somewhere. In a cookie for example
                context.HttpContext.Response.Cookies.Append("token", context.AccessToken);                    

                // Execute defined mapping action to create the claims from the received user object
                context.RunClaimActions(user.RootElement);
            },
            OnRemoteFailure = context =>
            {
                context.HandleResponse();
                context.Response.Redirect("/Home/Error?message=" + context.Failure.Message);
                return Task.FromResult(0);
            }                
        };
    });   
  1. รันคำสี่ง

dotnet run

  1. เปิด Web Browser แล้วเข้าเว็บเพื่อทดสอบ

https://localhost:5001

  1. คลิ๊กลิ้ง Register และ Line

  1. Login เข้าสู่ระบบ Line

  1. คลิ๊กปุ่ม Allow

  1. ลงทะเบียนด้วยอีเมล

  1. คลิ๊ก confirm account

  1. คลิ๊ก Login และ Line

  1. คลิ๊กปุ่ม Login

  1. Login ด้วย Line สำเร็จแล้ว

บทความต่อไปจะพูดถึงวิธีการดึงข้อมูล Profile เช่นชื่อ, รูป, อีเมล

Reference site: