티스토리 뷰

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

 

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

 

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


 부록 

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

  • 구글 아이디 로그인 [클릭

 

 참고 

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

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

  코드보안 : Figaro Gem [클릭]

 


 

  •  Chapter 1  "네이버 아이디 로그인" 서비스 가입 및 설정

1. 아래 사이트로 이동을 합니다.

https://developers.naver.com/

이어서 홈페이지 메인에 보이는 '네이버 아이디로 로그인'을 클릭합니다.

 

2. 사이트를 조금만 아래로 내리면 보이는 '오픈 API 이용 신청' 버튼을 클릭합니다.

 

3.새로 연동할 API의 정보를 다음과 같이 입력합니다.

 

 참고  내용 작성 안내

  • 구름IDE를 이용하시는 분은 서비스 URL 입력 시 http 로 입력을 권유드립니다.
  • 어플리케이션 이름 : 아무 이름이나 지어줘서 입력해도 됩니다. 사이트 특징에 맞는 이름을 지어주면 구분하기 쉽겠죠!
  • 사용 API - 네아로 (네이버 아이디 로그인) : 기본적으로 '이메일, 성별, 프로필 사진'이 필수적으로 선택되어야 합니다. (Gem이 위 4개의 정보는 필수적으로 수집하게 설정됨.)
  • 서비스 URL : 네이버 로그인 연동을 할 자신의 홈페이지
  • 네이버아이디로그인 Callback URL : 네이버로 부터 승인받은 세션을 처리할 Callback URL 로서,
  • 자신의 주소 뒤에  /users/auth/naver/callback  을 입력해주면 됩니다.

 

4. 등록을 마치면 자신이 등록한 API 정보를 보실 수가 있습니다.

 

우리는 위 정보를 Ruby on Rails에 등록을 할겁니다.

 주의  위 정보는 외부에 노출이 되면 안됩니다.

 

5. 위 모든 과정을 다 하셨다면,  Chapter 2  로 넘어가주세요.

 

 

  •  Chapter 2  Ruby on Rails에서 "네이버 연동 로그인 : omniauth-naver" 코드 작성

 참고 

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

 

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

## 로그인 API 때 쓰일 Gem
gem 'omniauth-oauth2'
gem 'omniauth-naver', '~> 0.1.0'
 
## 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

NAVER_CLIENT_ID: "(API CLIENT 아이디)"
NAVER_CLIENT_SECRET: "(API CLIENT 암호)"

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

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

## config/application.yml

NAVER_CLIENT_ID: "7PuKqO2BxrvjGHRjGENN"
NAVER_ClIENT_SECRET: "GM43jTOBLE"

위와 같습니다.

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

 

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

 

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

config.omniauth :naver, ENV["NAVER_CLIENT_ID"], ENV["NAVER_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 :naver, ENV["NAVER_CLIENT_ID"], ENV["NAVER_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 Naver'가 보이는게 확인이 됩니다.

 

 

'Sign in with Naver' 버튼을 누르면 계정 연동 안내가 보여지고,

 

무사히 로그인 된 것도 확인됩니다!

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

 

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

 

 

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

외부 로그인 링크에 대한 디자인 편집은  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 -%>

 

 

  •  참고  사용자 정보 수집 커스터마이징 하기

 Chapter 1  의 3번 과정에서 저는 수집정보를 체크할 때, 이메일, 성별, 프로필 사진필수적으로 선택되어야 한다고 말했습니다.

그 이유는 위 4개의 정보가 필수적으로 체크가 안되어 있으면

나중에 네이버 아이디 로그인 시 이런 오류를 일으키기 때문입니다.

 

혹시 만일, 정보수집을 최소화 하고 싶은분이 있다면 다음 과정을 따라주세요.

저는 Email만 수집 한다는 가정 하에 설명을 하겠습니다.

 

1. 터미널에 Gem 구성 파일들이 모여있는 폴더로 갑니다.

 참고  Gem 내부파일 찾아내는 법 [클릭]

 

2. Gem 파일들이 모여있는 폴더에서 다음 명령어를 입력합니다.

cd omniauth-naver-0.1.0/lib/omniauth/strategies

 

3. 해당 디렉토리 위치에는  naver.rb  라는 파일이 있습니다.

vi naver.rb

vi 명령어를 입력해서  naver.rb  를 열어주세요.

 

 

해당 오류메세지의 근원지는 여기였습니다.

 

여기서 리눅스의 지식이 살짝 필요합니다.

저는 앞서 말했다 싶이 Email만 수집을 한다는 조건이 있으니,

성별과 프로필 정보를 수집하는 20, 21번 째 줄의 내용을 삭제해줍니다.

 리눅스 도움말  

  • 이동 : 키보드 방향키
  • 커서가 위치한 줄 삭제 : dd

 

작업을 마치셨으면  Shift+: 키  를 누르고  wq  를 입력하고 엔터를 입력해서 나가줍니다.

이상입니다!

 

 

  •  참고  네이버 API 설정 안내

처음에 신규 API를 만들고, API 정보를 보면 개발 상태가 '개발중' 이라는 상태가 되어있습니다.

만약에 홈페이지 서비스가 출시가 된다면 '네아로 검수요청' 버튼을 통해 '서비스 적용' 상태로 활성화를 시켜주세요.

 

만약 '개발중' 인 상태로 API를 사용 시, 자신을 제외한 다른 유저들의 네이버 아이디 로그인 시 로그인 제한됩니다.

 

 

  • 자료 참고

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

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

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

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

 

루비온 레일즈 Ruby on Rails ROR

댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함