メインコンテンツまでスキップ

GitHub を使用してソーシャルログインを設定する (Set up social login with GitHub via OAuth App)

GitHub OAuth App を統合することで、「Sign-in with GitHub」、アカウント連携、GitHub API への安全なアクセスが可能になります。

ヒント:

このガイドは、Logto コネクターについての基本的な理解があることを前提としています。未経験の方は、コネクター ガイドを参照して始めてください。

はじめに​

GitHub コネクターは OAuth 2.0 統合を可能にし、アプリケーションで以下のことができます：

  • 「Sign-in with GitHub」認証 (Authentication) の追加
  • ユーザーアカウントを GitHub アイデンティティに連携
  • GitHub からユーザープロフィール情報を同期
  • Logto Secret Vault に安全に保存されたトークンを利用して GitHub API へアクセスし、自動化タスクを実行（例：GitHub issue の作成、アプリからリポジトリ管理）

これらの認証 (Authentication) 機能を設定するには、まず Logto で GitHub コネクターを作成してください：

  1. Logto コンソール > コネクター > ソーシャルコネクター

     にアクセスします。
  2. ソーシャルコネクターを追加 をクリックし、GitHub を選択、次へ をクリックし、チュートリアルに従って統合を完了します。

ステップ 1: GitHub で OAuth アプリを作成する​

GitHub を認証 (Authentication) プロバイダーとして利用する前に、GitHub で OAuth アプリを作成し、OAuth 2.0 の認証情報を取得する必要があります。

  1. GitHub にアクセスし、アカウントでサインインします。必要に応じて新しいアカウントを作成してください。
  2. 設定 > 開発者設定 > OAuth apps に移動します。
  3. New OAuth App をクリックして新しいアプリケーションを登録します：
    • Application name：アプリの説明的な名前を入力します。
    • Homepage URL：アプリケーションのホームページ URL を入力します。
    • Authorization callback URL：Logto の GitHub コネクターから Callback URI をコピーし、ここに貼り付けます。ユーザーが GitHub でサインインした後、ここにリダイレクトされ、Logto が認証 (Authentication) を完了するための認可コードが渡されます。
    • Application description：（任意）アプリの簡単な説明を追加します。
  4. Register application をクリックして OAuth アプリを作成します。
注記:

Enable Device Flow のチェックボックスはオフのままにすることを推奨します。なぜなら、GitHub でサインインするユーザーがモバイルデバイスを利用する場合、GitHub モバイルアプリで初回サインイン操作を確認する必要があるためです。多くの GitHub ユーザーは GitHub モバイルアプリをインストールしていないため、サインインフローが妨げられる可能性があります。エンドユーザーが GitHub モバイルアプリでサインインフローを確認することを想定している場合のみ有効にしてください。デバイスフロー の詳細を参照してください。

GitHub OAuth アプリのセットアップ詳細については Creating an OAuth App をご覧ください。

ステップ 2: Logto コネクターを設定する​

GitHub で OAuth アプリを作成した後、詳細ページにリダイレクトされ、Client ID をコピーしたり、Client secret を生成できます。

  1. GitHub OAuth アプリから Client ID をコピーし、Logto の clientId フィールドに貼り付けます。
  2. GitHub で Generate a new client secret をクリックして新しいシークレットを作成し、それをコピーして Logto の clientSecret フィールドに貼り付けます。
  3. Logto で Save and Done をクリックし、アイデンティティシステムと GitHub を接続します。
警告:

Client secret は安全に保管し、クライアントサイドのコードで絶対に公開しないでください。GitHub の client secret は紛失した場合、復元できません。新しいものを生成する必要があります。

ステップ 3: スコープを設定する（任意）​

スコープは、アプリがユーザーから要求する権限を定義し、GitHub アカウントからどのデータにアクセスできるかを制御します。

Logto の Scopes フィールドを使って、GitHub から追加の権限をリクエストできます。ニーズに応じて次のいずれかの方法を選択してください：

オプション 1: 追加の API スコープが不要な場合​

  • Logto の GitHub コネクターの Scopes フィールドを空欄のままにします。
  • デフォルトのスコープ read:user がリクエストされ、Logto が基本的なユーザー情報（メール、名前、アバターなど）を正しく取得できるようになります。

オプション 2: サインイン時に追加スコープをリクエストする​

  • GitHub OAuth アプリ用の全スコープ一覧 を参照し、アプリに必要なスコープのみ追加します。
  • 必要なスコープをすべて Scopes フィールドにスペース区切りで入力します。
  • ここに記載したスコープはデフォルトを上書きするため、必ず認証 (Authentication) 用スコープ read:user を含めてください。
  • よく使われる追加スコープ例：
    • repo：プライベートリポジトリの完全な制御
    • public_repo：パブリックリポジトリへのアクセス
    • user:email：ユーザーのメールアドレスへのアクセス
    • notifications：通知へのアクセス
  • すべてのスコープが正しく有効であることを確認してください。誤ったスコープやサポートされていないスコープを指定すると、GitHub から「Invalid scope」エラーが返されます。

