GitHub App を使って [Login with GitHub] ボタンを作成する

はじめに

このチュートリアルでは、Web サイトの [GitHub でログイン] ボタンを作成する方法について説明します。 Web サイトでは、GitHub App を使って、Web アプリケーションフローを介してユーザーアクセストークンを生成します。その後、Web サイトではそのユーザーアクセストークンを使って、認証されたユーザーの代わりに API 要求を行います。

このチュートリアルでは Ruby を使いますが、Web 開発に使われる任意のプログラミング言語で Web アプリケーションフローを使うことができます。

Web アプリケーションフローとユーザーアクセストークンについて

アプリのアクションをユーザーの属性にする場合は、アプリでユーザーアクセストークンを使う必要があります。詳しくは、「ユーザーに代わって GitHub アプリで認証する」を参照してください。

GitHub App 用のユーザーアクセストークンを生成するには、Web アプリケーションフローとデバイスフローの 2 つの方法があります。アプリが Web インターフェイスにアクセスできる場合は、Web アプリケーションフローを使う必要があります。アプリから Web インターフェイスにアクセスできない場合は、代わりにデバイスフローを使う必要があります。詳細については、「GitHub アプリのユーザーアクセストークンの生成」および「GitHub アプリを使用して CLI を構築する」を参照してください。

前提条件

このチュートリアルでは、GitHub App を既に登録済みであることを前提としています。 GitHub App の登録について詳しくは、「GitHub App の登録」を参照してください。

このチュートリアルに従う前に、アプリのコールバック URL を設定する必要があります。このチュートリアルでは、既定の URL が http://localhost:4567 のローカル Sinatra サーバーを使います。たとえば、ローカル Sinatra アプリケーションの既定の URL で動作するように、コールバック URL を http://localhost:4567/github/callback にできます。アプリをデプロイする準備ができたら、コールバック URL をライブサーバーアドレスを使うように変更できます。アプリのコールバック URL の更新について詳しくは、「GitHub App 登録の変更」と「ユーザー承認コールバック URL について」を参照してください。

このチュートリアルでは、Ruby と Ruby テンプレートシステム ERB の基本的な知識があることを前提としています。詳しくは、Ruby と ERB を参照してください。

依存関係のインストール

このチュートリアルでは、Ruby の gem である Sinatra を使って、Ruby で Web アプリケーションを作成します。詳しくは、Sinatra の README をご覧ください。

このチュートリアルでは、Ruby の gem である dotenv を使って、.env ファイルに保存されている値にアクセスします。詳しくは、dotenv の README をご覧ください。

このチュートリアルに従うには、Ruby プロジェクトに Sinatra と dotenv の gem をインストールする必要があります。たとえば、これは Bundler を使って行うことができます。

Bundler がまだインストールされていない場合は、ターミナルで次のコマンドを実行します。
```
gem install bundler
```
アプリに Gemfile がまだない場合は、ターミナルで次のコマンドを実行します。
```
bundle init
```
アプリに Gemfile.lock がまだない場合は、ターミナルで次のコマンドを実行します。
```
bundle install
```
ターミナルで次のコマンドを実行して gem をインストールします。
```
bundle add sinatra
```
```
bundle add dotenv
```

クライアント ID とクライアントシークレットを保存する

このチュートリアルでは、クライアント ID とクライアントシークレットを環境変数に保存し、ENV.fetch を使ってそれらにアクセスする方法について説明します。アプリをデプロイするときに、クライアント ID とクライアントシークレットの保存方法を変更することをお勧めします。詳しくは、「クライアントシークレットを安全に保存する」を参照してください。

GitHub の任意のページの右上隅にある、自分のプロファイル写真をクリックします。
アカウント設定にアクセスしてください。
- 個人用アカウントが所有するアプリの場合は、[設定] をクリックします。
- 組織が所有するアプリの場合:
  1. [自分の組織] をクリックします。
  2. 組織の右側にある [設定] をクリックします。
