---
title: SSOによるログインをフロントエンドで利用する
description: Kurocoでは、OAuth連携やSAML連携によるSSOの実装が可能です。対応するサービスの場合は簡単に設定ができます。また、いくつかの外部サービスをプリセットとして用意しており、本チュートリアルでは、GitHubでのログインを例としてOAuth認証によるSSOを実装します。 
---



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

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

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

- [概要](#概要)
  - [学べること](#学べること)
- [Kurocoの設定](#kurocoの設定)
  - [APIを作成する](#apiを作成する)
  - [OAuth SP設定を追加する](#oauth-sp設定を追加する)
- [フロントエンドでの実装](#フロントエンドでの実装)
- [利用方法](#利用方法)
- [関連ドキュメント](#関連ドキュメント)

## Kurocoの設定

### APIを作成する

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

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

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

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/16a7f53e042aefaf03779a2a9acc5945.png)

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

[セキュリティ]をクリックすると以下のダイアログが表示されます。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/7a43d407007dc45376bdec383d3bf2c1.png)

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

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/31b959cc1f31eef5fc68e7c55995bca6.png)

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

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

### OAuth SP設定を追加する
[外部システム連携] -> [OAuth SP]をクリックします。  

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/0f1899141f0ed2ae0a9d01a4466e6630.png)
[追加]をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/aa509003cbad6d80b36a622488e8d68e.png)

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

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


![Image from Gyazo](https://t.gyazo.com/teams/diverta/8d6fa52a6d03ee7e84dba5347b1b8b8c.png)

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

以降の手順は [GitHubを利用してOAuth認証によるSSOを実装する](/ja/docs/tutorials/implementing-oauth-sp-based-sso/)で説明しているものと同様になりますので、そちらをご参照ください。



## フロントエンドでの実装

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d0b97c3081e1e459638d8172e4571993.png)

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

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


## 利用方法
設置したURLへのリンクを確認します。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/3f3d7f2dbddab67298e12688c8acf033.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d5c424804026e0ee1ef0125ee7d30dfd.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/d5b18ea9a29115be388faa18f086ce76.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/2af7e5644655efa4104d01446c3ac839.png)

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

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/efceebe56ad4a4b7565d84c7808b48ef.png)

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

![Image from Gyazo](https://t.gyazo.com/teams/diverta/83c104d501de096db90b3d7914720b78.png)

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


## 関連ドキュメント
- [GitHubを利用してOAuth認証によるSSOを実装する](/ja/docs/tutorials/implementing-oauth-sp-based-sso/)
- [Microsoftを利用してOAuth認証によるSSOを実装する](/ja/docs/tutorials/implement-login-with-microsoft/)
- [Google Workspaceを利用してSAML認証によるSSOを実装する](/ja/docs/tutorials/using-gsuite-to-implement-saml-based-sso/)
- [GMOトラスト・ログインを利用してSAML認証によるSSOを実装する](/ja/docs/tutorials/using-gmo-trust-login-to-implement-saml-based-sso/)
- [Auth0を利用してSAML認証によるSSOを実装する](/ja/docs/tutorials/using-auth0-to-implement-saml-based-sso/)
- [IDaaSを使用してAzure Active Directory（AD）B2C SSOを実装する](/ja/docs/tutorials/using-idaas-to-implement-azure-ad-b2c-sso/)