Ruby on rails - 구글 계정 연동 로그인 구현하기

Ruby on rails - 구글 계정 연동 로그인 구현하기

아래 실습은 devise gem이 설치되었다고 가정하고 진행되니, 참고바랍니다.

> 1. google developer 에서 프로젝트 생성하기

https://console.developers.google.com 에서 프로젝트 생성

• Create Credentials 을 누르고 OAuth client ID. 눌러서 web-application으로application type을 선택한다.

• authorized redirect URL에 http://localhost:3000/users/auth/google_oauth2/callback을 추가해준다.

그렇게 되면 아래와 같은 창이 뜨게 되는데 그 text들을 복사해두자!

> 2. omniauth -google -oauth2 gem 설치

omniauth -google -oauth2 gem 설치후 bundle install

gem 'omniauth-google-oauth2'

> 3. omniauth -google -oauth2 gem 활용하기

Devise

 config/initializers/devise.rb. 파일을 들어가보자.

• 아래와 같은 코드를 넣어준다. 참고로, client id, client_secret은 1번을 참고바란다.

config.omniauth :google_oauth2, 'GOOGLE_CLIENT_ID', 'GOOGLE_CLIENT_SECRET', {}

• 아래와 같은 코드 역시도 추가해준다.

devise_for :users, controllers: { omniauth_callbacks: 'omniauth_callbacks' }

•  "/app/models/user.rb"  파일에 가서 아래와 같은 코드를 추가해준다.

devise :omniauthable, omniauth_providers: [:google_oauth2]

• rails generate devise:controllers user 명령어로 devise에 관한 컨트롤러가 생기면

app/controllers/users/omniauth_callbacks_controller.rb 를

app/controllers/omniauth_callbacks_controller.rb 과같이 경로를 수정해주고, class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController 였던 class이름도 아래와 같이 수정하고, 코드를 넣어준다.

class OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def google_oauth2
      # You need to implement the method below in your model (e.g. app/models/user.rb)
      @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

• 그리고 아래부분을 user.rb에 넣어준다. 

def self.from_omniauth(access_token)
   data = access_token.info
   user = User.where(:email => data["email"]).first
​
   unless user
     password = Devise.friendly_token[0,20]
     user = User.create(name: data["name"], email: data["email"],
       password: password, password_confirmation: password
     )
   end
   user
  end

간단히 설명하자면, user가 있을시에는 로그인해주고, 없을시에는 생성해주는 코드이다.

> +추가 에러 대응.

Could not authenticate you from GoogleOauth2 because "Csrf detected".

가 뜰수 있는데 이때는

devise.rb 파일에

config.provider "KEY", "SECRET" 을 추가햐주면된다. (이번에도 key, secret은 1번 참고)

참고 : 

https://richonrails.com/articles/google-authentication-in-ruby-on-rails/

https://github.com/zquestz/omniauth-google-oauth2

https://hcn1519.github.io/articles/2016-12/omniauth_devise_configuration

> 4. google 연동 뷰 파일 꾸며주기.

<%- if devise_mapping.omniauthable? %>
...
​
에 해당하는 부분을
​
<%= button_to "구글로 로그인하기",omniauth_authorize_path(resource_name, provider) ,{:class => 'google-login'}%>
​
​

app/views/devise/shared/_links.html.erb경로로 가서 위의 부분 같이 교체해주었고,

 .google-login{
  text-indent:-10000px;
  width: 200px;
  height: 50px;
  background-image: url('/assets/img/google.png');
  background-size: cover;
 }

css파일

css파일은 위와같이 작성해 주었다.참고로 구글 로그인관련 png파일은 https://developers.google.com/identity/branding-guidelines 에 있다.

잘 적용되었다.