HTML5/JS

Tài liệu này mô tả cách tích hợp Galaxy ID để bảo vệ các ứng dụng HTML5/JavaScript.

Tên ứng dụng: Galaxy ID

Phiên bản: 0.1

Thông tin kỹ thuật:

Phù hợp với các ứng dụng sử dụng HTML5/Javascript.

Từ viết tắt và thuật ngữ

No.

Tên thuật ngữ

Mô tả

GID

Galaxy ID

SSO

Single Sign-On

Client

Ứng dụng muốn tích hợp với GID

Tóm tắt

Galaxy ID là một hệ thống SSO (đăng nhập một lần, dùng ở nhiều nơi). GID cung cấp các endpoint cho phép client (ứng dụng) có thể xác thực một lần và uỷ quyền ở nhiều client (ứng dụng) khác nhau.

Chuẩn bị

Chúng ta sẽ sử dụng một thư viện Javascript là kecloak-js để tích hợp Galaxy ID. Có thể cài đặt thông qua:

Hoặc cũng có thể sử dụng trực tiếp keycloak.js

Tích hợp

Khởi tạo keycloak

Đặt file keycloak.json (được cung cấp) cùng vị trí với trang HTML và khởi tạo:

<html>
<head>
    <script src="keycloak.js"></script>
    <script>
        function initKeycloak() {
            const keycloak = new Keycloak();
            keycloak.init().then(function(authenticated) {
                alert(authenticated ? 'authenticated' : 'not authenticated');
            }).catch(function() {
                alert('failed to initialize');
            });
        }
    </script>
</head>
<body onload="initKeycloak()">
    <!-- your page content goes here -->
</body>
</html>

Hoặc cũng có thể chỉ định file keycloak.json ở một nơi khác:

 const keycloak = new Keycloak('http://localhost:8080/myapp/keycloak.json');

Mặc định để xác thực, chúng ta cần phải gọi hàm login. Tuy nhiên có 2 lựa để tự động hoá công việc xác thực là:

login-required: sẽ xác thực nếu đã login hoặc hiển thị trang login nếu chưa xác thực.
check-sso: sẽ chỉ xác thực nếu người dùng đã đăng nhập, nếu người dùng chưa đăng nhập thì sẽ redirect về lại ứng dụng.

Truyền vào onLoad vào hàm keycloak.init() để sử dụng.

keycloak.init({
    onLoad: 'check-sso'
})

Chúng ta cũng có thể sử dụng check-sso một cách thầm lặng mà không redirect đến server và ngược lại mà thực hiện thông qua một iframe ẩn:

keycloak.init({
    onLoad: 'check-sso',
    silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html'
})

Token

Sau khi đã xác thực thành công, chúng ta có thể lấy Bearer token từ keycloak.token

const loadData = function () {
    document.getElementById('username').innerText = keycloak.subject;

    const url = 'http://localhost:8080/restful-service';

    const req = new XMLHttpRequest();
    req.open('GET', url, true);
    req.setRequestHeader('Accept', 'application/json');
    req.setRequestHeader('Authorization', 'Bearer ' + keycloak.token);

    req.onreadystatechange = function () {
        if (req.readyState == 4) {
            if (req.status == 200) {
                alert('Success');
            } else if (req.status == 403) {
                alert('Forbidden');
            }
        }
    }

    req.send();
};

Vì thời hạn của access token ngắn nên chúng ta cần phải cập nhật token mới bằng cách gọi phương thức updateToken

keycloak.updateToken(30).then(function() {
    loadData();
}).catch(function() {
    alert('Failed to refresh token');
});

Lấy thông tin user

Có thể lấy thông tin của user từ token trả về của GID (khuyên dùng vì giảm tải được 1 lượng request đáng kể lên server) bằng cách gọi keycloak.tokenParsedtokenParsed

Hoặc cũng có thể thông qua Restful API ở phần tiếp theo.

APIs

Lấy thông tin user

URL: <host>/realms/<realmName>/protocol/openid-connect/userinfo

Method: GET

Header: Authorization: Bearer <access token> (keycloak)

Example request:

curl --location --request GET 'https://gid-stg.demoapp.info/realms/demo/protocol/openid-connect/userinfo' \
--header 'Authorization: Bearer <access token>'

Example response:

{
    "sub": "3d83889f-297f-4283-8602-73c6b60630be",
    "email_verified": false,
    "name": "Duy1 Doan",
    "preferred_username": "+84395883117",
    "given_name": "Duy1",
    "family_name": "Doan",
    "email": "[email protected]"
}

Logout dùng API

URL: <host>/realms/<realmName>/protocol/openid-connect/logout

Method: GET

Header: Authorization: Bearer <access token> (keycloak)

Example request:

curl --location --request POST 'https://gid-stg.demoapp.info/realms/gid-demo-testing/protocol/openid-connect/logout' \
--header 'Authorization: Bearer <access token>'
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'client_id=gid-testing' \
--data-urlencode 'refresh_token=<refresh token>'

Example response:

Status: 204 (No Content)

keycloak-documentation/javascript-adapter.adoc at main · keycloak/keycloak-documentation (github.com)

NextReactJs

Last updated 3 years ago

hashtagThông tin kỹ thuật:

hashtagTừ viết tắt và thuật ngữ

hashtagTóm tắt

hashtagChuẩn bị

hashtagTích hợp

hashtagKhởi tạo keycloak

hashtagToken

hashtagLấy thông tin user

hashtagAPIs

hashtagLấy thông tin user

hashtagLogout dùng API

Thông tin kỹ thuật:

Từ viết tắt và thuật ngữ

Tóm tắt

Chuẩn bị

Tích hợp

Khởi tạo keycloak

Token

Lấy thông tin user

APIs

Lấy thông tin user

Logout dùng API