左側のサイドバーで [ 開発者設定] をクリックします。
左側のサイドバーで、 [GitHub Apps] をクリックします。
作業したい GitHub App の横にある [編集] を選びます。
アプリの設定ページで、ご自分のアプリのクライアント ID を見つけます。これは、次の手順で .env ファイルに追加します。クライアント ID は、アプリ ID とは異なることに注意してください。
アプリの設定ページで、 [新しいクライアントシークレットの生成] をクリックします。クライアントシークレットは、次の手順で .env ファイルに追加します。
.env というファイルを Gemfile と同じレベルに作成します。
プロジェクトに .gitignore ファイルがまだない場合は、.gitignore ファイルを Gemfile と同じレベルに作成します。
.gitignore ファイルに .env を追加します。こうすることで、クライアントシークレットを誤ってコミットするのを防ぐことができます。 .gitignore ファイルについて詳しくは、「ファイルを無視する」を参照してください。
次の内容を .env ファイルに追加します。 YOUR_CLIENT_ID は、ご自分のアプリのクライアント ID に置き換えます。 YOUR_CLIENT_SECRET は、ご自分のアプリのクライアントシークレットに置き換えます。
```
CLIENT_ID="YOUR_CLIENT_ID"
CLIENT_SECRET="YOUR_CLIENT_SECRET"
```

ユーザーアクセストークンを生成するコードを追加する

ユーザーアクセストークンを取得するには、まずユーザーにアプリの認可を求める必要があります。ユーザーがアプリを認可すると、アプリのコールバック URL にリダイレクトされます。コールバック URL への要求に code クエリパラメーターを含めます。アプリでそのコールバック URL を提供する要求を受け取ると、code パラメーターをユーザーアクセストークンと交換できます。

次の手順に従って、ユーザーアクセストークンを生成するコードを記述します。スキップして最終的なコードに進むには、「完全なコード例」を参照してください。

.env ファイルと同じディレクトリに Ruby ファイルを作成して、ユーザーアクセストークンを生成するコードを保持します。このチュートリアルでは、ファイルに app.rb という名前を付けます。
app.rb の先頭に、次の依存関係を追加します。
Ruby
```
require "sinatra"
require "dotenv/load"
require "net/http"
require "json"
```
```
require "sinatra"
require "dotenv/load"
require "net/http"
require "json"
```
sinatra 依存関係と dotenv/load 依存関係で、前にインストールした gem を使います。 net/http と json は Ruby 標準ライブラリに含まれています。

次のコードを app.rb に追加して、.env ファイルからアプリのクライアント ID とクライアントシークレットを取得します。

Ruby

CLIENT_ID = ENV.fetch("CLIENT_ID")
CLIENT_SECRET = ENV.fetch("CLIENT_SECRET")

CLIENT_ID = ENV.fetch("CLIENT_ID")
CLIENT_SECRET = ENV.fetch("CLIENT_SECRET")

次のコードを app.rb に追加して、ユーザーにアプリの認証を求めるリンクを表示します。

Ruby

get "/" do
  link = '<a href="https://github.com/login/oauth/authorize?client_id=<%= CLIENT_ID %>">Login with GitHub</a>'
  erb link
end

get "/" do
  link = '<a href="https://github.com/login/oauth/authorize?client_id=<%= CLIENT_ID %>">Login with GitHub</a>'
  erb link
end

次のコードを app.rb に追加して、アプリのコールバック URL への要求を処理し、要求から code パラメーターを取得します。 CALLBACK_URL を、アプリのコールバック URL からドメインを除いた値に置き換えます。たとえば、コールバック URL が http://localhost:4567/github/callback の場合は、CALLBACK_URL を /github/callback に置き換えます。
Ruby
```
get "CALLBACK_URL" do
  code = params["code"]
  render = "Successfully authorized! Got code #{code}."
  erb render
end
```
```
get "CALLBACK_URL" do
  code = params["code"]
  render = "Successfully authorized! Got code #{code}."
  erb render
end
```
現段階でこのコードによってレンダリングされるのは、メッセージと code パラメーターだけです。次の手順で、このコードブロックを拡張します。
必要に応じて、進行状況をチェックします。

