SSOによるログインをフロントエンドで利用する

概要

KurocoはOAuth連携やSAML連携機能を持っており、それらに対応するサービスとのSSO(Single Sign-On)の実装が可能です。 いくつかの外部サービスについてはプリセットとして設定をご用意しておりますので、より簡単に設定できます。

本チュートリアルでは、SSOログインをフロントエンドで利用するため、grant_tokenとアクセストークンの生成方法について説明します。
SSOはGitHubとのOAuth認証を例として説明しますが、IDaaS SP、SAML SPについてもトークンの生成手順はここで説明するOAuthと基本的には同じになります。

学べること

以下の手順でOauth SPによるSSOの実装を学びます。

• 概要
  • 学べること
• Kurocoの設定
  • APIを作成する
  • OAuth SP設定を追加する
• フロントエンドでの実装
• 利用方法
• 関連ドキュメント

Kurocoの設定

APIを作成する

SSOログインを実装する際に、Kuroco側に動的トークンによってログイン認証可能なAPIを作成する必要があります。Cookie認証や静的トークンではSSOは実装できませんのでご注意ください。

なお、Kurocoでは複数のAPIを作成出来ますが、ログインセッションはAPI毎に異なります。SSOでログインした場合も、ここで作成するAPIに対してのみログイン状態となり、他のAPIに対してはログインされません。

Kuroco管理画面の[API]をクリックします。 [追加]をクリックします。

[追加する]ダイアログで、以下のように入力し[追加する]をクリックします。

項目	設定内容
タイトル	OAuth検証用API
版	1.0
説明	OAuth検証用API
並び順	0

[セキュリティ]をクリックすると以下のダイアログが表示されます。

セキュリティ項目の[動的アクセストークン]を選択し、[保存する]をクリックします。

[新しいエンドポイントの追加]をクリックし、以下のように入力し[追加する]をクリックします。

項目	設定内容	備考
パス	token
カテゴリー	認証
モデル	Login
オペレーション	token
use_refresh_token	チェックあり
access_token_lifespan	86400	単位[秒]で1日を指定します
refresh_token_lifespan	604800	単位[秒]で7日を指定します

以上で、APIの設定が完了しました。

OAuth SP設定を追加する

[外部システム連携] -> [OAuth SP]をクリックします。

[追加]をクリックします。

OAuth SP編集画面が表示されますので、下記を入力して[追加する]をクリックします。

項目	設定内容
OAuth SPの名称	GitHub login
ターゲットドメイン	API
タイプ	GitHub
(API用) Grantトークン生成	OAuth検証用API にチェックを入れる
自動ユーザー登録	チェックを入れない
Emailを利用せずメンバー拡張項目にIDを格納してリンクする	チェックを入れない
リターンURL（成功）	（ログインに成功した直後に表示するページのURL）
リターンURL（エラー）	（ログインに失敗した直後に表示するページのURL）

ターゲットドメインが「管理画面」ではなく「API」である事に注意してください。これによりフロントエンド側でのログインに対してSSO機能が有効になります。

以降の手順は GitHubを利用してOAuth認証によるSSOを実装するで説明しているものと同様になりますので、そちらをご参照ください。

フロントエンドでの実装

以下のSSO OAuth SP編集画面に表示されている OAuth検証用API 1.0横のURLをコピーします。

フロントエンドの任意の場所にコピーした[ログインURL]へのリンクを設置します。

<a href="(URL)"><span>GitHubでログイン</span></a>

利用方法

設置したURLへのリンクを確認します。

クリックするとGitHubのログイン画面が開きますので、GitHubのログインIDとパスワードを入力します。

二要素認証を設定している場合は、認証コードの入力フォームが表示されますので、入力します。

ログインに成功すると、OAuth SP設定で設定した[リターンURL（成功）] のURLに遷移します。

備考

SAML認証の場合は、&grant_token=********* というGET変数が付与された形で[リターンURL（成功）] のURLに遷移します。
grant_tokenはアクセストークンを発行するための一時的なトークンです。こちらを使用してアクセストークンを取得するログイン処理を実装してください。

URLからgrant_tokenをコピーし、SwaggerUIに遷移して上記で作成したエンドポイント/rcms-api/X/token の[Try it out]をクリックします。
[Request body]書かれているJSONの grant_token キーの値部分にコピーした文字列をペーストします。

リクエストを送信すると、レスポンスにアクセストークンが含まれていることが確認できます。

このアクセストークンをリクエストヘッダーに付与してリクエストを送ることで、OAuth検証用APIに追加されたエンドポイントをフロントから利用可能です。

関連ドキュメント

• GitHubを利用してOAuth認証によるSSOを実装する
• Microsoftを利用してOAuth認証によるSSOを実装する
• Google Workspaceを利用してSAML認証によるSSOを実装する
• GMOトラスト・ログインを利用してSAML認証によるSSOを実装する
• Auth0を利用してSAML認証によるSSOを実装する
• IDaaSを使用してAzure Active Directory（AD）B2C SSOを実装する