Skip to main content

Identity Server 4: Thêm Quickstart UI và OIDC client (Part 3)

Trong bài viết này, mình sẽ hướng dẫn các bạn tích hợp giao diện QuickStartUI và oidc-client vào dự án.
Tham khảo 2 bài viết trước đây:
Mình sẽ xây dựng 2 server:
  • Authorization Server: sử dụng port 5000.
  • Web API: sử dụng port 4000

QuickStart UI

Đây là 1 repository chứa giao diện MVC cơ bản cho người dùng: đăng nhập, đăng xuất, trang cấp quyền,...
Github: https://github.com/IdentityServer/IdentityServer4.Quickstart.UI

Bạn dùng PowerShell download Quickstart UI về:
iex ((New-Object System.Net.WebClient).DownloadString('https://raw.githubusercontent.com/IdentityServer/IdentityServer4.Quickstart.UI/release/get.ps1'))
Cấu trúc thư mục Quickstart UI sau khi tải về
Bạn copy toàn bộ thư mục Quickstart vào project IdentityServer4Demo
Bạn thêm đoạn code vào hàm Configure()
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
 //some old code here …
 //app.UseMvc();
 app.UseStaticFiles();
 app.UseMvcWithDefaultRoute();
}
Compile project và run project, bạn sẽ thấy giao diện:

Sử dụng oidc-client

Đây là thư viện javascript để cung cấp giao thức OpenID Connect (OIDC) và OAuth2 hỗ trợ cho phía client, sử dụng javascript. Thư viện hỗ trợ các hàm đăng nhập, đăng xuất, và quản lý access token.
[oidc-client-js is a] library to provide OpenID Connect (OIDC) and OAuth2 protocol support for client-side, browser-based JavaScript client applications. Also included is support for user session and access token management
Trong ví dụ dưới đây, mình sẽ demo cách đăng nhập bằng hình thức Implicit vào IdentityServer, gọi web API web bằng access token, và đăng xuất khỏi IdentityServer.
Các bước thực hiện 1 Request :
  1. Tạo 1 trang đăng nhập tại Account/Login.
  2. Tạo 1 file callback nằm ở thư mục wwwroot.
  3. Thực hiện đăng nhập bằng cách gọi request trong trang Account Login.
  4. Đăng nhập user, password trong trang IdentityServer 4.
  5. Cấp quyền truy cập
  6. Trả về trang callback.
  7. Chuyển sang 1 trang bất kỳ mà người dùng quy định.
Download Example mẫu từ IdentityServer 4 từ https://github.com/IdentityServer/IdentityServer4.Samples
Bạn mở project ví dụ từ đường dẫn: IdentityServer4.Samples\Quickstarts\7_JavaScriptClient. Copy file oidc-client.js và file callback.html vào thư mục wwwroot.

Nội dung file Callback:
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script src="/libs/oidc-client-js/oidc-client.js"></script>
    <script>
        new Oidc.UserManager().signinRedirectCallback().then(function () {
            window.location = "/Account/Login";
        }).catch(function (e) {
            console.error(e);
        });
    </script>
</body>
</html>

Bạn tạo 1 action mới tên là Login trong controller Account. Thêm nội dung sau đây vào Login.cshtml:
<h2>Login</h2>

<button id="login">Login</button>
<button id="api">Call API</button>
<button id="logout">Logout</button>

<pre id="results"></pre>

<script src="/libs/oidc-client-js/oidc-client.js"></script>
<script src="/libs/app.js"></script>
Notes: File ví dụ bạn tải về bên dưới bài viết sẽ hơi khác, vì mình có thêm bootstrap vào trong giao diện.

Đăng ký client

Để đăng nhập từ server 4000, bạn cần phải khai báo thêm Client mới trong IdentityServerDemo. Trong file Client.cs, bạn thêm:
new Client {
 ClientId = "oidcClient",
 ClientName = "OIDC Client Javascript Example",
 AllowedGrantTypes = GrantTypes.Implicit,
 AllowAccessTokensViaBrowser = true,

 RedirectUris =           { "http://localhost:4000/callback.html" },
 PostLogoutRedirectUris = { "http://localhost:4000/Home/index" },
 AllowedCorsOrigins =     { "http://localhost:4000" },

 AllowedScopes =
 {
  IdentityServerConstants.StandardScopes.OpenId,
  IdentityServerConstants.StandardScopes.Profile,
  "api1.read"
 }
}

