iT邦幫忙

2024 iThome 鐵人賽

DAY 13
0

之前在 Nextjs 這邊能夠讀取到 Directus 中的資料是因為將資料權限設定成了 Public,如果資料非開放又要讓用戶需要登入之後才能取得資料的話,就要能夠在 Nextjs 中取得 Directus 的權限。

如此就需要設定讓 Directus 的 cookie 能夠被不同站點的 Nextjs 讀取到。

AUTH_KEYCLOAK_MODE="session" # AUTH_<provider>_MODE

SESSION_COOKIE_DOMAIN="localhost:8055" # Replace XXXX with the domain of your Directus instance. For example "directus.myserver.com"
SESSION_COOKIE_SECURE="true"
SESSION_COOKIE_SAME_SITE="None"

不過為了在 localhost 上能夠測試,得先設定的再寬鬆點

AUTH_KEYCLOAK_MODE="session" # AUTH_<provider>_MODE

# For production
# SESSION_COOKIE_DOMAIN="localhost:8055" # Replace XXXX with the domain of your Directus instance. For example "directus.myserver.com"
# SESSION_COOKIE_SECURE="true"
# SESSION_COOKIE_SAME_SITE="None"

#For testing Seamless SSO locally
SESSION_COOKIE_SECURE="false"
SESSION_COOKIE_SAME_SITE="lax"

這邊設定完先不急著重開容器,要先設定好使用者權限。

先登入 Directus 後台移除先前設定開放的資料權限,然後另外新增一個 Role。

https://res.cloudinary.com/dhcsjvhjg/image/upload/v1727446550/Screenshot_2024-09-27_at_10.14.12_PM_uzavsz.png

在 Role 當中設定一個新的 Policy,使之能夠讀取資料

https://res.cloudinary.com/dhcsjvhjg/image/upload/v1727446671/Screenshot_2024-09-27_at_10.17.35_PM_gcfqjc.png

儲存離開前可以先複製一下網址,主要是需要這個 Role 的 uuid。

然後新增一個容器設定:

AUTH_KEYCLOAK_DEFAULT_ROLE_ID="preferred_default_role_id" #AUTH_<provider>_DEFAULT_ROLE_ID

昨天登入後使用者沒有任何角色或權限,就是缺了這個設定,這樣設定後當有經由這個管道建立帳號的用戶就會預設配給這個 Role。

再來就重開容器,然後看是要試著重新從 Keycloak 登入一個新用戶,或是將之前的用戶配給上面新增的 Role。

再來 Nextjs 這邊就能設登入 Directus 取得權限了。

在進行登入前可以先確認看看,取得資料的 api 應該已經被擋了。

首先在 authenticationrest 模塊上都設定請求要帶上 cookie。

const client = createDirectus<Schema>("http://localhost:8055")
  .with(authentication("session", { credentials: "include" }))
  .with(rest({ credentials: "include" }));

登入 Directus 要跳轉到給 Directus 用的 Keycloak 登入畫面,注意設定好跳轉回來的網址redirect

<a href="http://localhost:8055/auth/login/keycloak?redirect=http://localhost:3000/post">
  Login
</a>

登入成功後要定期更新 token

await client.refresh()

這樣就能試著讀取資料了。

這樣Nextjs 本身有經由 NextAuth 使用 Keycloak 的登入,跟在 Directus 使用 Keycloak 的登入,要來想個辦法把兩邊縫在一塊爾。


上一篇
使用 Keycloak 登入 Directus - 續
下一篇
Directus 自訂選項
系列文
Awesome self hosted 30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言