Google 로그인 레일 7 튜토리얼

10982 단어 railsrubygooglewebdev
이 튜토리얼에서는 devise gem 의 omniauth를 사용하여 Rails 7에서 Google 로그인을 구현합니다.

Take note, in this tutorial I'll be using login-demo as code base which is tackled in this tutorial.
It's best to look at it before proceeding on this one.



Rails 앱에 devise 로그인을 구현했다고 가정합니다.

  • 이 보석을 추가하십시오.

    gem "omniauth-google-oauth2"
    
    gem "omniauth-rails_csrf_protection"
    


  • 이것을 당신의 고안 모델에 추가하십시오(내 것은 User입니다).

    # models/user.rb
    :omniauthable, omniauth_providers: [:google_oauth2]
    

    이렇게 하면 devise의 omniauth 기능이 rails 앱에 추가됩니다.

  • 고안 테이블에 필드를 추가합니다.

     class AddFieldsToUser < ActiveRecord::Migration[7.0]
         def change
           change_table :users, bulk: true do |t|
            t.string  :provider
            t.string :uid
           end
         end
     end
    
    rails db:migrate를 실행하여 이러한 필드를 users 테이블에 추가합니다.

    나는 uid와 공급자를 저장할 것입니다(이 값은 google_oauth2임). 사용 중인 공급자에 따라 변경될 수 있습니다.

  • 생성omniauth_callbacks_controller.rb .

    # app/controllers/users/omniauth_callbacks_controller.rb
    class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
       def google_oauth2
         user = User.from_google(from_google_params)
    
         if user.present?
           sign_out_all_scopes
           flash[:notice] = t 'devise.omniauth_callbacks.success', kind: 'Google'
           sign_in_and_redirect user, event: :authentication
         else
           flash[:alert] = t 'devise.omniauth_callbacks.failure', kind: 'Google', reason: "#{auth.info.email} is not authorized."
           redirect_to new_user_session_path
         end
        end
    
        def from_google_params
          @from_google_params ||= {
            uid: auth.uid,
            email: auth.info.email
          }
        end
    
        def auth
          @auth ||= request.env['omniauth.auth']
        end
    end
    


  • 이것을 경로에 추가하십시오.

    # config/routes.rb
    Rails.application.routes.draw do
        devise_for :user,
          controllers: {
             omniauth_callbacks: 'users/omniauth_callbacks'
          }
    
        # ------
        # Other routes
        # ------
    end
    


  • Google Oauth



    이 부분에서는 상황이 약간 복잡해집니다.

    여기에서 우리는 Google 클라이언트 ID, 클라이언트 암호를 가져오고 OAuth를 활성화하도록 Google 콘솔을 구성하여 Rails 앱이 Google을 사용하여 로그인할 수 있도록 합니다.

    https://console.cloud.google.com으로 이동합니다. 그런 다음 프로젝트를 선택하지만 만들지 않은 경우 프로젝트를 선택합니다.



    새로 만든 프로젝트의 이름을 Login Demo 로 지정했습니다.


    APIs & Services > Oauth consent screen로 이동



    사용자 유형을 선택하십시오External. 다음은 양식에 필요한 입력 값을 채우는 것입니다.



    양식 하단의 Save and Continue를 클릭합니다.

    다음은 APIs & Services > Credentials 로 이동합니다. 상단에서 CREATE CREDENTIALS를 클릭하고 OAuth client ID를 선택합니다.



    애플리케이션 유형으로 Web application를 선택합니다.



    경로를 확인하고 Google의 콜백 URL을 찾으십시오.



    그런 다음 콜백 URL을 Authorized redirect URIs에 추가합니다.



    그런 다음 Create 을 클릭합니다. 생성 후 클라이언트 ID와 클라이언트 시크릿을 보여주는 팝업이 있어야 합니다. 나중에 사용할 수 있도록 저장하십시오.

    이제 클라이언트 ID와 클라이언트 시크릿이 있으므로 Rails 앱에서 Google 로그인 구성을 시작할 것입니다.

    Google 로그인 구현



  • .env에 클라이언트 ID 및 클라이언트 비밀 추가

    # .env
    GOOGLE_OAUTH_CLIENT_ID=''
    GOOGLE_OAUTH_CLIENT_SECRET=''
    


  • devise.rb 구성

    # config/initializers/devise.rb
    
    config.omniauth :google_oauth2, ENV['GOOGLE_OAUTH_CLIENT_ID'], ENV['GOOGLE_OAUTH_CLIENT_SECRET']
    


  • 이제 Google 로그인 버튼을 추가하십시오.

    // app/views/shared/_user_details.html.erb
    <%= button_to  'Login with Google', user_google_oauth2_omniauth_authorize_path, method: :post, :data => {turbo: "false"} %>
    

    Google로 로그인하기 위해 생성된 링크가 Rails 7에서 제대로 작동하지 않을 수 있으므로 맞춤형 링크를 만들어야 합니다.

  • 축하합니다! 🎉 이제 Rails 7 앱에 Google 로그인을 구현했습니다.

    여기에서 저장소를 확인할 수 있습니다: github.com/jkevinbaluyot/login-demo/tree/om..

    참조:


  • https://www.reddit.com/r/rails/comments/twjznq/help_with_omniauth_and_devise_rails_7/

  • https://medium.com/@adamlangsner/google-oauth-rails-5-using-devise-and-omniauth-1b7fa5f72c8e
  • 좋은 웹페이지 즐겨찾기