app.rb は次のようになります。CALLBACK_URL はアプリのコールバック URL からドメインを除いた値です。
Ruby
```
require "sinatra"
require "dotenv/load"
require "net/http"
require "json"

CLIENT_ID = ENV.fetch("CLIENT_ID")
CLIENT_SECRET = ENV.fetch("CLIENT_SECRET")

get "/" do
  link = '<a href="https://github.com/login/oauth/authorize?client_id=<%= CLIENT_ID %>">Login with GitHub</a>'
  erb link
end

get "CALLBACK_URL" do
  code = params["code"]
  render = "Successfully authorized! Got code #{code}."
  erb render
end
```
```
require "sinatra"
require "dotenv/load"
require "net/http"
require "json"

CLIENT_ID = ENV.fetch("CLIENT_ID")
CLIENT_SECRET = ENV.fetch("CLIENT_SECRET")

get "/" do
  link = '<a href="https://github.com/login/oauth/authorize?client_id=<%= CLIENT_ID %>">Login with GitHub</a>'
  erb link
end

get "CALLBACK_URL" do
  code = params["code"]
  render = "Successfully authorized! Got code #{code}."
  erb render
end
```
1. ターミナルで、app.rb が保存されているディレクトリから、ruby app.rb を実行します。ローカルの Sinatra サーバーが起動するはずです。
2. ブラウザーで http://localhost:4567 にアクセスします。 "Login with GitHub" というテキストのリンクが表示されるはずです。
3. "Login with GitHub" のリンクをクリックします。
  
  アプリを認可していない場合は、リンクをクリックすると https://github.com/login/oauth/authorize?client_id=CLIENT_ID に移動します。CLIENT_ID はアプリのクライアント ID です。これは、ユーザーにアプリの認可を求める GitHub ページです。ボタンをクリックしてアプリを認可すると、アプリのコールバック URL に移動します。
  
  以前にアプリを認可し、認可が取り消されていない場合は、認可プロンプトをスキップし、代わりにコールバック URL に直接移動します。認可ダイアログを表示したい場合は、以前の認可を取り消すことができます。詳しくは、「GitHub Apps の承認の確認と取り消し」を参照してください。
4. "Login with GitHub" リンクをクリックし、アプリを認可するように求められたら、そうすることで表示されるコールバック URL ページに、次のようなテキストが表示されます: "Successfully authorized! Got code agc622abb6135be5d1f2."
5. Sinatra が実行されているターミナルで、Ctrl+C キーを押してサーバーを停止します。

app.rb の内容を次のコードに置き換えます。CALLBACK_URL は、アプリのコールバック URL からドメインを除いた値です。

このコードでは、code パラメーターをユーザーアクセストークンと交換するロジックを追加します。

parse_response 関数で、GitHub API からの応答を解析します。
exchange_code 関数で、code パラメーターをユーザーアクセストークンと交換します。
コールバック URL 要求のハンドラーで exchange_code を呼び出して、code パラメーターをユーザーアクセストークンと交換するようになります。
コールバックページに、トークンが生成されたことを示すテキストが表示されるようになります。トークン生成が成功しなかった場合は、ページにそのエラーが示されます。

Ruby

require "sinatra"
require "dotenv/load"
require "net/http"
require "json"

CLIENT_ID = ENV.fetch("CLIENT_ID")
CLIENT_SECRET = ENV.fetch("CLIENT_SECRET")

def parse_response(response)
  case response
  when Net::HTTPOK
    JSON.parse(response.body)
  else
    puts response
    puts response.body
    {}
  end
end

def exchange_code(code)
  params = {
    "client_id" => CLIENT_ID,
    "client_secret" => CLIENT_SECRET,
    "code" => code
  }
  result = Net::HTTP.post(
    URI("https://github.com/login/oauth/access_token"),
    URI.encode_www_form(params),
    {"Accept" => "application/json"}
  )

  parse_response(result)
end

get "/" do
  link = '<a href="https://github.com/login/oauth/authorize?client_id=<%= CLIENT_ID %>">Login with GitHub</a>'
  erb link
end

get "CALLBACK_URL" do
  code = params["code"]

  token_data = exchange_code(code)

  if token_data.key?("access_token")
    token = token_data["access_token"]

    render = "Successfully authorized! Got code #{code} and exchanged it for a user access token ending in #{token[-9..-1]}."
    erb render
  else
    render = "Authorized, but unable to exchange code #{code} for token."
    erb render
  end
