はじめに
GitHubでログインをPhoenixアプリの上に実装してみます。
今回は、OAuth2クライアントライブラリを使わずに、
の仕様書に沿って、実装してみたいとおもいます。
HTTPクライアントライブラリは使います。
fly-apps/live_beatsを参考にします。
OAuth2クライアントライブラリを使うなら、ueberauth/oauth2を使うのがよいとおもいます。
実装すべきこと
実装すべきことは以下の3点です。
- Users are redirected to request their GitHub identity
- Users are redirected back to your site by GitHub
- Your app accesses the API with the user's access token
詳しくは、
に書いてあります。
What is fly-apps/live_beats?
Play music together with Phoenix LiveView!
Phoenixの作者Chris McCordさんが作成されたサンプルPhoenixアプリです。
以前、動かしてみましたー 記事を書きました。
OAuth2
fly-apps/live_beatsプロジェクトでは、HTTPクライアントライブラリMintを使って、OAuth2クライアントの処理を実装しています。
の仕様書に書いてある通りの処理をしています。
特にポイントとなるソースコードは以下の3ファイルです。
live_beats/github.ex
lib/live_beats_web/controllers/oauth_callback_controller.ex
lib/live_beats_web/controllers/user_auth.ex
ここでだいたいこの記事はおわりです。
以下、コピペして動くものを作ってみました。
自分でも作ってみました
fly-apps/live_beatsからのコピペです。
ログインに成功すると、
$\huge{元気ですかーーーーッ！}$
というメッセージを確認できます。
使用したバージョン
mix phx.new -v
Phoenix installer v1.6.13
asdf current
elixir 1.14.0-otp-25
erlang 25.0.3
PostgreSQL
Dockerで動かしました。
docker run -d --rm -p 5432:5432 -e POSTGRES_USER=postgres -e POSTGRES_PASSWORD=postgres postgres:13
プロジェクト作成
mix phx.new hello_github
cd hello_github
ソースコードを作る
あとはだらだら変更点を書いておきます。
lib/hello_github/github.ex
ポイントとなるソースコードその１です。
通りの処理がされています。
lib/hello_github/github.ex
defmodule HelloGithub.Github do
def authorize_url() do
state = random_string()
"https://github.com/login/oauth/authorize?client_id=#{client_id()}&state=#{state}&scope=user:email"
end
def exchange_access_token(opts) do
code = Keyword.fetch!(opts, :code)
state = Keyword.fetch!(opts, :state)
state
|> fetch_exchange_response(code)
|> fetch_user_info()
|> fetch_emails()
end
defp fetch_exchange_response(state, code) do
resp =
http(
"github.com",
"POST",
"/login/oauth/access_token",
[state: state, code: code, client_secret: secret()],
[{"accept", "application/json"}]
)
with {:ok, resp} <- resp,
%{"access_token" => token} <- Jason.decode!(resp) do
{:ok, token}
else
{:error, _reason} = err -> err
%{} = resp -> {:error, {:bad_response, resp}}
end
end
defp fetch_user_info({:error, _reason} = error), do: error
defp fetch_user_info({:ok, token}) do
resp =
http(
"api.github.com",
"GET",
"/user",
[],
[{"accept", "application/vnd.github.v3+json"}, {"Authorization", "token #{token}"}]
)
case resp do
{:ok, info} -> {:ok, %{info: Jason.decode!(info), token: token}}
{:error, _reason} = err -> err
end
end
defp fetch_emails({:error, _} = err), do: err
defp fetch_emails({:ok, user}) do
resp =
http(
"api.github.com",
"GET",
"/user/emails",
[],
[{"accept", "application/vnd.github.v3+json"}, {"Authorization", "token #{user.token}"}]
)
case resp do
{:ok, info} ->
emails = Jason.decode!(info)
{:ok, Map.merge(user, %{primary_email: primary_email(emails), emails: emails})}
{:error, _reason} = err ->
err
end
end
def random_string do
binary = <<
System.system_time(:nanosecond)::64,
:erlang.phash2({node(), self()})::16,
:erlang.unique_integer()::16
>>
binary
|> Base.url_encode64()
|> String.replace(["/", "+"], "-")
end
defp client_id, do: HelloGithub.config([:github, :client_id])
defp secret, do: HelloGithub.config([:github, :client_secret])
defp http(host, method, path, query, headers, body \\ "") do
{:ok, conn} = Mint.HTTP.connect(:https, host, 443)
path = path <> "?" <> URI.encode_query([{:client_id, client_id()} | query])
{:ok, conn, ref} =
Mint.HTTP.request(
conn,
method,
path,
headers,
body
)
receive_resp(conn, ref, nil, nil, false)
end
defp receive_resp(conn, ref, status, data, done?) do
receive do
message ->
{:ok, conn, responses} = Mint.HTTP.stream(conn, message)
{new_status, new_data, done?} =
Enum.reduce(responses, {status, data, done?}, fn
{:status, ^ref, new_status}, {_old_status, data, done?} -> {new_status, data, done?}
{:headers, ^ref, _headers}, acc -> acc
{:data, ^ref, binary}, {status, nil, done?} -> {status, binary, done?}
{:data, ^ref, binary}, {status, data, done?} -> {status, data <> binary, done?}
{:done, ^ref}, {status, data, _done?} -> {status, data, true}
end)
cond do
done? and new_status == 200 -> {:ok, new_data}
done? -> {:error, {new_status, new_data}}
!done? -> receive_resp(conn, ref, new_status, new_data, done?)
end
end
end
defp primary_email(emails) do
Enum.find(emails, fn email -> email["primary"] end)["email"] || Enum.at(emails, 0)
end
end
lib/hello_github_web/controllers/oauth_callback_controller.ex
ポイントとなるソースコードその２です。
GitHubからのコールバックのエントリーポイントです。
lib/hello_github_web/controllers/oauth_callback_controller.ex
defmodule HelloGithubWeb.OAuthCallbackController do
use HelloGithubWeb, :controller
require Logger
alias HelloGithub.Accounts
def new(conn, %{"provider" => "github", "code" => code, "state" => state}) do
client = github_client(conn)
with {:ok, info} <- client.exchange_access_token(code: code, state: state),
%{info: info, primary_email: primary, emails: emails, token: token} = info,
{:ok, user} <- Accounts.register_github_user(primary, info, emails, token) do
conn
|> put_flash(:info, "Welcome #{user.email}")
|> HelloGithubWeb.UserAuth.log_in_user(user)
else
{:error, %Ecto.Changeset{} = changeset} ->
Logger.debug("failed GitHub insert #{inspect(changeset.errors)}")
conn
|> put_flash(
:error,
"We were unable to fetch the necessary information from your GithHub account"
)
|> redirect(to: "/")
{:error, reason} ->
Logger.debug("failed GitHub exchange #{inspect(reason)}")
conn
|> put_flash(:error, "We were unable to contact GitHub. Please try again later")
|> redirect(to: "/")
end
end
def new(conn, %{"provider" => "github", "error" => "access_denied"}) do
redirect(conn, to: "/")
end
def sign_out(conn, _) do
HelloGithubWeb.UserAuth.log_out_user(conn)
end
defp github_client(conn) do
conn.assigns[:github_client] || HelloGithub.Github
end
end
lib/hello_github_web/controllers/user_auth.ex
ポイントとなるソースコードその３です。
前述のOAuthCallbackControllerやroutes.exから呼び出されています。
lib/hello_github_web/controllers/user_auth.ex
defmodule HelloGithubWeb.UserAuth do
import Plug.Conn
import Phoenix.Controller
alias Phoenix.LiveView
alias HelloGithub.Accounts
alias HelloGithubWeb.Router.Helpers, as: Routes
def on_mount(:current_user, _params, session, socket) do
case session do
%{"user_id" => user_id} ->
{:cont, LiveView.assign_new(socket, :current_user, fn -> Accounts.get_user(user_id) end)}
%{} ->
{:cont, LiveView.assign(socket, :current_user, nil)}
end
end
def on_mount(:ensure_authenticated, _params, session, socket) do
case session do
%{"user_id" => user_id} ->
new_socket =
LiveView.assign_new(socket, :current_user, fn -> Accounts.get_user!(user_id) end)
%Accounts.User{} = new_socket.assigns.current_user
{:cont, new_socket}
%{} ->
{:halt, redirect_require_login(socket)}
end
rescue
Ecto.NoResultsError -> {:halt, redirect_require_login(socket)}
end
defp redirect_require_login(socket) do
socket
|> LiveView.put_flash(:error, "Please sign in")
|> LiveView.redirect(to: Routes.sign_in_path(socket, :index))
end
@doc """
Logs the user in.
It renews the session ID and clears the whole session
to avoid fixation attacks. See the renew_session
function to customize this behaviour.
It also sets a `:live_socket_id` key in the session,
so LiveView sessions are identified and automatically
disconnected on log out. The line can be safely removed
if you are not using LiveView.
"""
def log_in_user(conn, user) do
user_return_to = get_session(conn, :user_return_to)
conn = assign(conn, :current_user, user)
conn
|> renew_session()
|> put_session(:user_id, user.id)
|> put_session(:live_socket_id, "users_sessions:#{user.id}")
|> redirect(to: user_return_to || signed_in_path(conn))
end
defp renew_session(conn) do
conn
|> configure_session(renew: true)
|> clear_session()
end
@doc """
Logs the user out.
It clears all session data for safety. See renew_session.
"""
def log_out_user(conn) do
if live_socket_id = get_session(conn, :live_socket_id) do
HelloGithubWeb.Endpoint.broadcast(live_socket_id, "disconnect", %{})
end
conn
|> renew_session()
|> redirect(to: Routes.sign_in_path(conn, :index))
end
@doc """
Authenticates the user by looking into the session.
"""
def fetch_current_user(conn, _opts) do
user_id = get_session(conn, :user_id)
user = user_id && Accounts.get_user(user_id)
assign(conn, :current_user, user)
end
@doc """
Used for routes that require the user to not be authenticated.
"""
def redirect_if_user_is_authenticated(conn, _opts) do
if conn.assigns[:current_user] do
conn
|> redirect(to: signed_in_path(conn))
|> halt()
else
conn
end
end
@doc """
Used for routes that require the user to be authenticated.
If you want to enforce the user email is confirmed before
they use the application at all, here would be a good place.
"""
def require_authenticated_user(conn, _opts) do
if conn.assigns[:current_user] do
conn
else
conn
|> put_flash(:error, "You must log in to access this page.")
|> maybe_store_return_to()
|> redirect(to: Routes.sign_in_path(conn, :index))
|> halt()
end
end
defp maybe_store_return_to(%{method: "GET"} = conn) do
%{request_path: request_path, query_string: query_string} = conn
return_to = if query_string == "", do: request_path, else: request_path <> "?" <> query_string
put_session(conn, :user_return_to, return_to)
end
defp maybe_store_return_to(conn), do: conn
def signed_in_path(conn) do
Routes.awesome_path(conn, :index)
end
end
config/dev.exs
config/dev.exs
config :hello_github, :github,
client_id: System.fetch_env!("HELLO_GITHUB_GITHUB_CLIENT_ID"),
client_secret: System.fetch_env!("HELLO_GITHUB_GITHUB_CLIENT_SECRET")
lib/hello_github.ex
lib/hello_github.ex
def config([main_key | rest] = keyspace) when is_list(keyspace) do
main = Application.fetch_env!(:hello_github, main_key)
Enum.reduce(rest, main, fn next_key, current ->
case Keyword.fetch(current, next_key) do
{:ok, val} -> val
:error -> raise ArgumentError, "no config found under #{inspect(keyspace)}"
end
end)
end
lib/hello_github/accounts.ex
lib/hello_github/accounts.ex
defmodule HelloGithub.Accounts do
import Ecto.Query
import Ecto.Changeset
alias HelloGithub.Repo
alias HelloGithub.Accounts.{User, Identity}
## Database getters
@doc """
Gets a single user.
Raises `Ecto.NoResultsError` if the User does not exist.
## Examples
iex> get_user!(123)
%User{}
iex> get_user!(456)
** (Ecto.NoResultsError)
"""
def get_user!(id), do: Repo.get!(User, id)
def get_user(id), do: Repo.get(User, id)
## User registration
@doc """
Registers a user from their GithHub information.
"""
def register_github_user(primary_email, info, emails, token) do
if user = get_user_by_provider(:github, primary_email) do
update_github_token(user, token)
else
info
|> User.github_registration_changeset(primary_email, emails, token)
|> Repo.insert()
end
end
def get_user_by_provider(provider, email) when provider in [:github] do
query =
from(u in User,
join: i in assoc(u, :identities),
where:
i.provider == ^to_string(provider) and
fragment("lower(?)", u.email) == ^String.downcase(email)
)
Repo.one(query)
end
defp update_github_token(%User{} = user, new_token) do
identity =
Repo.one!(from(i in Identity, where: i.user_id == ^user.id and i.provider == "github"))
{:ok, _} =
identity
|> change()
|> put_change(:provider_token, new_token)
|> Repo.update()
{:ok, Repo.preload(user, :identities, force: true)}
end
end
lib/hello_github/accounts/identity.ex
lib/hello_github/accounts/identity.ex
defmodule HelloGithub.Accounts.Identity do
use Ecto.Schema
import Ecto.Changeset
alias HelloGithub.Accounts.{Identity, User}
# providers
@github "github"
@derive {Inspect, except: [:provider_token, :provider_meta]}
schema "identities" do
field :provider, :string
field :provider_token, :string
field :provider_email, :string
field :provider_login, :string
field :provider_name, :string, virtual: true
field :provider_id, :string
field :provider_meta, :map
belongs_to :user, User
timestamps()
end
@doc """
A user changeset for github registration.
"""
def github_registration_changeset(info, primary_email, emails, token) do
params = %{
"provider_token" => token,
"provider_id" => to_string(info["id"]),
"provider_login" => info["login"],
"provider_name" => info["name"] || info["login"],
"provider_email" => primary_email
}
%Identity{provider: @github, provider_meta: %{"user" => info, "emails" => emails}}
|> cast(params, [
:provider_token,
:provider_email,
:provider_login,
:provider_name,
:provider_id
])
|> validate_required([:provider_token, :provider_email, :provider_name, :provider_id])
|> validate_length(:provider_meta, max: 10_000)
end
end
lib/hello_github/accounts/user.ex
lib/hello_github/accounts/user.ex
defmodule HelloGithub.Accounts.User do
use Ecto.Schema
import Ecto.Changeset
alias HelloGithub.Accounts.{User, Identity}
schema "users" do
field :email, :string
field :name, :string
field :username, :string
field :confirmed_at, :naive_datetime
field :role, :string, default: "subscriber"
field :profile_tagline, :string
field :active_profile_user_id, :id
has_many :identities, Identity
timestamps()
end
@doc """
A user changeset for github registration.
"""
def github_registration_changeset(info, primary_email, emails, token) do
%{"login" => username, "avatar_url" => avatar_url, "html_url" => external_homepage_url} = info
identity_changeset =
Identity.github_registration_changeset(info, primary_email, emails, token)
if identity_changeset.valid? do
params = %{
"username" => username,
"email" => primary_email,
"name" => get_change(identity_changeset, :provider_name),
"avatar_url" => avatar_url,
"external_homepage_url" => external_homepage_url
}
%User{}
|> cast(params, [:email, :name, :username])
|> validate_required([:email, :name, :username])
|> validate_username()
|> validate_email()
|> put_assoc(:identities, [identity_changeset])
else
%User{}
|> change()
|> Map.put(:valid?, false)
|> put_assoc(:identities, [identity_changeset])
end
end
defp validate_email(changeset) do
changeset
|> validate_required([:email])
|> validate_format(:email, ~r/^[^\s]+@[^\s]+$/, message: "must have the @ sign and no spaces")
|> validate_length(:email, max: 160)
|> unsafe_validate_unique(:email, HelloGithub.Repo)
|> unique_constraint(:email)
end
defp validate_username(changeset) do
changeset
|> validate_format(:username, ~r/^[a-zA-Z0-9_-]{2,32}$/)
|> unsafe_validate_unique(:username, HelloGithub.Repo)
|> unique_constraint(:username)
|> prepare_changes(fn changeset ->
case fetch_change(changeset, :profile_tagline) do
{:ok, _} ->
changeset
:error ->
username = get_field(changeset, :username)
put_change(changeset, :profile_tagline, "#{username}'s beats")
end
end)
end
end
lib/hello_github_web/live/awesome_live.ex
ログイン後にアクセスできる画面です。
lib/hello_github_web/live/awesome_live.ex
defmodule HelloGithubWeb.AwesomeLive do
use HelloGithubWeb, :live_view
def mount(_params, _session, socket) do
{:ok, socket}
end
def render(assigns) do
IO.inspect(assigns)
~H"""
元気ですかーーーーッ！
Welcome
<p>Hello, <%= @current_user.email %>!</p>
"""
end
end
lib/hello_github_web/live/sign_in_live.ex
ログイン画面です。
lib/hello_github_web/live/sign_in_live.ex
defmodule HelloGithubWeb.SignInLive do
use HelloGithubWeb, :live_view
def render(assigns) do
~H"""
<div class="min-h-screen bg-gray-50 flex flex-col justify-center py-12 sm:px-6 lg:px-8">
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
<div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
<div class="space-y-6">
<a
href={HelloGithub.Github.authorize_url()}
class="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Sign in with GitHub
</a>
</div>
</div>
</div>
</div>
"""
end
def mount(_params, _session, socket) do
{:ok, socket}
end
end
lib/hello_github_web/router.ex
lib/hello_github_web/router.ex
import HelloGithubWeb.UserAuth,
only: [redirect_if_user_is_authenticated: 2]
scope "/", HelloGithubWeb do
pipe_through [:browser, :redirect_if_user_is_authenticated]
get "/oauth/callbacks/:provider", OAuthCallbackController, :new
end
scope "/", HelloGithubWeb do
pipe_through :browser
get "/", PageController, :index
delete "/signout", OAuthCallbackController, :sign_out
live_session :default, on_mount: [{HelloGithubWeb.UserAuth, :current_user}] do
live "/signin", SignInLive, :index
end
live_session :authenticated,
on_mount: [{HelloGithubWeb.UserAuth, :ensure_authenticated}] do
live "/awesome", AwesomeLive, :index
end
end
lib/hello_github_web/templates/layout/_user_menu.html.heex
lib/hello_github_web/templates/layout/_user_menu.html.heex
<%= if @current_user do %>
<li><p><%= @current_user.email %></p></li>
<li><%= link "Log out", to: Routes.o_auth_callback_path(@conn, :sign_out), method: :delete %></li>
<% end %>
lib/hello_github_web/templates/layout/root.html.heex
lib/hello_github_web/templates/layout/root.html.heex
<%= if function_exported?(Routes, :live_dashboard_path, 2) do %>
<li><%= link "LiveDashboard", to: Routes.live_dashboard_path(@conn, :home) %></li>
<% end %>
+ <%= render "_user_menu.html", assigns %>
</ul>
</nav>
<a href="https://phoenixframework.org/" class="phx-logo">
mix.exs
mix.exs
@@ -48,7 +48,8 @@ defmodule HelloGithub.MixProject do
{:telemetry_poller, "~> 1.0"},
{:gettext, "~> 0.18"},
{:jason, "~> 1.2"},
- {:plug_cowboy, "~> 2.5"}
+ {:plug_cowboy, "~> 2.5"},
+ {:mint, "~> 1.0"}
]
end
priv/repo/migrations/20210905021010_create_user_auth.exs
GitHubにログインしたあとにGitHubからもらった情報を自データベースに保存します。
priv/repo/migrations/20210905021010_create_user_auth.exs
defmodule LiveBeats.Repo.Migrations.CreateUserAuth do
use Ecto.Migration
def change do
execute "CREATE EXTENSION IF NOT EXISTS citext", ""
create table(:users) do
add :email, :citext, null: false
add :username, :string, null: false
add :name, :string
add :role, :string, null: false
add :confirmed_at, :naive_datetime
add :profile_tagline, :string
add :active_profile_user_id, references(:users, on_delete: :nilify_all)
timestamps()
end
create unique_index(:users, [:email])
create unique_index(:users, [:username])
create table(:identities) do
add :user_id, references(:users, on_delete: :delete_all), null: false
add :provider, :string, null: false
add :provider_token, :string, null: false
add :provider_login, :string, null: false
add :provider_email, :string, null: false
add :provider_id, :string, null: false
add :provider_meta, :map, default: "{}", null: false
timestamps()
end
create index(:identities, [:user_id])
create index(:identities, [:provider])
create unique_index(:identities, [:user_id, :provider])
end
end
GitHubにアプリ登録をする
https://github.com/settings/applications/new
ここから作れます。
Application name: 適当な名前をつけてください
Homepage URL: http://localhost:4000
Authorization callback URL: http://localhost:4000/oauth/callbacks/github
を登録します。
動かす
迷わず動かしてみます。
export HELLO_GITHUB_GITHUB_CLIENT_ID="..."
export HELLO_GITHUB_GITHUB_CLIENT_SECRET="..."
mix setup
mix phx.server
HELLO_GITHUB_GITHUB_CLIENT_IDとHELLO_GITHUB_GITHUB_CLIENT_SECRETは、GitHubアプリの設定画面で確認できます。
おわりに
GitHubでログインをPhoenixで楽しみました。
fly-apps/live_beatsプロジェクトから必要な処理を抜き書きしました。
データベースに保存する処理を省けばもっと量は少なくなるとおもいます。