【Rails】 SNS 인증 등록 절차 (Twitter, Facebook, google)

devise를 이용한, Twitter, Facebook, google에서의 로그인 인증을 목적으로 한, 계정 등록~Key 취득까지의 비망록입니다.

Google API 등록

Google Cloud Platform에 로그인하여 프로젝트를 만듭니다.

이번에는 '사용자 인증'뿐이므로 사용하지 않는 API는 무효화합니다 (최소한의 Google+ API 만 유효).

OAuth 동의 화면에서 설정한 후 자격 증명을 클릭합니다(OAuth 동의하지 않으면 자격 증명을 추가할 수 없습니다. 동의 화면에 앱 이름을 입력하고 저장). · 응용 프로그램 유형 : 웹 응용 프로그램, 앱 이름을 입력하고 승인 된 리디렉션 URI (콜백 URI)를 설정합니다. (예: 로컬의 경우) http://localhost:3000/users/auth/google_oauth2/callback
http://localhost:3000/users/auth/google/callback
・Key와 Secret가 자동 생성되므로, 메모 계속.
Facebook API 등록 Facebook 개발자 로 로그인하여 앱을 만들면 내 앱(Key 및 Secret)이 자동 생성됩니다.

로컬이라면 http://localhost:3000 에서 ok.
대시보드로 이동합니다. App ID와 SECRET을 메모하고 싶다. 콜백용 URI를 추가. 로컬이라면 https://localhost:3000/users/auth/facebook/callback.
Twitter API 등록 계정 작성 → API 등록 신청 → 확인 메일 → 작성하는 앱에 관한 설정 API 등록 신청 Twitter Developer 계정 만들기 Twitter Developer에 로그인.

휴대 전화 번호를 입력하고 다음. 인증 코드를 입력.

내용을 확인하고 Looks Good! 그런 다음 이용 약관에 동의를 확인하고 Submit Application을 클릭하십시오. 완료 화면이 표시되고 메일이 도착하므로 Confirm your email 을 클릭하여 완료. Twitter API_KEY, API_SECRET 획득 개발자 계정 にアクセスし、アプリ이름을 입력합니다(유일성). 작성된 API_KEY와 API_SECRET을 복사합니다.
콜백 url 설정. ・ permission： read only · Request email addresses from users에 체크 · Enable Sign in with Twitter(Twitter인증 사용) : ON · 웹 사이트 URL (자신의 웹 서비스 URL) · callback urls (Twitter 인증 후 전환 URL) : 로컬 / 프로덕션 환경 등 여러 설정이 가능. (예) http://localhost:3000/users/auth/twitter/callback (라우팅 확인)
http://localhost:3000/users/omniauth_callbacks (콜백 컨트롤러의 URL, 인증 후 전환)
· privacy policy, terms of service도 무엇이든 좋기 때문에 묻는다.

앱 측 설정: gem 및 테이블 준비

Gemfile

gem 'omniauth-facebook'                  # Facebook認証
gem 'omniauth-twitter'                   # Twitter認証
gem 'omniauth-google-oauth2'             # Google認証
gem 'omniauth-github'                    # GitHub認証
gem 'dotenv-rails'                       # 環境変数の管理
# gem 'omniauth-rails_csrf_protection'   # 脆弱性の対策用。。入れたら認証エラー！になったので、アンインストール。

# ターミナルでインストール
% bundle install --path vendor/bundle

■ 등록 버튼을 클릭 → 사용자 등록 완료하는 사양의 경우

必要なカラム(provider、uidカラム)をuserテーブルに追加。

ターミナル

% rails g migration AddOmniauthToUsers provider:string uid:string
% rails db:migrate

Userモデルomniauthのためのオプションを追加

devise :database_authenticatable, :registerable,
       :recoverable, :rememberable, :validatable, :omniauthable, omniauth_providers: [:twitter, :facebook, :google_oauth2]

■ 등록 버튼을 클릭 → SMS 인증 → 이름, 이메일 주소 자동 입력 + PW 입력란이 숨겨짐(입력 생략) → 그 이외의 정보를 입력하여 사용자 등록 완료의 경우

SNS認証とユーザー登録のタイミングが異なる仕様の場合、SNS認証時は、Usersテーブルのレコードを作成しないので、別テーブル管理が良い。
SNS認証時の情報保存用にSnsモデルを作成(uid、providerカラム)。Userモデルとアソシエーションで、外部キーとしてuser_idを追加。

ターミナル

% rails g model sns provider:string uid:string user:references
% rails db:migrate

userモデルにomniauthのためのオプション、アソシエーションを追加

