programing

keyclock 기본 로그인 페이지 및 프로젝트 로그인 페이지 사용 안 함

kingscode 2023. 3. 22. 22:45
반응형

keyclock 기본 로그인 페이지 및 프로젝트 로그인 페이지 사용 안 함

angular.js 웹 어플리케이션을 만들고 통합 방법을 찾고 있습니다.keycloak프로젝트에 포함시킬 수 있습니다.많은 튜토리얼을 읽고 시청했습니다.대부분의 튜토리얼에는, 다음의 디폴트 로그인 페이지에서 로그/등록하는 유저가 있는 것을 알 수 있습니다.keycloak그런 다음 앱으로 리디렉션됩니다.

사용하고 싶은 로그인 페이지와 등록 페이지를 직접 디자인했습니다.대신 어떻게 그것들을 사용할 수 있을까요?keycloak체납.호출할 수 있는 API가 있거나 백엔드로 호출할 수 있는 API가 있나요?키 잠금에 사용할 수 있는 스프링 어댑터가 있다고 들었는데 사용할 수 있나요?어떤 예에 대한 링크도 좋습니다.

두 번째 질문은 등록하는 동안 주소, dob, 성별 등의 사용자 세부사항을 추가할 수 있는지 여부입니다.keycloak제 등록 페이지에 그 정보가 필요하기 때문입니다.

API 역할 확장

POST to your/keycloak/url/auth/realms/master/protocol/openid-connect/token

데이터 포함:

{

    client_id : 'Id_of_your_client',

    username : 'your_username',
    password : '@#$%^&',
    grant_type : "password"

}

초기 액세스 토큰과 새로 고침 토큰을 제공합니다.

그리고.

같은 URL 에 POST 합니다.

데이터:

{

    client_id : 'Id_of_your_client',

   // client_secret : 'optional depending on the type of client',

    grant_type : "refresh_token" ,

    refresh_token : refresh_token_you_got_earlier 

}

는 새로운 리프레시 토큰과 액세스토큰을 클릭합니다.이러한 토큰은 Keyclock이 인가/인증을 체크하는 토큰입니다.

REST API를 통해 사용자 자신의 로그인을 만들고 자격 증명을 키클로크로 전송할 수 있습니다.접근 토큰을 가지고 있으면 키클로크 보호 리소스에 대한 진행 중인 요청 헤더에 넣습니다.

headers :{

  Authorization : 'Bearer ' +  access_token_you_got

}

3단계:

  1. keycloak/themes/directory create 폴더(: myTheme).

 directory structure

  1. myTheme 폴더에 커스텀 로그인 페이지를 배치합니다.

    (구조는 기본 테마나 키코크 테마와 동일해야 합니다.기본 테마를 복사하고 이름을 변경하여 커스터마이즈하는 것이 좋습니다.)

  2. [ Realm Settings ]> [ Themes ]> [ Login Theme ]의 keyclock 관리 콘솔로 이동하여 myTheme 를 선택합니다.

enter image description here

Java를 통해 Keycloak 로그인 페이지를 클릭하여 응답을 얻으려면 다음 코드를 사용합니다.

String uri = "http://localhost:7080/auth/realms/{RealmName}/protocol/openid-connect/token";

            HttpClient client = HttpClientBuilder.create().build();
            HttpPost post = new HttpPost(uri);
            post.setHeader("User-Agent",
                    "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36");
            List<BasicNameValuePair> urlParameters = new ArrayList<BasicNameValuePair>();
            urlParameters.add(new BasicNameValuePair("grant_type", "password"));
            urlParameters.add(new BasicNameValuePair("client_id", {ClientName}));
            urlParameters.add(new BasicNameValuePair("username", {UserName}));
            urlParameters.add(new BasicNameValuePair("password", {Password}));
            post.setEntity(new UrlEncodedFormEntity(urlParameters));
            HttpResponse response = client.execute(post);
            System.out.println("Response Code : " + response.getStatusLine().getStatusCode());
            BufferedReader rd = new BufferedReader(new InputStreamReader(response.getEntity().getContent()));
            StringBuffer result = new StringBuffer();
            String line1 = "";
            while ((line1 = rd.readLine()) != null) {
                result.append(line1);
            }
            System.out.println(result);

사용자 이름과 비밀번호가 유효한 경우response.getStatusLine().getStatusCode()값은 액세스와 함께 HTTP 200으로 지정됩니다.토큰새로 고침토큰. 그렇지 않으면response.getStatusLine().getStatusCode()는 값을 HTTP 403으로, 데이터를 다음과 같이 지정합니다.{"error":"invalid_grant","error_description":"Invalid user credentials"}

  • You probably should stick with the Keycloack's forms. They bring nice features (SSO, pw reset, etc.) and are fully customizable (via themes). However, there it is possible to obtain the Access Token via so called Direct Access Grant. It can be done via Keycloak REST API.
  • Storing the custom user info (gender, job, etc.) is done by User Attributes

Both topics are more or less covered in the official Keycloak Docs.

Put your login theme in keycloak themes directory and by admin loging change login theme setting and choose your theme from drop-down. Your login theme must in keycloak default theme formate so to create your's please refer keycloak default theme and design your's according to that.

You can refer following Keycloak theme configuration

From the docs, it seems that you extend themes or override individual resources (templates, stylesheets, etc.): https://www.keycloak.org/docs/latest/server_development/#creating-a-theme

Regarding the additional user details, again from the docs: https://www.keycloak.org/docs/latest/server_development/#_custom_user_attributes

You can write your custom inline css in

keycloak/themes/base/template.ftl

And

keycloak/themes/base/login.ftl

then you will be able to use keycloak login page but ui like project login page

ReferenceURL : https://stackoverflow.com/questions/39356300/avoid-keycloak-default-login-page-and-use-project-login-page

반응형