Ruby on Rails : 구글 연동 로그인 API [Gem : omniauth-google-oauth2]

   해당 글은 https://blog.naver.com/kbs4674/221446902191 로 부터 게시글이 이전되었습니다.

 

별도의 회원정보 기록 없이, 버튼 하나만 누르면 바로 해당 사이트에 가입과 동시에 로그인이 되게하는 'Google 계정 연동 로그인'에 대해 소개하고자 합니다.

 

참고로 이번에 소개드릴 방법은 이미 수동적으로 회원가입이 진행되어 있어도, 구글 연동 로그인을 할 때 페이스북 아이디와 기존 Devise에 가입된 아이디와 맞는게 있을 시 동일하게 연계되어 회원활동이 가능합니다.

---

 부록 

• 네이버 아이디 로그인 [클릭]

• 페이스북 아이디 로그인 [클릭]

 

 참고 

1. Gem : devise를 이미 사용하고 있다는 가정하에 이 글을 작성합니다! [ devise Gem 설치법 클릭 ]

2. API 키 은닉을 위한 Figaro Gem이 선택적으로 필요하나, 저는 보안을 위해 필수적인 방법으로 설명하겠습니다.

 ※ 코드보안 : Figaro Gem [클릭]

 

---

 

•  Chapter 1  "Google 아이디 로그인" 설정

1. 아래 사이트에 접속해주세요.

https://console.developers.google.com/

2. 새 프로젝트를 생성해주세요.

 

3. 프로젝트 생성 후, 햄버거 아이콘 메뉴를 클릭하면 보이는 다른 메뉴에서 API 및 서비스 - 사용자 인증 정보 를 클릭해주세요. 

 

4. 사용자 인증 정보 페이지에서 좌측 메뉴에 보이는 OAuth 동의 화면 으로 이동 후, 다음과같이 내용을 입력해주세요.

 참고1  최소한으로 적어야 하는 내용만 표시했습니다.

 참고2  승인된 도메인에서 API 테스트를 위해 c9users.io 을 추가적으로 적었습니다.

 

5. 이어서, 사용자 인증 정보 로 이동 후, 사용자 인증 정보 만들기 > OAuth 클라이언트 ID 를 클릭해주세요.

 

6. 애플리케이션 유형을 웹 애플리케이션 으로 선택 하시고, 유형을 선택하면 보이는 Form 창들을 홈페이지 특성에 맞게 입력해주세요.

 참고1  승인된 리디렉션 URI에서 주소를 적을 때, 자신의 홈페이지 주소 뒤에  /users/auth/google_oauth2/callback  을 붙여서 입력해주세요.

 참고2  승인된 리디렉션 URI에서 홈페이지 Call 주소를 적어내실 때, http, https 둘 다 표기해두시는게 좋습니다.

 

7. OAuth 클라이언트 계정을 생성하면 아래 사진과 같은 클라이언트 ID 및 보안키가 생성이 됩니다.

ID값과 보안키 값을 메모장 같은 곳에 따로 옮겨놓고,  Chapter 2  과정으로 넘어가 주세요.

 

 

•  Chapter 2   Ruby on Rails에서 "구글 연동 로그인 : omniauth-google-oauth2" 코드 작성

 참고 

• 이미 제 글을 참고해서 페이스북 로그인 및 구글 로그인을 사용하고 계시다면,  Chapter 2  에서는 1, 4, 5번 과정만 진행해주세요.

1.  Gemfile  로 가셔서 다음 내용들을 입력합니다.

## 로그인 API 때 쓰일 Gem
gem 'omniauth-oauth2'
gem 'omniauth-google-oauth2'
 
## API 키를 숨기기 위한 Gem
gem 'figaro'

그리고  bundle install  명령어를 입력하여 Gem을 설치합니다.

 

Gem 설치 에러 안내  

 

 

Gem을 설치할 때 다음과 같은 에러가 발생할 수 있습니다.

위 에러는 관련된 Gem(dependency) 들이 버전에 호환이 안되어서 발생되는 문제입니다.

 

이런 경우에는

bundle update --conservatative

명령어를 입력해주세요.

이 명령어는 최소 Gem들의 버전을 최신화 시킵니다.

 

3. Users(Devise)와 관련된 Controller 추가 및 새로운 컬럼 추가를 위해 명령어들을 터미널에 입력해주세요.

rails g devise:controllers users
rails g migration add_name_to_users name:string

그리고 마지막으로

rake db:migrate

명령어를 터미널에 입력합니다.

 

 참고 

rails generate devise:controllers users

위 명령어를 입력하면

 

 

 app/controller/users  에 devise 관련 Controller들이 생성이 됩니다.

 

4. 다시 Rails로 돌아와서,  config  폴더에  application.yml  파일을 생성해준 뒤, 다음 내용들을 입력합니다.

## config/application.yml
GOOGLE_CLIENT_ID: "[API CLIENT 아이디]"
GOOGLE_CLIENT_SECRET: "[API CLIENT 암호]"

CLIENT ID와 SECRET은  Chapter 1  의 7번 과정 때 본 코드들입니다!

application.yml 파일 내 API 정보를 예시적으로 입력해 보면

## config/application.yml

GOOGLE_CLIENT_ID: "90126260616-eemb2rejq1012ei0f72u6j787qnla024.apps.googleusercontent.com"
GOOGLE_CLIENT_SECRET: "JfoUdnDzCXVwavIEqXGNG_8l7"

위와 같습니다.

위 코드는 어디까지나 예시입니다, 자신의 기준에 맞춰서 작성해주세요!

 

이번 4번 과정은 Figaro : 코드보안[클릭]에 관련된 내용으로, 자세한 설명은 생략합니다.

 