end

require "sinatra"
require "dotenv/load"
require "net/http"
require "json"

CLIENT_ID = ENV.fetch("CLIENT_ID")
CLIENT_SECRET = ENV.fetch("CLIENT_SECRET")

def parse_response(response)
  case response
  when Net::HTTPOK
    JSON.parse(response.body)
  else
    puts response
    puts response.body
    {}
  end
end

def exchange_code(code)
  params = {
    "client_id" => CLIENT_ID,
    "client_secret" => CLIENT_SECRET,
    "code" => code
  }
  result = Net::HTTP.post(
    URI("https://github.com/login/oauth/access_token"),
    URI.encode_www_form(params),
    {"Accept" => "application/json"}
  )

  parse_response(result)
end

get "/" do
  link = '<a href="https://github.com/login/oauth/authorize?client_id=<%= CLIENT_ID %>">Login with GitHub</a>'
  erb link
end

get "CALLBACK_URL" do
  code = params["code"]

  token_data = exchange_code(code)

  if token_data.key?("access_token")
    token = token_data["access_token"]

    render = "Successfully authorized! Got code #{code} and exchanged it for a user access token ending in #{token[-9..-1]}."
    erb render
  else
    render = "Authorized, but unable to exchange code #{code} for token."
    erb render
  end
end

必要に応じて、進行状況をチェックします。
1. ターミナルで、app.rb が保存されているディレクトリから、ruby app.rb を実行します。ローカルの Sinatra サーバーが起動するはずです。
2. ブラウザーで http://localhost:4567 にアクセスします。 "Login with GitHub" というテキストのリンクが表示されるはずです。
3. "Login with GitHub" のリンクをクリックします。
4. アプリを認可するように求められたら、そうします。
5. "Login with GitHub" リンクをクリックし、アプリを認可するように求められたら、そうすることで表示されるコールバック URL ページに、次のようなテキストが表示されます: "Successfully authorized! Got code 4acd44861aeda86dacce and exchanged it for a user access token ending in 2zU5kQziE."
6. Sinatra が実行されているターミナルで、Ctrl+C キーを押してサーバーを停止します。

これでユーザーアクセストークンを取得したので、このトークンを使って、ユーザーに代わって API 要求を行うことができます。次に例を示します。

この関数を app.rb に追加して、/user REST API エンドポイントでユーザーに関する情報を取得します。

Ruby

def user_info(token)
  uri = URI("https://api.github.com/user")

  result = Net::HTTP.start(uri.host, uri.port, use_ssl: true) do |http|
    body = {"access_token" => token}.to_json

    auth = "Bearer #{token}"
    headers = {"Accept" => "application/json", "Content-Type" => "application/json", "Authorization" => auth}

    http.send_request("GET", uri.path, body, headers)
  end

  parse_response(result)
end

def user_info(token)
  uri = URI("https://api.github.com/user")

  result = Net::HTTP.start(uri.host, uri.port, use_ssl: true) do |http|
    body = {"access_token" => token}.to_json

    auth = "Bearer #{token}"
    headers = {"Accept" => "application/json", "Content-Type" => "application/json", "Authorization" => auth}

    http.send_request("GET", uri.path, body, headers)
  end

  parse_response(result)
end

user_info 関数を呼び出し、ユーザーの名前と GitHub ログインを表示するようにコールバックハンドラーを更新します。 CALLBACK_URL を、アプリのコールバック URL からドメインを除いた値に置き換えることを忘れないでください。

Ruby

get "CALLBACK_URL" do
  code = params["code"]

  token_data = exchange_code(code)

  if token_data.key?("access_token")
    token = token_data["access_token"]

    user_info = user_info(token)
    handle = user_info["login"]
    name = user_info["name"]

    render = "Successfully authorized! Welcome, #{name} (#{handle})."
    erb render
  else
    render = "Authorized, but unable to exchange code #{code} for token."
    erb render
  end
end

get "CALLBACK_URL" do
  code = params["code"]

  token_data = exchange_code(code)

  if token_data.key?("access_token")
    token = token_data["access_token"]

    user_info = user_info(token)
    handle = user_info["login"]
    name = user_info["name"]

    render = "Successfully authorized! Welcome, #{name} (#{handle})."
    erb render
  else
    render = "Authorized, but unable to exchange code #{code} for token."
    erb render
  end
