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

GitHub を使用してソーシャルログインを設定する

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

ヒント:

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

はじめに​

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

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

これらの認証 (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 でサインインした後、この URL にリダイレクトされ、Logto が認証 (Authentication) を完了するための認可コードが渡されます。
    • Application description：（任意）アプリの簡単な説明を追加します。
  4. Register application をクリックして OAuth アプリを作成します。
注記:

Enable Device Flow のチェックボックスは選択しないことを推奨します。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: スコープを設定する（任意）​

スコープ (Scopes) は、アプリがユーザーから要求する権限を定義し、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: 後からインクリメンタルスコープをリクエストする​

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

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

ヒント:

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

ステップ 4: 一般設定​

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

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

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

  • Only sync at sign-up：ユーザーが初めてサインインしたときに一度だけプロフィール情報を取得します。
  • Always sync at sign-in：ユーザーがサインインするたびにプロフィール情報を更新します。

GitHub API へのトークン保存（任意）​

ユーザーの認可 (Authorization) のもとで 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 を呼び出してバックエンドタスクを自動化できます（例：イシュー作成、リポジトリ管理、ワークフロー自動化など）。API アクセス用の保存トークン取得ガイドを参照してください。

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

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

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

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

参考資料​

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

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

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