iT邦幫忙

2023 iThome 鐵人賽

DAY 12
3
SideProject30

營養師不開菜單要用 Next.js 13 寫全端系列 第 12

營養師不開菜單的第十二天 - OAuth 權限申請:Facebook、Twitter、Google 及 Github

  • 分享至 

  • xImage
  •  

https://ithelp.ithome.com.tw/upload/images/20230926/20152073OdV5Q2fzr6.png

昨天介紹完 NextAuth.js 的基本設置,但我們還需要取得第三方驗證廠商的 ID 及金鑰,每個提供者的申請方式不同,有複雜也有簡單。在 NextAuth.js 的文件中支援數十種的第三方驗證,這個段落中,將詳細介紹四大常用驗證提供者:Google、GitHub、Facebook 和 Twitter (X) 的申請方式。希望透過截圖和文字說明,指導讀者完成整個申請流程。

Google

Google 的驗證方式主要在 Google Cloud Console 中先建立新的專案,在經過權限設定後即可取得權限:

1. 進入 Google Cloud Console 新增專案

  • Google Cloud Console 網址:https://cloud.google.com/cloud-console?hl=zh-tw

  • 點選左上角的【選取專案】,於彈跳視窗選擇右上角 【新增專案】

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073EOvc5A6qTt.png

2. 建立新專案

  • 可輸入專案名稱及位置,位置預設即為無機構
    https://ithelp.ithome.com.tw/upload/images/20230926/201520731TTHZk7lAI.png

  • 建立後選取該專案
    https://ithelp.ithome.com.tw/upload/images/20230926/20152073egXHpR58bw.png

3. 建立新專案的 API 權限設定

  • 進入專案頁面後,於上方搜尋欄中搜尋並點選【Enabled APIs & Services】

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073eR2kLXTTME.png

  • 點選 OAuth 同意畫面

    1. User Type 選擇 外部 ⇒ 建立
    2. OAuth 同意畫面:填寫應用程式資訊的應用程式名稱、使用者支援電子信箱以及開發人員聯絡資訊 ⇒ 儲存並繼續
    3. 範圍:點選『儲存』並繼續
    4. 測試使用者:點選『儲存』並繼續

    https://ithelp.ithome.com.tw/upload/images/20230926/2015207302dDbU0Ss0.png

  • 點選 憑證 ⇒ 建立憑證 ⇒ OAuth 用戶端 ID

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073LKRpJepJ4I.png

    1. 應用程式類型選擇『 網頁應用程式 』,名稱選擇 『 網路用戶端 1 』
    2. 已授權的重新導向 URI 為必填,開發階段填寫 http://localhost:3000/api/auth/callback/google
      等待 Production 階段再新增發布的 domain

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073E21zp1VuMF.png

  • 建立 OAuth 憑證後取得 用戶端編號 及 用戶端密鑰

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073qKR3Aen8NL.png

4. NextAuth 中完成 GoogleProvider 設定

import GoogleProvider from 'next-auth/providers/google'

export const authOptions = {
	providers: [
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID as string,
      clientSecret: process.env.GOOGLE_SECRET as string
    })
  ],
}

GitHub

GitHub 驗證方法相對單純非常多,只需要到個人頁面的開發者設定中填寫基本設定後即完成申請:

1. 至 Developer Setting 頁面,選擇 OAuth Apps 並新增

  • 點選連結:https://github.com/settings/apps

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073VxhNi47t0h.png

2. 填妥必填欄位

  • Application name、Homepage URL、Authorization callback URL

  • 開發階段 Homepage URL、Authorization callback URL 填 http://localhost:3000/http://127.0.0.1:3000/

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073bGEflgmuig.png

3. 建立後即可取得 ID 及金鑰

https://ithelp.ithome.com.tw/upload/images/20230926/20152073oRtaVjdslN.png

4. NextAuth 中完成 GithubProvider 設定

import GithubProvider from 'next-auth/providers/github'

export const authOptions = {
	providers: [
    GithubProvider({
      clientId: process.env.GITHUB_CLIENT_ID as string,
      clientSecret: process.env.GITHUB_SECRET as string
    })
  ],
}

Facebook

Facebook 的申請方法稍微複雜

1. 登入開發頁面後,進入應用程式

2. 進入平台開始設定

  • 點選建立應用程式

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073kCaPy1J3Pp.png

  • 選取 『 允許用戶使用 Facebook 帳號登入 』

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073a209U9wTkr.png

  • 填寫相關資料 - 應用程式名稱

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073I4IHfjZSEi.png

3. 建立後針對產品快速設定

  • 點選左側的【產品】選項,為產品【快速入門】設定

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073b5AmJDrTsk.png

  • 選擇應用程式的平台,這步驟選擇【網站】

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073xaTy15rwjE.png

  • 輸入應用程式的網址,由於目前是開發階段,可以先隨意輸入網址,等產品上線後再改為正式的網址。

    https://ithelp.ithome.com.tw/upload/images/20230926/201520739jEa4EhKVl.png

4. 進行應用程式審查

