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:

Part 1: Tìm hiểu về IdentityServer 4
Part 2: Identity Server 4: Bảo vệ Web API bằng Access Token

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 :

Tạo 1 trang đăng nhập tại Account/Login.
Tạo 1 file callback nằm ở thư mục wwwroot.
Thực hiện đăng nhập bằng cách gọi request trong trang Account Login.
Đăng nhập user, password trong trang IdentityServer 4.
Cấp quyền truy cập
Trả về trang callback.
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

ASP.NET MVC: Cơ bản về Validation

Validation (chứng thực) là một tính năng quan trọng trong ASP.NET MVC và được phát triển trong một thời gian dài. Validation vắng mặt trong phiên bản đầu tiên của asp.net mvc và thật khó để tích hợp 1 framework validation của một bên thứ 3 vì không có khả năng mở rộng. ASP.NET MVC2 đã hỗ trợ framework validation do Microsoft phát triển, tên là Data Annotations. Và trong phiên bản 3, framework validation đã hỗ trợ tốt hơn việc xác thực phía máy khách, và đây là một xu hướng của việc phát triển ứng dụng web ngày nay.

Nhật ký học tập

Tìm kiếm Blog này