オプション 3: 後からインクリメンタルスコープをリクエストする​

  • ユーザーがサインインした後、必要に応じてフェデレーテッドソーシャル認可フローを再実行し、ユーザーの保存済みトークンセットを更新することで追加スコープをリクエストできます。
  • これらの追加スコープは Logto の GitHub コネクターの Scopes フィールドに記載する必要はなく、Logto の Social Verification API を通じて実現できます。

これらの手順に従うことで、Logto の GitHub コネクターはアプリに必要な権限のみをリクエストします。

ヒント:

アプリがこれらのスコープを使って GitHub API にアクセスし操作を行う場合は、Logto GitHub コネクターで Store tokens for persistent API access を有効にしてください。詳細は次のセクションを参照してください。

ステップ 4: 一般設定​

GitHub への接続を妨げることはありませんが、エンドユーザーの認証 (Authentication) 体験に影響する一般的な設定をいくつか紹介します。

プロフィール情報の同期​

GitHub コネクターでは、ユーザー名やアバターなどのプロフィール情報の同期ポリシーを設定できます。次のいずれかを選択してください：

  • サインアップ時のみ同期：ユーザーが初めてサインインしたときにプロフィール情報を取得します。
  • サインイン時に常に同期：ユーザーがサインインするたびにプロフィール情報を更新します。

GitHub API へのアクセス用トークンの保存（任意）​

ユーザーの認可で GitHub API にアクセスし操作を行いたい場合（ソーシャルサインインやアカウント連携経由）、Logto は特定の API スコープを取得し、トークンを保存する必要があります。

  1. 上記の手順に従って必要なスコープを追加します。
  2. Logto GitHub コネクターで Store tokens for persistent API access を有効にします。Logto は GitHub のアクセストークンを Secret Vault に安全に保存します。
注記:

このチュートリアルで説明しているように GitHub OAuth アプリ を利用する場合、GitHub からリフレッシュトークン (Refresh token) を取得することはできません。なぜなら、アクセストークンはユーザーが手動で取り消さない限り有効期限がないためです。そのため、Scopes フィールドに offline_access を追加する必要はありません。追加するとエラーになる場合があります。

アクセストークンに有効期限を設けたい場合やリフレッシュトークン (Refresh token) を利用したい場合は、代わりに GitHub App との連携を検討してください。GitHub Apps と OAuth Apps の違い をご覧ください。

ステップ 5: 統合のテスト（任意）​

本番運用前に、GitHub 連携をテストしましょう：

  1. Logto の開発テナントでコネクターを利用します。
  2. ユーザーが GitHub でサインインできることを確認します。
  3. 正しいスコープがリクエストされているか確認します。
  4. トークンを保存している場合は API コールもテストします。

GitHub OAuth アプリは、どの GitHub ユーザーアカウントでもすぐに動作します。他のプラットフォームのようにテストユーザーやアプリ承認は不要です。

GitHub コネクターの活用​

GitHub コネクターを作成し、GitHub との接続が完了したら、エンドユーザーフローに組み込むことができます。ニーズに合ったオプションを選択してください：

「Sign-in with GitHub」を有効化​

  1. Logto コンソールで サインイン & アカウント > サインアップとサインイン に移動します。
  2. ソーシャルサインイン セクションで GitHub コネクターを追加し、ユーザーが GitHub で認証 (Authentication) できるようにします。

ソーシャルサインイン体験 について詳しくはこちら。

Account API を利用して、アプリ内にカスタムアカウントセンターを構築し、サインイン済みユーザーが GitHub アカウントを連携または解除できるようにします。Account API チュートリアルを参照

ヒント:

GitHub コネクターは、ソーシャルサインインを有効にせず、アカウント連携や API アクセス専用として有効化することも可能です。

GitHub API へのアクセスとアクションの実行​

アプリケーションは Secret Vault から保存された GitHub アクセストークンを取得し、GitHub API を呼び出してバックエンドタスクを自動化できます（例：issue の作成、リポジトリ管理、ワークフロー自動化など）。API アクセス用の保存トークン取得ガイドを参照してください。

ユーザーの GitHub アイデンティティ管理​

ユーザーが GitHub アカウントを連携した後、管理者は Logto コンソールでその接続を管理できます：

  1. Logto コンソール > ユーザー管理 に移動し、ユーザープロフィールを開きます。
  2. ソーシャル接続 の下で GitHub 項目を見つけ、管理 をクリックします。
  3. このページで管理者は、ユーザーの GitHub 接続を管理し、GitHub アカウントから許可・同期されたすべてのプロフィール情報やアクセストークンの状態を確認できます。
注記:

GitHub のアクセストークン応答には、特定のスコープ情報が含まれていないため、Logto ではユーザーが許可した権限リストを直接表示できません。ただし、ユーザーが認可 (Authorization) 時に要求されたスコープに同意していれば、アプリケーションは GitHub API へアクセスする際に対応する権限を持ちます。

参考情報​

GitHub 開発者ドキュメント - アプリについて

GitHub 開発者ドキュメント - OAuth アプリの作成

GitHub OAuth アプリのスコープに関するドキュメント