LoginSignup
4
1

More than 3 years have passed since last update.

OAuth2.0/OpenID Connectの利用(1) : ソーシャルログインでOpenAMにユーザ認証してみる(Facebook編)

Last updated at Posted at 2019-10-25

はじめに

OAuth2.0/OpenID Connectは認証連携の方法のひとつと言えますが、それをとりまく仕様やユースケース、具体的な実装方法や脆弱性における対応方法等を勉強しようとするとなかなかハードで腰を据えて考えるのは大変そうだなとちょっと構えてしまうかと思います。
そこでまずは理論はおいといて、カジュアルに実際のソフトウェアで試してみようと思います。
今回は第1回として、Facebookにユーザログインした認証情報を用いてOpenAMにもログインしてみます。

Facebookの設定

※この記事を投稿した時点での設定方法なので現在は変わっている可能性があります。

Facebookにはあらかじめ、ユーザ登録をしてログイン出来るようにしておきます。
下記URLにアクセスします。
https://developers.facebook.com/
facebook_dev1.png
[マイアプリ]のメニューから[アプリの作成]のリンクを押します。

facebook_dev2.png
[表示名]に適当な名称を入力して、[メールアドレス]も任意の値を入力して、
[アプリIDを作成してください]をクリックします。
※reCAPTCHAの確認があるので操作を続行してください。

facebook_dev3.png
アプリの作成が出来たら、ダッシュボードの[Facebookログイン]の[設定]を押してください。
左ペインに[Facebookログイン]の[設定]が表示されるので、それをクリックします。

facebook_dev4.png
続いて[クライアントOAuth設定]の[有効なOAuthリダイレクトURI]に
OpenAMにリダイレクトするURLを入力します。
デフォルトではOpenAMにリダイレクトするURLは以下となります。
https://[OpenAMのFQDN]/openam/oauth2c/OAuthProxy.jsp
入力後に[変更を保存]をクリックします。

これでFacebook側の設定は完了です。
最後にOpenAMに設定するためのアプリのクライアントIDとsecretを確認します。
facebook_dev5.png
[アプリID]と[app secret]の値をメモしておいてください。

OpenAMの設定

※弊社製品のOpenAM13のバージョンで設定をしています。

openam_authmod1.png
OpenAMの管理コンソールから、[該当レルム]-[認証]-[モジュール]を開いてください。
[モジュールの作成]をクリックします。

openam_authmod2.png
新規モジュールの作成のダイアログが表示されるので、[モジュール名]に任意の値(ここではFacebookとしています)を入力して、
[タイプ]に「OAuth 2.0/OpenID Connect」を選択します。
そのあと[作成]をクリックします。

openam_authmod3.png
作成した認証モジュールのパラメータ設定が表示されます。
先ほどメモしたFacebookの「アプリID」を[クライアントID]に、「app secret」を[クライアントシークレット]に入力します。
また、[プロキシURL]には下記のようにFacebookでも入力したリダイレクトするURLを入力します。
https://[OpenAMのFQDN]/openam/oauth2c/OAuthProxy.jsp

openam_authmod6.png
それから、アカウントマッパー設定をid=descriptionに変更しています。
OpenAMのデータストアにはOpenLDAPを今回利用しています。FacebookのテストユーザのIDをOpenLDAPにマッピングするユーザのdescriptionというLDAP属性にあらかじめ入力しています。
また、[存在しない場合アカウントを追加する]は無効にしています。

openam_authmod7.png
今回、OpenID Connectではないので関係ないのですが、
OpenID Connect検証設定タイプをデフォルトからclient_secretに変更しておいてください。
※デフォルト値ではOpenID Connect検証設定値が無い場合にエラーとなります。

入力が完了したら、[変更の保存]をクリックします。
ここまでで認証モジュールの設定が完了しました。

openam_authmod4.png
認証連鎖の設定で[認証連鎖の追加]をクリックして、[認証連鎖名]に任意の名前(ここではfbServiceとしています)を入力して、[作成]をクリックします。
続いて、[モジュールの追加]をクリックします。
追加した「Facebook」の認証モジュールを設定して、「必須」を選択します。
入力が完了したら、[変更の保存]をクリックします。

openam_authmod5.png
作成した認証連鎖を認証設定の[組織認証設定]に選択します。
入力が完了したら、[変更の保存]をクリックします。

これでOpenAMの設定は完了です。

いよいよ動作確認

下記URLにアクセスします。
https://developers.facebook.com/
facebook_dev6.png
左ペインにある[役割]の[テストユーザー]を開きます。
[編集する]のボタンで「このテストユーザーとしてログイン」を選択します。
OpenAMのデータストアに登録しているユーザにここで表示されている[ユーザーID]でマッピングしています。

何回か注意喚起されますが続行してログインすると下記ホームが表示されます。
facebook_dev7.png

この画面でブラウザのURL入力にOpenAMのログインURLを指定します。
facebook_dev8.png

すると、下記の画面のとおりOpenAMで認証が自動で行われ、
マッピングしているユーザのプロファイル画面が表示されます。
openam_authmod8.png

これで一連の流れは完了しました。

おわりに

今回登場したFacebookはOAuth2.0 Authorization Serverとしての役割です。
ユーザ認証するとともに裏でアクセストークンの発行、またユーザ情報のAPIを提供します。
OpenAMではFaceBookで認証したユーザをデータストアに保持しているユーザにマッピングしてログイン済み状態とする機能を利用しました。
OpenAMが認証連携しているアプリケーションがあれば、そのアプリケーションもシングルサインオンが可能となります。
次回はGoogleとのOpenID Connect連携について紹介します。

4
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
1