5.  config/initializers/devise.rb  가서 다음 내용을 입력해주세요.

config.omniauth :google_oauth2, ENV["GOOGLE_CLIENT_ID"], ENV["GOOGLE_CLIENT_SECRET"]

저 같은 경우, 위 코드를

Devise.setup do |config|
...
# ==> OmniAuth
  # Add a new OmniAuth provider. Check the wiki for more information on setting
  # up on your models and hooks.
  # config.omniauth :github, 'APP_ID', 'APP_SECRET', scope: 'user,public_repo'
  config.omniauth :google_oauth2, ENV["GOOGLE_CLIENT_ID"], ENV["GOOGLE_CLIENT_SECRET"]
  ...
end

위치에 작성했습니다.

솔직히 위 코드는  Devise.setup do |config|  아래 어딘가에만 작성되면 됩니다.

 

6.  config/routes.rb  파일로 이동합니다.

해당 파일의 내용에는 이미

devise_for :users

코드가 작성된게 보일텐데, 이 코드에 이어서

devise_for :users, :controllers => { omniauth_callbacks: 'users/omniauth_callbacks' }

위와같이 내용을 덧붙여서 작성합니다.

위 내용은  app/controllers/users 에 있는  omniauth_callbacks_controller.rb  파일을 사용하겠다는 의미입니다.

 

7.  app/controllers/users/omniauth_callbacks_controller.rb  파일에 다음 내용을 작성합니다.

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def self.provides_callback_for(provider)
    class_eval %Q{
      def #{provider}
        @user = User.find_for_oauth(request.env["omniauth.auth"], current_user)
 
        if @user.persisted?
          sign_in_and_redirect @user, event: :authentication
          set_flash_message(:notice, :success, kind: "#{provider}".capitalize) if is_navigational_format?
        else
          session["devise.#{provider}_data"] = request.env["omniauth.auth"]
          redirect_to new_user_registration_url
        end
      end
    }
  end
 
  [:kakao, :naver, :facebook, :google_oauth2].each do |provider|
    provides_callback_for provider
  end
 
  def after_sign_in_path_for(resource)
      root_path
  end
end

 참고  과거에 배포된 코드들은 5번 째, 11번 째 줄에  env["omniauth.auth"]  라고만 표시를 했었는데,

5.1.5 레일즈 버전에서 사용을 하면 undefined local variable or method `env' for OmmniauthController 에러가 발생했습니다.

그래서 해당 문제에 대해서는  request.env["omniauth.auth"]  로 수정을 해서 해결했습니다.

 

8.  app/models/user.rb  파일에 다음 내용을 작성합니다.

• devise 옵션에 :omniauthable 추가
• 새로운 메소드 (def self.find_for_oauth) 코드 추가

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable, :omniauthable
 
  def self.find_for_oauth(auth, current_user)
        # 이미 있는 계정인지 확인한다.
        email = auth.info.email
        user = User.where(:email => email).first
        
        if not self.where(email: auth.info.email).exists?
            # 계정이 없다면 새로운 데이터를 생성한다.
            if user.nil?
                user = User.new(name: auth.info.name, email: email ? auth.info.email : "#{auth.uid}@#{auth.provider}.com", password: Devise.friendly_token[0,20])
                user.save!
            end
        end
    user
  end
end

 

9. 모든 준비는 끝났습니다!

서버를 껏다 키고 로그인 페이지로 가보세요!

 

10. 로그인 페이지로 이동하면

 

위 사진과 같이 'Sign in with GoogleOauth2'가 보이는게 확인이 됩니다.

 

 

'Sign in with GoogleOauth2' 버튼을 누르면 계정 연동 안내가 보여지고, 무사히 로그인 된 것도 확인됩니다!

 참고  이미 수동적으로 회원가입이 진행되어 있어도, '구글 연동 로그인'을 누르면 이 전 계정과 연계되어 회원활동이 가능합니다.

 

 

또한 Rails DB 테이블에서 보면 User 테이블에 정보가 입력이 되어있는 것도 확인이 됩니다.

 

 

•  참고  외부 로그인 링크 디자인 편집

외부 로그인 링크에 대한 디자인 편집은  app/views/devise/shared/_links.html.erb  에서 할 수 있습니다.

## app/views/devise/shared/_links.html.erb
 
<%- if devise_mapping.omniauthable? %>
  <%- resource_class.omniauth_providers.each do |provider| %>
    <% if provider.to_s == "naver" %>
      <div><%= link_to "네이버 아이디로 로그인", omniauth_authorize_path(resource_name, provider) %></div>
    <% end %>
    <% if provider.to_s == "facebook" %>
      <div><%= link_to "페이스북 아이디로 로그인", omniauth_authorize_path(resource_name, provider) %></div>
    <% end %>
    <% if provider.to_s == "google_oauth2" %>
      <div><%= link_to "구글 아이디로 로그인", omniauth_authorize_path(resource_name, provider) %></div>
    <% end %>
  <% end -%>
<% end -%>

 

 

•  참고  구글 연동 로그인 API 설정 안내

구글 로그인 같은 경우, 네이버 및 페이스북과는 다르게 개발자/출시모드 구분이 없습니다.

즉, 내 구글 계정 뿐만이 아닌 타 구글 계정으로도 연동 로그인이 가능합니다.

 

 

• 자료 참고

1. SNS 인증 로그인 하기 1 [클릭]

2. SNS 인증 로그인 하기 2 [클릭]

3. SNS 인증 로그인 하기 3 [클릭]

4. undefined local variable or method `env' for OmmniauthController 에러 [클릭]

 

루비온 레일즈 Ruby on Rails ROR