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

## 概要
KurocoはOAuth SPの機能を持っており、SSOの実装が可能です。
また、プリセットとしていくつかの外部サービスをご用意しており、対応したサービスの場合は簡単に設定ができます。

本チュートリアルでは、OAuth認証によるSSOを実装する例として下記条件でのログインを実装します。  

- Kuroco管理画面に対してログインする
- GitHubのOAuthを利用する
- GitHubと同じEmailのメンバーでKurocoにログインする

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

- [Kurocoの設定](#kurocoの設定)
  - [OAuth SP設定を追加する](#oauth-sp設定を追加する)
- [GitHubの設定](#githubの設定)
  - [OAuth Appsを追加する](#oauth-appsを追加する)
  - [秘密鍵を生成する](#秘密鍵を生成する)
- [KurocoのOAuth SP設定を更新する](#kurocoのoauth-sp設定を更新する)
- [利用方法](#利用方法)

### 前提条件
:::info
GitHub側の仕様の変更により、Client ID、Client secretsの取得方法は本チュートリアルと異なる場合がございます。詳細はGitHubで最新情報をご確認ください。  
:::

## Kurocoの設定
### 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|
|自動ユーザー登録|チェックを入れない|
|Emailを利用せずメンバー拡張項目にIDを格納してリンクする|チェックを入れない|

![Image from Gyazo](https://t.gyazo.com/teams/diverta/333e97ef6f93e653502f9ae72accaac1.jpg)

追加されたOAuth SPの編集画面から、ログインURLをメモしておきます。  

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

## GitHubの設定
### OAuth Appsを追加する
次にGitHub側の設定をします。  
[GitHubのOAuth Appsの設定ページ](https://github.com/settings/developers)にアクセスし、[New OAuth App]をクリックします。  
![fetched from Gyazo](https://t.gyazo.com/teams/diverta/dc6b88cb76b1f39583d00088d3fc3e70.png)
下記の内容を入力して[Register application]をクリックします。  

|項目   |設定内容  |
| :--- | :--- |
|Application name|お好きな名前|
|Homepage URL|サイトのURL|
|Authorization callback URL|[OAuth SP設定を追加する](#oauth-sp設定を追加する)でメモしたログインURL|

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/30d1d4adf17e669d67fa16d0826876ab.png)

### 秘密鍵を生成する
追加されたOAuth Appsのページから[Generate a new client secret]をクリックします。  

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

Client IDと、生成されたClient secretsをメモしておきます。  
ページを遷移すると、Client secretsは再度表示できません。  

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/179d95544175f6877b8bca47f016009b.png)

## KurocoのOAuth SP設定を更新する
GitHubの設定が完了したら、再度Kurocoの設定に戻ります。  
[外部システム連携] -> [OAuth SP]をクリックします。  

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/0f1899141f0ed2ae0a9d01a4466e6630.png)

[OAuth SP設定を追加する](#oauth-sp設定を追加する)で追加したOAuth SPの名称をクリックします。  

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

[秘密鍵を生成する](#秘密鍵を生成する)で取得したクライアントの秘密鍵 (Client Secret)と、クライアントID (Client ID)を入力し、[有効]にチェックを入れて[更新する]をクリックします。  

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

以上で、SSO OAuth SPの設定は完了です。  

## 利用方法
ターゲットドメインを管理画面に設定していると、SP設定の追加後、自動でログインページに「外部アカウントでログイン」の項目が追加されます。  
リンクをクリックすると、GitHubのログイン画面に遷移します。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/3858a548ccfdc986c2a56ef71d4f3d9f.png)

また、SSO OAuth SP編集画面のログインURLを使って独自のログインページを作ることも可能です。

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/04194089ff9f1be7f98a3c325433da2d.png)

## 参考
### クライアントIDと秘密鍵の入手先
タイプの設定で選択できる主要なアイデンティティプロバイダのクライアントIDと秘密鍵の入手先を下記に示します。  
GitHub以外のIdPでSSOを実装する場合は参考にして下さい。    

| IdP | URL | クライアントID, 秘密鍵の名称 |
| :--- | :--- | :--- |
|GitHub|https://github.com/settings/developers|Client ID, Client secrets|
|Google|https://console.cloud.google.com/apis/credentials|クライアント ID, クライアント シークレット|
|Facebook|https://developers.facebook.com/apps|アプリID, app secret|
|LINE|https://developers.line.biz/console/|チャネルID, チャネルシークレット|

### カスタムについて
タイプの選択肢にないサービスについても、カスタムのタイプを利用してOAuth認証によるSSOを実装可能です。  
まず接続しようとしているアイデンティティプロバイダがOAuth 2.0の仕様をサポートしていることを確認してください。
もしサポートしている場合はアイデンティティプロバイダのドキュメントを確認し、[SSO OAuth SP](/ja/docs/management/sso-oauth-sp/)で設定をします。

また、SSO OAuth SP編集画面の[テスト]をクリックすると、設定が正しいかどうかをテストできます。これにより、アイデンティティプロバイダから返されるレスポンスを確認し、それに応じて構成パラメーターの設定が可能です。  

<a href="https://diverta.gyazo.com/29042cc196b3e5fed6608be0c76425b5" className="no-zoom" target="_blank" rel="noopener noreferrer"><img src="https://t.gyazo.com/teams/diverta/29042cc196b3e5fed6608be0c76425b5.png" alt="Image from Gyazo" /></a>

:::tip
保存されていないデータはテストできません。テストを実行する前に、まず設定データを更新する必要があります。
:::