devise :database_authenticatable, :registerable,
       :recoverable, :rememberable, :validatable, :omniauthable, omniauth_providers: [:twitter, :facebook, :google_oauth2]

has_many :sns

snsモデルにも、アソシエーション

belongs_to :user, optional: true    # 外部キー(user_id)のnilを許可
# 初めて、SNS認証でユーザー登録する時は、まだuser_idは存在しないため、ユーザー情報が見つからないと言われる(エラー)

공개하지 않는 정보를 푸시하지 않도록 설정

API_KEYとAPI_SECRET を環境変数にする（gem(dotenv-rails)）。
.env ファイルを「Gemfile」と同じ階層に手動で作成し、 .gitignore に追加する。

.gitignore

/.env

.env ファイルに、上でメモったKeyを環境変数に設定。

.env

TWITTER_API_KEY = 'API key を記述'
TWITTER_API_SECRET = 'API secret key を記述'

FACEBOOK_KEY = 'API key を記述'
FACEBOOK_SECRET = 'API secret key を記述'

GOOGLE_CLIENT_ID = 'API key を記述'
GOOGLE_CLIENT_SECRET = 'API secret key を記述'

※ $ vim ~/.bash_profile で設定してもok(変更後に、 $ source ~/.bash_profile を実行を忘れずに )！！
※ export : 環境変数設定のコマンド
※ .bash_profile : ログイン時に読まれる設定ファイル。

~/.bash_profile

# i (挿入モード)で編集
# = の前後に空白を入れるとエラーになるので注意!!
export TWITTER_CLIENT_ID='API key を記述'
export TWITTER_CLIENT_SECRET='API secret key を記述'

export FACEBOOK_CLIENT_ID='API key を記述'
export FACEBOOK_CLIENT_SECRET='API secret key を記述'

export GOOGLE_CLIENT_ID='API key を記述'
export GOOGLE_CLIENT_SECRET='API secret key を記述'
# escキーで編集終了し、:wq (保存して終了)。

環境変数を使って、omniauth用を設定。

config/initializers/devise.rb

  config.omniauth :facebook, ENV['FACEBOOK_KEY'], ENV['FACEBOOK_SECRET']
  config.omniauth :twitter, ENV['TWITTER_API_KEY'], ENV['TWITTER_API_SECRET']
  config.omniauth :google_oauth2, ENV['GOOGLE_CLIENT_ID'], ENV['GOOGLE_CLIENT_SECRET']

라우팅 설정

今回は、deviseが提供するアクションの内容をカスタマイズしたいので、deviseクラスを継承するコントローラーが生成し、アクションをオーバーライドする(controllers/usersにdeviseクラスを継承)。そのため、ルーティング変更。
- SNS認証でのユーザー登録時だけ、PW入力を不要にしたい。

routes.rb

devise_for :users, controllers: {
  omniauth_callbacks: 'users/omniauth_callbacks',
  registrations: 'users/registrations'
}
# rails routes で確認(omniauth_callbackコントローラーを介し、APIにリクエストを送る)。

ここで、環境変数を設定できてるか確認しとく。

ターミナル

% rails c
irb(main):001:0> ENV['FACEBOOK_KEY']  => "1111111111111"
irb(main):002:0> ENV['FACEBOOK_SECRET']  => "1a1a1a1a1a1a1"

irb(main):001:0> ENV['TWITTER_API_KEY']  => "1111111111111"
irb(main):002:0> ENV['TWITTER_API_SECRET']  => "1a1a1a1a1a1a1"

irb(main):003:0> ENV['GOOGLE_CLIENT_ID']  => "~~~~~~googleusercontent.com"  # 末尾を確認
irb(main):004:0> ENV['GOOGLE_CLIENT_SECRET']  => "1a1a1a1aa1_1a1a1_1a"

後は、モデルとコントローラーでメソッドを記述し、呼び出せるようにする。

Reference

이 문제에 관하여(【Rails】 SNS 인증 등록 절차 (Twitter, Facebook, google)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/manbolila/items/8caa1f5d2b1fb96d2646

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

【Rails】 SNS 인증 등록 절차 (Twitter, Facebook, google)

Google API 등록

앱 측 설정: gem 및 테이블 준비

■ 등록 버튼을 클릭 → 사용자 등록 완료하는 사양의 경우

■ 등록 버튼을 클릭 → SMS 인증 → 이름, 이메일 주소 자동 입력 + PW 입력란이 숨겨짐(입력 생략) → 그 이외의 정보를 입력하여 사용자 등록 완료의 경우

공개하지 않는 정보를 푸시하지 않도록 설정

라우팅 설정

Reference

좋은 웹페이지 즐겨찾기