這步驟是為了設定應用程式可以存取的權限

  • 選擇右側的【使用案例】,進行驗證和帳號建立流程的編輯

    https://ithelp.ithome.com.tw/upload/images/20230926/201520734pPpP0uCld.png

  • 新增 email 的權限

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073TgFllqG8fL.png

5. 取得金鑰

回到【應用程式設定】的【基本資料】中,即可取得【應用程式編號】及【應用程式密鑰】。

本頁面還另有隱私權政策、服務條款、應用程式網域以及刪除資料提示,在開發環境中不需要設定,等到產品上線時並建立實際頁面後再回來設定。

https://ithelp.ithome.com.tw/upload/images/20230926/20152073l5HYt1Lo1z.png

6. NextAuth 中完成 FacebookProvider 設定

import FacebookProvider from 'next-auth/providers/facebook'

export const authOptions = {
	providers: [
    FacebookProvider({
      clientId: process.env.FACEBOOK_CLIENT_ID as string,
      clientSecret: process.env.FACEBOOK_SECRET as string
    })
  ],
}

Twitter (X)

推特目前也支援了 OAuth 2.0 的技術,只是設定比較特別,還需要額外動用到應用程式內的設定,一樣依據步驟執行:

1. 登入開發頁面後,進入管理平台

  • 平台網址:https://developer.twitter.com/en

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073G26ens3FJV.png

  • 選擇免費方案

    https://ithelp.ithome.com.tw/upload/images/20230926/201520733QwQUKdEUr.png

  • 輸入兩百五十字的使用 Twitter OAuth 原因 (可以請求 ChatGPT 生成一段文字)

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073aI3sZD1JhY.png

2. 設定專案名稱以及 redirect url

  • 到【Dashboard】頁面點選專案設定

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073Uc59Cpc0bz.png

  • 可以編輯應用程式的名稱或上傳網頁的 icon

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073OO9115wBgD.png

  • 點選驗證設定 【 User authentication settings 】

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073rVx455FBLN.png

  • 設定應用程式的 OAuth 1.0a 讀寫權限,以及啟用 OAuth 2.0 的應用程式類型

    https://ithelp.ithome.com.tw/upload/images/20230926/20152073S70eVf6fpX.png

  • 設定 callback URL、網站 URL、服務條款 URL、隱私權政策 URL

    • callback URL:在開發環境中以 http://127.0.0.1:3000/ 取代 localhost:3000 ,除此之外,在專案中的環境變數也要設定 NEXTAUTH_URLhttp://127.0.0.1:3000/

      NEXTAUTH_URL='http://127.0.0.1:3000'
      
    • 網站 URL、服務條款 URL 及隱私權政策 URL 可以暫時以假的 URL 設定,上線後再改為正式網址。

      https://ithelp.ithome.com.tw/upload/images/20230926/20152073mVIV6bl7tm.png

3. 回到 Keys and tokens 取得金鑰

https://ithelp.ithome.com.tw/upload/images/20230926/20152073DZuTBwSadb.png

4. NextAuth 中完成 TwitterProvider 設定

import TwitterProvider from 'next-auth/providers/twitter'

export const authOptions = {
	providers: [
    TwitterProvider({
      clientId: process.env.TWITTER_ID as string,
      clientSecret: process.env.TWITTER_SECRET as string
    })
  ],
}

結語

想不到光是四個 OAuth 設定就佔了這麼大的篇幅,最後想要特別提醒,專案中如果使用 Twitter 的 OAuth,會使得整個應用程式的開發環境 URL 改為 http://127.0.0.1:3000/ ,所以如果先前有在其他 OAuth 中設定 localhost:3000 為 callback URL 或 redirect URL 都要一併替換。希望經過今天的介紹,可以讓讀者在各家茫茫的設定平台中找到一絲曙光,也祝大家順利完成申請。

相關文章

營養師不開菜單的第十一天 - 為什麼要用 NextAuth 做身分驗證

參考資料

Not able to authenticate via NextAuth's Twitter provider using OAuth2.0
https://github.com/nextauthjs/next-auth/issues/5154#issuecomment-1408676458
Twitter OAuth 2 Authentication using NextAuth in Next.js
https://cocounicorns.com/twitter-authentication-nextauth-nextjs
Setup and Use NextAuth.js in Next.js 13 App Directory
https://codevoweb.com/setup-and-use-nextauth-in-nextjs-13-app-directory/

https://ithelp.ithome.com.tw/upload/images/20230926/20152073fOE4w7GCzr.png


上一篇
營養師不開菜單的第十一天 - NextAuth 開箱即用的身分驗證套件
下一篇
營養師不開菜單的第十三天 - 不需要 React Provider 管理狀態的 Zustand
系列文
營養師不開菜單要用 Next.js 13 寫全端30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 則留言

1
mikehsu0618
iT邦新手 1 級 ‧ 2023-09-27 09:50:19

乾貨

DL iT邦新手 5 級 ‧ 2023-10-29 03:29:04 檢舉

真的乾貨

1
DL
iT邦新手 5 級 ‧ 2023-10-29 03:29:36

來參拜

ysl0628 iT邦新手 3 級 ‧ 2023-10-29 14:31:13 檢舉

感謝~

我要留言

立即登入留言