OAuthクライアントの準備

OAuthクライアントを API Console で作ります。
「新しいプロジェクト」を選びます。
「同意画面を構成」を選びます。
User Type「外部」を選び、「作成」を選びます。
アプリ名、ユーザーサポートメール、デベロッパーの連絡先情報を入力します。
「保存して次へ」を選びます。
「スコープを追加または削除」を選びます。
Google アカウントのメインのメールアドレスの参照
ユーザーの個人情報の表示
Google で公開されているお客様の個人情報とお客様を関連付ける
上記を選択して「更新」を選びます。
「保存して次へ」を選びます。
「保存して次へ」を選びます。
「ダッシュボードに戻る」を選びます。
「認証情報」を選びます。
認証情報を作成で「OAuth 2.0 クライアント ID」を選びます。
アプリケーションの種類「ウェブアプリケーション」を選びます。
承認済みの JavaScript 生成元
http://localhost
http://localhost:3000
承認済みのリダイレクト URI
http://localhost:3000/sessions
「作成」を選びます。
後で必要になるため「クライアントID」を控えておきます。

Railsアプリの実装

アプリを生成します。
googleauth を追加します。


rails new sample_google_login
cd sample_google_login
bundle add googleauth

credentialファイルにクライアントIDを設定します。
以下、Visual Studio Codeで開く例になります。


VISUAL="code --wait" bin/rails credentials:edit


google:
  client_id: クライアントID

google_idを持つUserを生成します。
認証に使うSessionsコントローラーを生成します。


bin/rails g scaffold user google_id
bin/rails db:migrate
bin/rails g controller sessions new --skip-routes

Sessionsコントローラーのルーティングを追加します。


# config/routes.rb
Rails.application.routes.draw do
  # ...
  resources :sessions, only: [:new, :create]
  root "sessions#new"
end

ボタンの実装を参照してビューに追加します。


# app/views/sessions/new.html.erb
<h1>Sessions#new</h1>
<p>Find me in app/views/sessions/new.html.erb</p>

<% flash.each do |name, msg| -%>
  <%= content_tag :div, msg, class: name %>
<% end -%>

<script src="https://accounts.google.com/gsi/client" async></script>
<div id="g_id_onload"
  data-client_id="<%= Rails.application.credentials.google[:client_id] %>"
  data-login_uri="http://localhost:3000/sessions"
  data-auto_prompt="false">
</div>
<div class="g_id_signin"
  data-type="standard"
  data-size="large"
  data-theme="outline"
  data-text="sign_in_with"
  data-shape="rectangular"
  data-logo_alignment="left">
</div>

コントローラーに認証の処理を追加します。


# app/controllers/sessions_controller.rb
class SessionsController < ApplicationController
  skip_forgery_protection only: :create

  def new
  end

  def create
    if valid_g_csrf_token? && user = authenticate_with_google
      cookies.signed[:user_id] = user.id
      redirect_to user
    else
      redirect_to new_session_url, alert: "認証に失敗しました。"
    end
  end

  private
    def valid_g_csrf_token?
      cookies["g_csrf_token"] == params["g_csrf_token"]
    end

    def authenticate_with_google
      payload = Google::Auth::IDTokens.verify_oidc(
        params[:credential],
        aud: Rails.application.credentials.google[:client_id]
      )
      User.find_or_create_by google_id: payload["sub"]
    rescue => error
      logger.error "Google authentication error: #{error}"
      nil
    end
end

ログインボタンが表示されました。

ログインに成功すると下記の画面が表示されます。

以上になります。

▼この記事がいいね！と思ったらブックマークお願いします