web-dev-qa-db-ja.com

キークロークのデフォルトのログインページを避け、プロジェクトのログインページを使用する

Angular.js Webアプリケーションの作成に取り組んでおり、keycloakをプロジェクトに統合する方法を探しています。私は多くのチュートリアルを読んで見ましたが、ほとんどのユーザーがkeycloakのデフォルトのログインページを介してログイン/登録し、アプリにリダイレクトします。

使用する独自のログインおよび登録ページを設計しました。 keycloak defaultの代わりにそれらを使用するにはどうすればよいですか。私が呼び出すことができる、または私のバックエンドがそれを行う可能性のあるAPIはありますか？キークロークに使用できるスプリングアダプターもありますが、使用できますか？どんな例へのリンクでも良いでしょう。

2番目の質問は、登録中にkeycloakにアドレス、dob、性別などのユーザー詳細を追加できますか？私の登録ページにはこれらの情報が必要だからです。

javaangularjskeycloakkeycloak-services
30
krs8888

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 

}

これらのトークンは、keycloakが承認/認証のためにチェックするものです。

独自のログインを行い、REST APIを介して資格情報をkeycloakに送信し、アクセストークンを取得したら、それをkeycloakで保護されたリソースへの進行中のリクエストのヘッダーに入れるだけです。

headers :{

  Authorization : 'Bearer ' +  access_token_you_got

}
36
UchihaItachi

3つのステップ：

  1. keycloak/themes /ディレクトリに、たとえばmyTheme。

directory structure

  1. myThemeフォルダーにカスタムログインページを配置します

    （構造は基本テーマまたはキークロークテーマと同じである必要があります。基本テーマをコピーし、名前を変更してカスタマイズすることをお勧めします）。

  2. Keycloakの管理コンソールに移動し、Realm Settings> Themes> Login Themeを選択してmyTheme 。

enter image description here

28
Tomas Marik
  • Keycloackのフォームに固執する必要があります。これらはニースの機能（SSO、pwリセットなど）をもたらし、（テーマを介して）完全にカスタマイズ可能です。ただし、いわゆるDirect Access Grantを介してAccess Tokenを取得することができます。 Keycloak REST API 経由で実行できます。
  • カスタムユーザー情報（性別、仕事など）の保存は、ユーザー属性によって行われます

両方のトピックは、公式の Keycloak Docs で多かれ少なかれカバーされています。

2
Yuri

ログインテーマをkeycloakテーマディレクトリに配置し、管理者がログインテーマの設定を変更してログインし、ドロップダウンからテーマを選択します。ログインテーマはデフォルトのキークロームテーマ形式である必要があるため、作成するには、キークロークのデフォルトテーマを参照し、それに従ってデザインしてください。

以下を参照できます Keycloakテーマ設定

2
Aman Jaiswal

Javaでキークロークログインページにアクセスして応答を取得する場合は、以下のコードを使用します。

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（）は、accessTokenおよびRefreshTokenとともに値として200を提供します。それ以外の場合、response.getStatusLine（）。getStatusCode（）は値を403として、データを{{error "：" invalid_grant "、" error_description "：" Invalid user credentials "}として提供します。

2
whywake