Rails 套件操作，Devise（google 第三方登入（上）)

相信很多人主要是希望可以透過 devise 來幫忙串接第三方登入，這部分剛好在我們製作專案的時候有順利完成 google 的部分就拿出來分享給大家。

主要步驟

1. 申請 google api 金鑰
2. 專案中 devise 設定檔設定金鑰
3. 裝上 omniauth 套件配合串接 devise
4. 設定 routes
5. 設定 callback controller
6. 設定 model

這篇先針對前面三點進行說明。

申請 google oauth 金鑰

先到 google cloud 去申請 oauth 金鑰
https://console.cloud.google.com/

點選 oauth 用戶端 id 進入申請頁面

填寫的部分：

• 應用程式類型選“網頁應用程式”
• 名稱就自己決定
• 已授權的 javascript 來源
  先填上 localhost 的位置 (http://127.0.0.1:3000) or (http://localhost:3000)，方便你本機可以進行測試，建議上面兩種都填寫，防止你開 server 連到沒加入金鑰的那個位置，之後上線後記得也補上正式上線的網域。
• 已授權的重新導向 url
  這邊需要填上 網域/users/auth/google_oauth2/callback，是當使用者從 google 授權完成後回到的地方。

送出後會拿到金鑰 id 跟 secret
相關填寫可以參考下面這張圖，是申請完成後點入項目看到的畫面，紅色及藍色得匡線部分，紫色匡線內是金鑰，要拿去專案內設定使用。

devise 設定金鑰

devise.rb 檔案進行金鑰設定

建議配合套件 dotenv，把上面這些重要金鑰轉成環境變數存起來，並且記得 .gitignore 要把 .env 檔案加入避免上版本控制

加入下面的設定，後面 ENV[“OAUTH_GOOGLE_ID”], ENV[“OAUTH_GOOGLE_SECRET”] 是我的金鑰用戶端編號跟密碼

config.omniauth :google_oauth2, ENV["OAUTH_GOOGLE_ID"], ENV["OAUTH_GOOGLE_SECRET"]

裝上 omniauth 相關套件

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

gem 'omniauth-google-oauth2'
gem 'omniauth-rails_csrf_protection'

下一篇再繼續補上後面步驟的說明。

---

參考資料：

1. YarpslavShmarov 教學影片
2. omniauth-google-oauth2
3. Rails 實作第三方登入-Google