gem omniauth-google-oauth2 및 gem devise를 사용한 Google 로그인 인증 구현

11261 단어 googleoauth2OmniAuthdevise

gem devise를 사용한 Google 인증을 통한 로그인 구현



간단하게 로그인 기능을 구현해 보겠습니다.

환경 구축



새 디렉토리 만들기



디렉토리로 이동하여$ bundle init
gem 'rails'
$ bundle install$ bundle exec rails db:create$ rbenv global 2.6.3$ rbenv rehash$ rails new . --skip-test

구현 전 준비



①gcp(google cloud platform) 설정
  • 구글 계정으로 로그인


    • 이런 화면이 나타납니다.




  • OAuth 동의 화면

    • → 애플리케이션 이름, 승인된 도메인 입력

    → 승인된 도메인은 외부에서 액세스할 수 있도록 나중에 ngrok에서 도메인을 설정합니다.
    (ngrok 서버 연결 화면의 forwarding 부분의 도메인입니다)
  • 자격 증명 만들기

    • → 승인된 JavaScript 생성자 URI
    localhost:3000

    → 승인된 리디렉션 URI
    http://localhost:3000/users/auth/google_oauth2/callback

    ②ngrok 설정
  • ngrok 페이지에서 signup (신규 등록)

    • · 다운로드 ngrok
    → ZIP 파일 다운로드

    · 해동하여 설치
    →ngrok.zip을 더블 클릭

    · 계정 연결
    $cd ~/Downloads/

    에서 다운로드 디렉토리로 이동

    →$ ./ngrok authtoken ********
  • 서버로
    → $ ./ngrok http 3000

    • 성공 화면


    구현


    $ rails g controller static_pages home

    routes.rb
    Rails.application.routes.draw do
  root to: "static_pages#home"
  get 'static_pages/home'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
end
  • gem 'devise' 설치
  • $ rails g devise:install
  • $ rails g devise user
  • 플래시 메세 추가
    app/views/layouts/application.html.erb.에 
    • <p class="notice"><%= notice %></p>
<p class="alert"><%= alert %></p>

    추가
  • 톱 페이지 
    • <h1>StaticPages#home</h1>
<% if user_signed_in? %>
  <%= link_to "Sign out", destroy_user_session_path, method: :delete %>
<% else %>
  <%= link_to "Sign in", new_user_session_path %>
<% end %>

    application.html.erb
    <!DOCTYPE html>
<html>
  <head>
    <title>TwitterAuthExample</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>
    <%= yield %>
  </body>
</html>
  • 자격 증명

    • URI
    http://localhost:3000

    승인된 리디렉션 URI
    http://localhost:3000/users/auth/google_oauth2/callback
  • credentials에 키 등의 정보를 기재
    • $ EDITOR="vim" rails credentials:edit
    google_oauth2:
  client_id: xxxxx
  client_secret: xxxxx

    콘솔에서
    Rails.application.credentials

    실행하여 확인

    gem 'omniauth-google-oauth2'
    설치

    config/initializer/devise.rb
    다음 추가

    config/initializer/devise.rb
    config.omniauth :google_oauth2, Rails.application.credentials.google_oauth2[:client_id], Rails.application.credentials.google_oauth2[:client_secret], scope: 'email', redirect_url: "#{ENV['HOST']}/users/auth/google_oauth2/callback"

    user.rb
    class User < ApplicationRecord

  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable,
         :omniauthable, omniauth_providers: [:google_oauth2]

  def self.from_omniauth(auth)
    where(provider: auth.provider, uid: auth.uid).first_or_create do |user|
      user.email = auth.info.email
      user.password = Devise.friendly_token[0,20]
    end
  end
end

    $ rails g migration add_oauth_columns_to_users

    마이그레이션 파일 내용
    class AddOauthColumnsToUsers < ActiveRecord::Migration[6.0]

  def change
    add_column :users, :provider, :string
    add_column :users, :uid, :string
  end
end

    
Rails.application.routes.draw do
  devise_for :users, controllers: {
      omniauth_callbacks: 'users/omniauth_callbacks'
  }
  root to: "static_pages#home"
  devise_scope :user do
    get '/users/sign_out' => 'devise/sessions#destroy'
  end
  get 'static_pages/home'

end
    $ rails g devise:controllers users -c=omniauth_callbacks
    omniauth_callbacks_controller.rb
    class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def google_oauth2
    @user = User.from_omniauth(request.env['omniauth.auth'])


if @user.persisted?
      flash[:notice] = I18n.t 'devise.omniauth_callbacks.success', kind: 'Google'

 sign_in_and_redirect @user, event: :authentication
    else

  session['devise.google_data'] = request.env['omniauth.auth'].except(:extra) # Removing extra as it can overflow some session stores
      redirect_to new_user_registration_url, alert: @user.errors.full_messages.join("\n")
    end
  end
end

    완성











    Raspberry Pi 4에서 TensorFlowLite 이동
    【GCP】존간의 VM 인스턴스를 접속

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage