초보자도 간단해!SNS 인증 구현(실제 구현 편)

개시하다
그럼, 드디어 이루어질 거야!이번에 우리는 단체로 제작한 벼룩시장 응용에서 실현할 것이다.
Gem 가져오기
옴니옥스의 취약성에 대응하기 위해 젬을 도입했습니다.
Gemfile

gem 'omniauth-facebook'
gem 'omniauth-google-oauth2'
gem "omniauth-rails_csrf_protection"

단말기

bundle install

Facebook과 Google에서 사용하는 API 키를 환경 변수로 설정합니다.
마지막으로 받은 API 측면 설정에 기록된 APPID 및 APPSECRET 준비, $vim~/bash_소개를 집행하고 다음과 같은 내용을 보충한다.API 키를 아직 얻지 못한 경우 SNS 인증 설치(Google 편) 또는 SNS 인증 구현(페이스북 편)을 참조하십시오!
~/.bash_profile

export FACEBOOK_CLIENT_ID='メモしたアプリID'
export FACEBOOK_CLIENT_SECRET='メモしたapp secret'
export GOOGLE_CLIENT_ID='メモしたクライアントID'
export GOOGLE_CLIENT_SECRET='メモしたクライアントシークレット'

$source~/(으)로 변경되었습니다.bash_요약을 수행합니다.
환경 변수를 설정한 후 프로그램에 읽을 기술을 추가합니다.
config/initializers/devise.rb

config.omniauth :facebook,ENV['FACEBOOK_CLIENT_ID'],ENV['FACEBOOK_CLIENT_SECRET']
config.omniauth :google_oauth2,ENV['GOOGLE_CLIENT_ID'],ENV['GOOGLE_CLIENT_SECRET']

SNS 인증에 필요한 모델, 컨트롤러 준비
이어 uid와 provider를 필두로 SNS 인증 시 정보를 저장하는 SnsCredential 모델을 제작한다.이 경우 User 모델과 연관시키기 위해 외부 키로 user아이디 있으래요.
단말기

$ rails g model sns_credential provider:string uid:string user:references
$ rails db:migrate

모델에 omniauth를 사용하는 옵션과 연결을 추가합니다.
다음 () 부분을 보완했습니다.
models/user.rb

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, （:validatable, :omniauthable, omniauth_providers: [:facebook, :google_oauth2]）

  has_one :parsonal_user, dependent: :delete
  （has_many :sns_credentials）

models/sns_credential.rb

class SnsCredential < ApplicationRecord
  # associations
  belongs_to :user, optional: true
end

다음은 맞춤형 devise 컨트롤러를 만드는 컨트롤러입니다.
단말기

$ rails g devise:controllers users

devise의 경로를 변경하는 것은 다음과 같습니다
변경된 곳은 () 에 있습니다.
단말기

 devise_for :users, （controllers: {
    omniauth_callbacks: 'users/omniauth_callbacks',
    registrations: 'users/registrations',）
    sessions: 'users/sessions'
    }

SNS 인증 실현 방법의 실현
우선 컨트롤러에 기본적인 동작을 기술한다.
controllers/users/omniauth_callbacks_controller.rb

class Users::OmniauthCallbacksController < Devise::OmniauthCallbacksController
  def facebook
    authorization
  end

  def google_oauth2
    authorization
  end

  def failure
    redirect_to root_path
  end

  private
  def authorization
    sns_info = User.from_omniauth(request.env['omniauth.auth'])
    @user = sns_info[:user]

    if @user.persisted?
      sign_in_and_redirect @user, event: :authentication # this will throw if @user is not activated
    else
      @sns_id = sns_info[:sns].id
      render 'devise/registrations/new'
    end
  end

다음, User.from_omniauty 방법을 만드는 내용입니다.
user.rb

  def self.from_omniauth(auth)
    sns = SnsCredential.where(provider: auth.provider, uid: auth.uid).first_or_create
    user = sns.user || User.where(email: auth.info.email,).first_or_initialize(
      nick_name: auth.info.name,
        email: auth.info.email
    )
    if user.persisted?
      sns.user = user
      sns.save
    end
    { user: user, sns: sns }
  end
end

마지막으로 햄 측에서 다음과 같은 내용을 보충 기술한다.
추기하는 곳은 ()에 있다.
views/devise/sessions/new.html.haml

.p-login-main
    .p-login-user
      .p-login-user__account
        %p アカウントをお持ちでない方はこちら
        = link_to signup_registration_path, class: "p-login-user__account--link" do
          新規会員登録
      .p-login-user__inner
        .p-login-user__inner--btn
          %button.facebook-login
            = fa_icon 'facebook-square'
            (= link_to 'Facebookでログイン', user_facebook_omniauth_authorize_path, method: :post)
          %button.google-login
            = fa_icon 'google'
            (= link_to 'Googleでログイン', user_google_oauth2_omniauth_authorize_path, method: :post)
<img width="1257" alt="スクリーンショット 2020-03-29 15.36.31.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591360/4bc12249-3308-0bb8-d1d3-33227bd345e4.png">
<img width="1264" alt="スクリーンショット 2020-03-29 15.41.54.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/591360/c15faa04-b595-9df9-a64e-ccc87b0a1cd8.png">

views/users/new.html.haml

ruby:views/users/new.html.haml

         .p-reg-btn__mail
            = fa_icon 'envelope'
            = link_to 'メールアドレスで登録する', signup_registration_path, class: 'p-reg-btn__link'
          .p-reg-btn__facebook
            = fa_icon 'facebook-square'
            = link_to 'Facebookで登録する', user_facebook_omniauth_authorize_path, class: 'p-reg-btn__link', method: :post
          .p-reg-btn__google
            = fa_icon 'google'
            = link_to 'Googleで登録する', user_google_oauth2_omniauth_authorize_path, class: 'p-reg-btn__link--color', method: :post

여기까지.
다음 방식으로 페이스북이나 구글에 로그인하면 이름과 메일 주소가 자동으로 들어갑니다.
이번에는 개인 프라이버시 관계로 땡땡이로 표현됐다.(웃음)


다음엔 여기서 조금 공을 들였어요.