end

コードを次のセクションの完全なコード例に照らしてチェックします。コードをテストするには、完全なコード例の後の「テスト」セクションで説明されている手順に従います。

完全なコード例

次に、前のセクションで概要を説明したコードの完全な例を示します。

CALLBACK_URL を、アプリのコールバック URL からドメインを除いた値に置き換えます。たとえば、コールバック URL が http://localhost:4567/github/callback の場合は、CALLBACK_URL を /github/callback に置き換えます。

Ruby

require "sinatra"
require "dotenv/load"
require "net/http"
require "json"

CLIENT_ID = ENV.fetch("CLIENT_ID")
CLIENT_SECRET = ENV.fetch("CLIENT_SECRET")

def parse_response(response)
  case response
  when Net::HTTPOK
    JSON.parse(response.body)
  else
    puts response
    puts response.body
    {}
  end
end

def exchange_code(code)
  params = {
    "client_id" => CLIENT_ID,
    "client_secret" => CLIENT_SECRET,
    "code" => code
  }
  result = Net::HTTP.post(
    URI("https://github.com/login/oauth/access_token"),
    URI.encode_www_form(params),
    {"Accept" => "application/json"}
  )

  parse_response(result)
end

def user_info(token)
  uri = URI("https://api.github.com/user")

  result = Net::HTTP.start(uri.host, uri.port, use_ssl: true) do |http|
    body = {"access_token" => token}.to_json

    auth = "Bearer #{token}"
    headers = {"Accept" => "application/json", "Content-Type" => "application/json", "Authorization" => auth}

    http.send_request("GET", uri.path, body, headers)
  end

  parse_response(result)
end

get "/" do
  link = '<a href="https://github.com/login/oauth/authorize?client_id=<%= CLIENT_ID %>">Login with GitHub</a>'
  erb link
end

get "CALLBACK_URL" do
  code = params["code"]

  token_data = exchange_code(code)

  if token_data.key?("access_token")
    token = token_data["access_token"]

    user_info = user_info(token)
    handle = user_info["login"]
    name = user_info["name"]

    render = "Successfully authorized! Welcome, #{name} (#{handle})."
    erb render
  else
    render = "Authorized, but unable to exchange code #{code} for token."
    erb render
  end
end

require "sinatra"
require "dotenv/load"
require "net/http"
require "json"

CLIENT_ID = ENV.fetch("CLIENT_ID")
CLIENT_SECRET = ENV.fetch("CLIENT_SECRET")

def parse_response(response)
  case response
  when Net::HTTPOK
    JSON.parse(response.body)
  else
    puts response
    puts response.body
    {}
  end
end

def exchange_code(code)
  params = {
    "client_id" => CLIENT_ID,
    "client_secret" => CLIENT_SECRET,
    "code" => code
  }
  result = Net::HTTP.post(
    URI("https://github.com/login/oauth/access_token"),
    URI.encode_www_form(params),
    {"Accept" => "application/json"}
  )

  parse_response(result)
end

def user_info(token)
  uri = URI("https://api.github.com/user")

  result = Net::HTTP.start(uri.host, uri.port, use_ssl: true) do |http|
    body = {"access_token" => token}.to_json

    auth = "Bearer #{token}"
    headers = {"Accept" => "application/json", "Content-Type" => "application/json", "Authorization" => auth}

    http.send_request("GET", uri.path, body, headers)
  end

  parse_response(result)
end

get "/" do
  link = '<a href="https://github.com/login/oauth/authorize?client_id=<%= CLIENT_ID %>">Login with GitHub</a>'
  erb link
end

get "CALLBACK_URL" do
  code = params["code"]

  token_data = exchange_code(code)

  if token_data.key?("access_token")
    token = token_data["access_token"]

    user_info = user_info(token)
    handle = user_info["login"]
    name = user_info["name"]

    render = "Successfully authorized! Welcome, #{name} (#{handle})."
    erb render
  else
    render = "Authorized, but unable to exchange code #{code} for token."
    erb render
  end
