Helpex - Trao đổi & giúp đỡ Đăng nhập

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.

Xác thực bằng LinkedIn trong ASP.NET Core 2.0Sau 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. Xác thực bằng LinkedIn trong ASP.NET Core 2.0Trướ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.

Xác thực bằng LinkedIn trong ASP.NET Core 2.0Nhấn F5 để chạy ứng dụng. Bạn sẽ thấy một trang chủ như hình dưới đây. Xác thực bằng LinkedIn trong ASP.NET Core 2.0Lư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.

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

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.

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

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 IDClient 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:

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

Đị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 IDClient 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.

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

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 IDClient 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ủ.

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

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.

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

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.

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

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.

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

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.

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

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 .

14 hữu ích 0 bình luận 7.8k xem chia sẻ

Có thể bạn quan tâm

loading