Edited at

Keycloakのソーシャル連携(SNS連携)を試してみる


概要

Keycloakアドベンドカレンダー15日目は、ソーシャル認証によりTwitterのアカウントでKeycloakにログインする手順について説明します。ソーシャル認証とは、GoogleやFacebookなどのSNSにユーザーの認証を委譲するKeycloakの仕組みです。

例えば、Twitterにログイン済みのユーザーであれば、Keycloakと連携する全てのサービス・プロバイダーやアプリケーションに、追加の認証を要求されずにアクセスすることができます。これを実現するために、OAuthという認可のプロトコルが利用されています。シーケンスは以下のようになります。

seq.png

今回はこれを実際に試して見ます。手順は以下の通りで、とても簡単です。


  1. Twitterの設定

  2. Keycloakの設定

※今回は簡略化のため、サービス・プロバイダーはKeycloakのユーザー・プロファイル画面とします。


はじめる前に

このチュートリアルの操作をはじめる前に、Keycloakのセットアップを完了し、管理者ユーザーを作成する必要があります。Keycloakアドベンドカレンダー2日目の記事を参考にそれらの作業を実施しておいて下さい。


設定


1. Twitterの設定

まずはTwitterの設定を行いますが、その際に必要なKeycloakの設定値をコピーするので、いったん管理者アカウントでKeycloakにログインして下さい。ログインしたら、左側の「アイデンティティプロバイダー」をクリックします。「Social」の中にある「Twitter」をクリックします。

68747470733a2f2f71696974612d696d6167652d73746f72652e73332e616d617a6f6e6177732e636f6d2f302f34333836392f36656232376239362d653730372d373831392d643434612d3538333364643635376332362e706e67.png

Twitterの設定画面で入力するので、この画面の一番上にある項目の「リダイレクトURI」をコピーします。逆に、Twitterの設定後にこの画面にもTwitterの設定値を入力するので、ブラウザはこのまま閉じないでいて下さい。

tt.png

次に、TwitterのApplication Managementのページにアクセスします。

t1.png

画面が表示されたら、「Create New App」ボタンをクリックして下さい。

ttttt.png

以下のフィールドに値を入力して下さい。

項目
設定値

Name
このアプリケーションの名前

Description
このアプリケーションの説明

Website
http://twitter.com

Callback URL
先ほどコピーしたリダイレクトURI。ただし、ホストがlocalhostとなっている場合は、127.0.0.1に変更して下さい。(http://127.0.0.1:8080/auth/realms/demo/broker/twitter/endpoint)

入力したら、「Developer Agreement」のチェックボックスにチェックをいれて、「Create your twitter application」ボタンをクリックします。


:information_source: この際に、次のようなエラーが表示された場合は、エラーメッセージにある通り、 https://support.twitter.com/articles/110250-adding-your-mobile-number-to-your-account-via-web で、Twitterのアカウントに電話番号を設定して下さい。

t3err.png


作成したら、「Keys and Access Tokens」のタブをクリックします。

t5 (1).png

「Application Settings」の「Consumer Key (API Key)」の値と「Consumer Secret (API Secret)」の値を今度はKeycloakの設定画面に入力するので、このページはこのまま開いておいて下さい。

t6.png


2. Keycloakの設定

次に、Keycloakの設定を行います。最初に開いておいたKeycloakの「アイデンティティプロバイダーの登録」画面で、「Consumer Key (API Key)」の値と「Consumer Secret (API Secret)」の値を今度はKeycloakの設定画面の「クライアントID」、「クライアントシークレット」に入力して下さい。

tr1.png

「保存」ボタンをクリックしたら、設定は完了です。


動作確認

では、動作確認してみましょう。利用者ページ(http://localhost:8080/auth/realms/master/account)にアクセスして下さい。

tr3.png

ログイン画面の右側にTwitterのボタンが表示されていることが分かると思います。このボタンをクリックして下さい。Twitterにログイン済みであれば、アプリケーションの連携画面が表示されます(※未ログインであれば、Twitterのログイン画面が表示されるので、ログインして下さい)。

tr4.png

OAuthによる認可の画面なので、見覚えのある方も多いのではないでしょうか。「連携アプリを認証」ボタンをクリックすると、Keycloakのアカウント情報の更新画面が表示されます。

tr5.png

:information_source: デフォルトでは初回ログイン時にユーザー属性を設定するようになってますが、この動作は管理コンソールでの設定により変更可能です。

「Eメール」を入力して、保存ボタンをクリックして下さい。問題がなければ、次のようなKeycloakの利用者ページが表示されます。

tr8.png

以上で終了です。

ちなみに、このユーザーはKeycloakにも自動的に登録されたことが、ユーザー一覧画面で確認できます。

ttyu.png


最後に

ソーシャル認証はTwitterの他にもFacebook、Google、GitHub、LinkedIn、Microsoft、StackOverflowなどがサポートされており、将来的にはさらなる追加も計画されています。


参考資料

 mark.png