end

テスト

このチュートリアルでは、アプリコードが app.rb という名前のファイルに保存されていること、ローカル Sinatra アプリケーションの既定の URL http://localhost:4567 を使っていることを前提としています。

ターミナルで、app.rb が保存されているディレクトリから、ruby app.rb を実行します。ローカルの Sinatra サーバーが起動するはずです。
ブラウザーで http://localhost:4567 にアクセスします。 "Login with GitHub" というテキストのリンクが表示されるはずです。
"Login with GitHub" のリンクをクリックします。

アプリを認可していない場合は、リンクをクリックすると https://github.com/login/oauth/authorize?client_id=CLIENT_ID に移動します。CLIENT_ID はアプリのクライアント ID です。これは、ユーザーにアプリの認可を求める GitHub ページです。ボタンをクリックしてアプリを認可すると、アプリのコールバック URL に移動します。

以前にアプリを認可し、認可が取り消されていない場合は、認可プロンプトをスキップし、代わりにコールバック URL に直接移動します。認可ダイアログを表示したい場合は、以前の認可を取り消すことができます。詳しくは、「GitHub Apps の承認の確認と取り消し」を参照してください。
"Login with GitHub" リンクをクリックし、アプリを認可するように求められたら、そうすることで表示されるコールバック URL ページに、次のようなテキストが表示されます: "Successfully authorized! Welcome, Mona Lisa (octocat)."
Sinatra が実行されているターミナルで、Ctrl+C キーを押してサーバーを停止します。

次の手順

クライアントシークレットを安全に保存する

アプリのクライアントシークレットは決して公開しないでください。このチュートリアルでは、クライアントシークレットを gitignore の .env ファイルに保存し、ENV.fetch を使って値にアクセスしました。アプリをデプロイする際に、クライアントシークレットを保存する安全な方法を選び、それに応じて値を取得するようにコードを更新する必要があります。

たとえば、アプリケーションをデプロイするサーバー上の環境変数にシークレットを保存できます。 Azure Key Vault などのシークレット管理サービスを使うこともできます。

デプロイ用にコールバック URL を更新する

このチュートリアルでは、http://localhost:4567 で始まるコールバック URL を使いました。ただし、Sinatra サーバーを起動する場合は、http://localhost:4567 はお使いのコンピューターでローカルにのみ使うことができます。アプリをデプロイする前に、運用環境で使うコールバック URL を使うようにコールバック URL を更新する必要があります。アプリのコールバック URL の更新について詳しくは、「GitHub App 登録の変更」と「ユーザー承認コールバック URL について」を参照してください。

複数のコールバック URL を処理する

このチュートリアルでは、1 つのコールバック URL を使いましたが、アプリには最大 10 個のコールバック URL を含めることができます。複数のコールバック URL を使う場合は、次のようにします。

追加のコールバック URL をアプリに追加します。コールバック URL の追加について詳しくは、「GitHub App 登録の変更」を参照してください。
https://github.com/login/oauth/authorize にリンクする場合は、redirect_uri クエリパラメーターを使って、ユーザーを目的のコールバック URL にリダイレクトします。詳しくは、「GitHub アプリのユーザーアクセストークンの生成」を参照してください。
アプリのコードで、get "CALLBACK_URL" do で始まるコードブロックと同じように各コールバック URL を処理します。

詳しくは、「GitHub App を作成するためのベストプラクティス」を参照してください。

ベストプラクティスに従う

GitHub App に関するベストプラクティスに従うようにする必要があります。詳しくは、「GitHub App を作成するためのベストプラクティス」を参照してください。

GitHub App を使って [Login with GitHub] ボタンを作成する

この記事の内容

はじめに

Web アプリケーションフローとユーザーアクセストークンについて

前提条件

依存関係のインストール

クライアント ID とクライアントシークレットを保存する

ユーザーアクセストークンを生成するコードを追加する

完全なコード例

テスト

次の手順

クライアントシークレットを安全に保存する

デプロイ用にコールバック URL を更新する

複数のコールバック URL を処理する

追加のパラメーターの指定

アプリのニーズに合わせてコードを調整する

トークンを安全に保存する

ベストプラクティスに従う