providers/workos
內建的 WorkOS 整合。
WorkOSProfile
繼承
Record<string,any>
屬性
connection_id
connection_id: string;connection_type
connection_type: string;email: string;first_name
first_name: string;id
id: string;idp_id
idp_id: string;last_name
last_name: string;object
object: string;organization_id
organization_id: string;raw_attributes
raw_attributes: {
email: string;
firstName: string;
id: string;
lastName: string;
picture: string;
};email: string;firstName
firstName: string;id
id: string;lastName
lastName: string;picture
picture: string;default()
default<P>(options): OAuthConfig<P>將 WorkOS 登入新增至您的頁面。
設定
回呼 URL
https://example.com/api/auth/callback/workos組態
import { Auth } from "@auth/core"
import WorkOS from "@auth/core/providers/workos"
const request = new Request(origin)
const response = await Auth(request, {
providers: [
WorkOS({
clientId: WORKOS_CLIENT_ID,
clientSecret: WORKOS_CLIENT_SECRET,
issuer: WORKOS_ISSUER,
}),
],
})資源
注意事項
預設情況下，Auth.js 假設 WorkOS 提供者基於 OAuth 2 規格。
WorkOS 本身不是身分提供者，而是一個連接多個單一登入 (SSO) 提供者的橋樑。因此，我們需要進行一些額外的變更，才能使用 WorkOS 驗證使用者身分。
為了使用 WorkOS 讓使用者登入，我們需要指定要使用的 WorkOS 連線。常見的做法是收集使用者的電子郵件地址並擷取網域。這可以使用自訂登入頁面來完成。若要新增自訂登入頁面，您可以使用 pages 選項
pages: {
signIn: "/auth/signin",
}然後，我們可以新增一個自訂登入頁面，其中顯示一個輸入欄位，讓使用者可以輸入他們的電子郵件地址。然後，我們從使用者的電子郵件地址中擷取網域，並將其傳遞給 signIn 函數的 authorizationParams 參數
pages/auth/signin.js
import { useState } from "react"
import { getProviders, signIn } from "next-auth/react"
export default function SignIn({ providers }) {
const [email, setEmail] = useState("")
return (
<>
{Object.values(providers).map((provider) => {
if (provider.id === "workos") {
return (
<div key={provider.id}>
<input
type="email"
value={email}
placeholder="Email"
onChange={(event) => setEmail(event.target.value)}
/>
<button
onClick={() =>
signIn(provider.id, undefined, {
domain: email.split("@")[1],
})
}
>
Sign in with SSO
</button>
</div>
)
}
return (
<div key={provider.id}>
<button onClick={() => signIn(provider.id)}>
Sign in with {provider.name}
</button>
</div>
)
})}
</>
)
}
export async function getServerSideProps(context) {
const providers = await getProviders()
return {
props: { providers },
}
}💡
WorkOS 提供者帶有 預設組態。若要覆寫您的使用案例的預設值，請查看自訂內建 OAuth 提供者。
類型參數
| 類型參數 |
|---|
P 擴充 WorkOSProfile |
參數
| 參數 | 類型 |
|---|---|
options | OAuthUserConfig<P> & { connection: string; } |
回傳
OAuthConfig<P>