> For the complete documentation index, see [llms.txt](https://docs.galaxyjoy.vn/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.galaxyjoy.vn/integration/html5-js.md).
# HTML5/JS
**Software Name:** Galaxy ID
**Software Version:** 0.1
### Acronyms and Terms
No.
Words
Descriptions
1
GID
Galaxy ID
2
SSO
Single Sign-On
4
Client
An application that integrates for GID
### Summary
Galaxy ID is an SSO system. It provides endpoints that enable clients to authenticate and authorize in many places.
### Prepare
We will use a Javascript library, kecloak-js to integrate Galaxy ID. It can be installed via:
* NPM:
* Yarn:
Or you can also use keycloak.js directly.
### Integrate
#### Initialize **keycloak**
Place the keycloak.json file (supplied) in the same location as the HTML page and initialize:
```
```
Or you can also specify the keycloak.json file somewhere else:
```
const keycloak = new Keycloak('http://localhost:8080/myapp/keycloak.json');
```
By default, for authentication, we need to call login. However, there are two options to automate the authentication work:
* *login-required:* It will authenticate if logged in or display the login page if not authenticated.
* *check-sso:* It will only authenticate if the user is logged in. If the user is not logged in, it will redirect back to the application.
To use, pass onLoad to the keycloak.init () function.
```
keycloak.init({
onLoad: 'check-sso'
})
```
We can also use check-sso silently without redirecting to the server and vice versa, but through a hidden iframe:
```
keycloak.init({
onLoad: 'check-sso',
silentCheckSsoRedirectUri: window.location.origin + '/silent-check-sso.html'
})
```
#### Token
After successful authentication, we can get Bearer token from 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();
};
```
Since the lifetime of the access token is short, we need to update the new token by calling the updateToken method.
```
keycloak.updateToken(30).then(function() {
loadData();
}).catch(function() {
alert('Failed to refresh token');
});
```
#### Get user information
The user's information can be obtained from the returned token of the GID (recommended because it reduces the load of a significant request on the server) by calling keycloak.token parsed token parsed
Or it can also be done through the Restful API in the next section.
### APIs
#### Get user information
**URL**: \/realms/\/protocol/openid-connect/userinfo
**Method**: GET
**Header**: Authorization: Bearer \ *(keycloak)*
Example request:
```
curl --location --request GET 'https://gid-stg.demoapp.info/realms/demo/protocol/openid-connect/userinfo' \
--header 'Authorization: Bearer '
```
Example response:
```
{
"sub": "3d83889f-297f-4283-8602-73c6b60630be",
"email_verified": false,
"name": "Duy1 Doan",
"preferred_username": "+84395883117",
"given_name": "Duy1",
"family_name": "Doan",
"email": "duydoan1411@gmail.com"
}
```
#### Logout with API
**URL**: \/realms/\/protocol/openid-connect/logout
**Method**: GET
**Header**: Authorization: Bearer \ *(keycloak)*
Example request:
```
curl --location --request POST 'https://gid-stg.demoapp.info/realms/gid-demo-testing/protocol/openid-connect/logout' \
--header 'Authorization: Bearer '
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'client_id=gid-testing' \
--data-urlencode 'refresh_token='
```
Example response:
* Status: 204 (No Content)
[keycloak-documentation/javascript-adapter.adoc at main ยท keycloak/keycloak-documentation (github.com)](https://github.com/keycloak/keycloak-documentation/blob/main/securing_apps/topics/oidc/javascript-adapter.adoc)