Mở file app.js, bạn chỉnh sửa lại config:
var config = {
    authority: "http://localhost:9000/",
    client_id: "oidcClient",
    redirect_uri: "http://localhost:4000/callback.html",
    response_type: "id_token token",
    scope: "openid profile api1.read",
    post_logout_redirect_uri: "http://localhost:4000/Home/index",
    state: "oauth2"
};
Trường hợp bạn không cho phép truy cập vào Profile, thì trong response_type trả về, chỉ cần token thôi là đủ.
Sau khi nhập username và password, IdentityServer sẽ redirect tới trang consent, yêu cầu bạn cấp quyền thông tin cá nhân. Trường hợp bạn không cho phép truy cập vào Profile, thì trong response_type trả về, chỉ cần token thôi là đủ. Sau khi nhập username và password, IdentityServer sẽ redirect tới trang consent, yêu cầu bạn cấp quyền thông tin cá nhân.
Sau khi bấm Yes, Allow, trình duyệt sẽ redirect lại trang cũ (hoặc trang nào đó mà bạn quy định.

Hàm Call API
function api() {
    mgr.getUser().then(function (user) {
        var url = "http://localhost:4000/identity";

        $.ajax({
                url: url,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader('Authorization', 'bearer ' + user.access_token);
                }
            })
            .done(function (data) {
                if (console && console.log) {
                    console.log("Sample of data:", data);
                }
            });
        
    });
}

Đăng xuất

Khi đăng nhập ở localhost:4000, bạn đã thực hiện 2 thao tác:
  • Đăng nhập ở localhost:9000
  • Lưu token ở localhost:4000
Khi bạn muốn logout, bạn phải làm 2 thao tác:
  • Xóa token ở localhost:4000
  • Gọi hàm logout ở localhost:9000
Logout Protected API Web

Sau khi bấm nút logout, hệ thống sẽ tự redirect sang trang localhost:9000, và logout user đang đăng nhập trong hệ thống.

Hàm javascript để thực thi logout:
function logout() {
    mgr.signoutRedirect();
}
Download toàn bộ ví dụ: http://www.mediafire.com/file/eu2cvybfxtd7ic5

Tham khảo

http://docs.identityserver.io/en/release/quickstarts/7_javascript_client.html

Chúc các bạn thành công!
Nhatkyhoctap's blog

Comments

  1. Update: Hiện tại download url đã thay đổi: iex ((New-Object System.Net.WebClient).DownloadString('https://raw.githubusercontent.com/IdentityServer/IdentityServer4.Quickstart.UI/master/getmaster.ps1'))

    ReplyDelete

Post a Comment

Popular posts from this blog

Lập trình đa luồng với Task

Bài viết được đăng trên Jou Lập trình
Trong phiên bản .NET framework 4.0, Microsoft đã bổ sung nhiều thư viện hỗ trợ việc xử lý đa luồng (multi-threading), nhằm đơn giản hóa việc lập trình lẫn hiệu suất của chương trình. Trong bài viết này, tôi xin hướng dẫn các bạn sử dụng lớp System.Threading.Task.

Tìm hiểu về IdentityServer 4

Trong bài viết này, mình sẽ hướng dẫn các bạn làm quen với thư viện Identity Server 4, và tích hợp các service In-Memory của Identity Server 4 vào Project Web API trong .NET Core.

[ASP.NET MVC] Authentication và Authorize

Một trong những vấn đề bảo mật cơ bản nhất là đảm bảo những người dùng hợp lệ truy cập vào hệ thống. ASP.NET đưa ra 2 khái niệm: Authentication và Authorize
Authentication xác nhận bạn là ai. Ví dụ: Bạn có thể đăng nhập vào hệ thống bằng username và password hoặc bằng ssh.
Authorization xác nhận những gì bạn có thể làm. Ví dụ: Bạn được phép truy cập vào website, đăng thông tin lên diễn đàn nhưng bạn không được phép truy cập vào trang mod và admin.