Xác thực bằng LinkedIn trong ASP.NET Core 2.0

Giới thiệu
Đôi khi, chúng tôi muốn người dùng đăng nhập bằng thông tin đăng nhập hiện có của họ từ các ứng dụng của bên thứ ba, chẳng hạn như Facebook, Twitter, Google, LinkedIn, v.v. Trong bài viết này, chúng tôi sẽ xem xét xác thực của một ứng dụng ASP.NET Core bằng tài khoản LinkedIn.
Điều kiện tiên quyết
- Cài đặt .NET Core 2.0.0 SDK trở lên từ đây .
- Cài đặt phiên bản mới nhất của Visual Studio 2017 Community Edition từ đây .
Tạo ứng dụng web MVC
Mở Visual Studio và chọn Tệp >> Mới >> Dự án. Sau khi chọn dự án, hộp thoại “Dự án mới” sẽ mở ra.
Chọn .NET Core bên trong menu Visual C # từ bảng điều khiển bên trái. Sau đó, chọn “ASP.NET Core Web Application” từ các loại dự án có sẵn. Đặt tên của dự án là LinkdinAuth và nhấn OK.
Sau khi nhấp vào OK, một hộp thoại mới sẽ mở ra yêu cầu chọn mẫu dự án. Bạn sẽ thấy hai menu thả xuống ở trên cùng bên trái của cửa sổ mẫu. Chọn “.NET Core” và “ASP.NET Core 2.0” từ các trình đơn thả xuống này.
Sau đó, chọn mẫu “Ứng dụng web (Model-View-Controller)”. Nhấp vào nút Thay đổi xác thực; hộp thoại “Thay đổi xác thực” sẽ mở ra. Chọn “Tài khoản Người dùng Cá nhân” và nhấp vào OK. Bây giờ hãy nhấp vào OK một lần nữa để tạo ứng dụng web. Trước khi chạy ứng dụng, chúng tôi cần áp dụng các di chuyển cho ứng dụng của mình.
Điều hướng đến Công cụ >> Trình quản lý gói Nuget >> Bảng điều khiển Trình quản lý gói.
Nó sẽ mở Bảng điều khiển Trình quản lý Gói. Đặt lệnh Update-Database và nhấn enter. Điều này sẽ cập nhật cơ sở dữ liệu bằng cách sử dụng Entity Framework Code First Migrations.
Nhấn F5 để chạy ứng dụng. Bạn sẽ thấy một trang chủ như hình dưới đây.
Lưu ý URL từ thanh địa chỉ của trình duyệt. Trong trường hợp này, URL là http: // localhost: 52676 /. Chúng tôi cần URL này để định cấu hình ứng dụng LinkedIn mà chúng tôi sẽ thực hiện trong phần tiếp theo.
Tạo ứng dụng LinkedIn
Điều hướng đến https://www.linkedin.com/developer/apps và đăng nhập bằng tài khoản LinkedIn của bạn. Nếu chưa có tài khoản LinkedIn, bạn cần tạo một tài khoản. Bạn không thể tiếp tục nếu không có tài khoản LinkedIn. Khi bạn đã đăng nhập, bạn sẽ được chuyển hướng đến trang Ứng dụng của tôi tương tự như trang được hiển thị bên dưới.
Nhấp vào nút Tạo ứng dụng để điều hướng đến trang Tạo ứng dụng mới . Tại đây bạn cần điền các thông tin chi tiết để tạo một ứng dụng LinkedIn mới.
- Tên công ty: Đặt tên thích hợp. Ở đây chúng tôi đang sử dụng tên DemoCompany .
- Tên ứng dụng: Đây là tên ứng dụng LinkedIn của bạn.
Lưu ý quan trọng
Không sử dụng từ “LinkedIn” trong tên sản phẩm của bạn. Bạn sẽ được nhắc với lỗi “ Tên ứng dụng không được chứa LinkedIn ” và bạn sẽ không được phép tạo ứng dụng. Điều này có nghĩa là “LinkedinAuthDemo” là tên không hợp lệ. Tham khảo hình ảnh bên dưới.
- Mô tả ứng dụng: Đưa ra mô tả phù hợp về ứng dụng của bạn.
- Biểu trưng ứng dụng: Bạn cần tải lên biểu trưng cho ứng dụng của mình. Nếu bạn không có logo, chỉ cần tải lên bất kỳ hình ảnh nào. Vui lòng cung cấp hình ảnh biểu trưng của ứng dụng của bạn, ở định dạng PNG hoặc JPEG. Hình ảnh phải có hình vuông và ít nhất 80 x 80 pixel và kích thước không lớn hơn 5 MB.
- Sử dụng ứng dụng: Chọn một giá trị thích hợp từ trình đơn thả xuống.
- URL trang web: Cung cấp URL cho trang web công cộng của bạn. Đối với hướng dẫn này, chúng tôi sẽ sử dụng một URL giả http://demopage.com .
Lưu ý quan trọng
Nếu bạn sử dụng định dạng URL, www.demopage.com , bạn sẽ gặp lỗi " Vui lòng nhập một URL hợp lệ ." Luôn sử dụng định dạng URL, http://demopage.com . Tham khảo hình ảnh bên dưới.
- Email doanh nghiệp: Cung cấp id email của bạn. Nếu bạn không muốn cung cấp id email cá nhân của mình thì bạn cũng có thể sử dụng bất kỳ id email giả nào, chẳng hạn như xyz@gmail.com
- Điện thoại Doanh nghiệp: Cung cấp số liên lạc của bạn. Đối với hướng dẫn này, tôi đang sử dụng một số điện thoại giả, 123456789.
Hãy nhớ rằng tất cả các trường của biểu mẫu này là bắt buộc, vì vậy bạn cần cung cấp một giá trị thích hợp cho tất cả chúng. Khi bạn đã cung cấp tất cả các chi tiết, hãy nhấp vào nút Gửi . Nếu không có lỗi trong biểu mẫu, ứng dụng LinkedIn của bạn sẽ được tạo thành công và bạn sẽ được chuyển hướng đến trang chủ của ứng dụng.
Tại đây, bạn thấy các trường Client ID và Client Secret trong phần Khóa xác thực. Hãy lưu ý các giá trị này vì chúng tôi sẽ cần chúng để định cấu hình xác thực LinkedIn trong ứng dụng web của chúng tôi. Trong các trường URL chuyển hướng được ủy quyền cung cấp URL cơ sở của ứng dụng của bạn với / đăng nhập-linkedin được thêm vào nó. Đối với hướng dẫn này, URL sẽ là http: // localhost: 52676 / signin-linkedin . Sau khi nhập URL, hãy nhấp vào nút Thêm bên cạnh nó để thêm giá trị. Tham khảo hình ảnh bên dưới:
Định cấu hình ứng dụng web để sử dụng xác thực LinkedIn
Chúng tôi sẽ sử dụng gói Nuget của bên thứ ba, AspNet.Security.OAuth.LinkedIn , để triển khai xác thực LinkedIn trong ứng dụng web của chúng tôi. Mở trình quản lý gói NuGet (Công cụ >> Trình quản lý gói NuGet >> Bảng điều khiển Trình quản lý gói) và đặt lệnh sau. Nhấn enter để cài đặt nó.
Install-Package AspNet.Security.OAuth.LinkedIn -Version 2.0.0-rc2-final
Gói NuGet này được duy trì bởi aspnet-Contrib. Bạn có thể đọc thêm về gói này tại đây .
Chúng ta cần lưu trữ các giá trị trường Client ID và Client Secret trong ứng dụng của mình. Chúng tôi sẽ sử dụng công cụ Trình quản lý bí mật cho mục đích này. Công cụ Trình quản lý Bí mật là một công cụ dự án có thể được sử dụng để lưu trữ các bí mật như mật khẩu, khóa API, v.v. cho một dự án .NET Core trong quá trình phát triển. Với công cụ Trình quản lý bí mật, chúng tôi có thể liên kết các bí mật của ứng dụng với một dự án cụ thể và có thể chia sẻ chúng trên nhiều dự án.
Mở ứng dụng web của chúng tôi một lần nữa và nhấp chuột phải vào dự án trong Trình khám phá giải pháp và chọn "Quản lý bí mật người dùng" từ trình đơn ngữ cảnh.
Một tệp secret.json sẽ mở ra. Đặt đoạn mã sau vào đó.
{
"Authentication:LinkedIn:ClientId": "Your ClientId here",
"Authentication:LinkedIn:ClientSecret": "Your ClientSecret here"
}
Bây giờ, mở tệp Startup.cs và đặt mã sau vào phương thức ConfigureServices .
services.AddAuthentication().AddLinkedIn(options =>
{
options.ClientId = Configuration["Authentication:LinkedIn:ClientId"];
options.ClientSecret = Configuration["Authentication:LinkedIn:ClientSecret"];
});
Trong phần mã này, chúng tôi đang đọc các giá trị Client ID và Client Secret từ tệp secret.json cho mục đích xác thực.
Vì vậy, cuối cùng, Startup.cs sẽ giống như thế này.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Identity;
using Microsoft.EntityFrameworkCore;
using Microsoft.AspNetCore.Hosting;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using LinkdinAuth.Data;
using LinkdinAuth.Models;
using LinkdinAuth.Services;
namespace LinkdinAuth
{
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.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlServer(Configuration.GetConnectionString("DefaultConnection")));
services.AddIdentity<ApplicationUser, IdentityRole>()
.AddEntityFrameworkStores<ApplicationDbContext>()
.AddDefaultTokenProviders();
services.AddAuthentication().AddLinkedIn(options =>
{
options.ClientId = Configuration["Authentication:LinkedIn:ClientId"];
options.ClientSecret = Configuration["Authentication:LinkedIn:ClientSecret"];
});
// Add application services.
services.AddTransient<IEmailSender, EmailSender>();
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.UseBrowserLink();
app.UseDeveloperExceptionPage();
app.UseDatabaseErrorPage();
}
else
{
app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();
app.UseAuthentication();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
}
}
}
Và, với điều này, ứng dụng của chúng tôi đã sẵn sàng.
Demo thực thi
Khởi chạy ứng dụng và nhấp vào đăng nhập ở góc trên cùng bên phải của trang chủ.
Bạn sẽ được chuyển hướng đến trang http: // localhost: 52676 / Tài khoản / Đăng nhập , nơi bạn có thể thấy tùy chọn đăng nhập bằng LinkedIn ở phía bên phải của trang.
Nhấp vào nút LinkedIn sẽ đưa bạn đến trang ủy quyền LinkedIn, nơi bạn sẽ được yêu cầu điền thông tin đăng nhập LinkedIn của mình và cho phép ứng dụng LinkedIn sử dụng tài khoản LinkedIn của bạn.
Nhập thông tin đăng nhập LinkedIn của bạn và nhấp vào nút Cho phép truy cập . Ứng dụng sẽ mất vài phút để xác thực tài khoản LinkedIn của bạn và sau khi xác thực thành công với LinkedIn, bạn sẽ được chuyển hướng đến trang đăng ký bên trong ứng dụng của chúng tôi, nơi bạn cần điền id email để gắn thẻ với tài khoản của mình.
Cung cấp một id email và nhấp vào đăng ký. Bạn sẽ được chuyển đến trang chủ một lần nữa nhưng lần này bạn cũng có thể thấy id email đã đăng ký của mình ở góc trên cùng bên phải. Do đó, chúng tôi đã đăng nhập thành công vào ứng dụng ASP .NET Core của mình bằng LinkedIn.
Phần kết luận
Chúng tôi đã tạo thành công một ứng dụng LinkedIn và sử dụng nó để xác thực ứng dụng ASP.NET Core của chúng tôi.
Bạn có thể lấy mã nguồn từ GitHub .
Xin lưu ý rằng tệp secret.json chứa các giá trị giả. Do đó, hãy thay thế các giá trị bằng các khóa của ứng dụng Google của bạn trước khi thực thi nó.
Bạn có thể kiểm tra các bài viết khác của tôi về ASP .NET Core tại đây .
Có thể bạn quan tâm
