奥克塔战略

Okta策略用于验证用户对一个okta账户的认证. 它扩展了OAuth2战略.

先决条件

创建 Okta 网络应用程序

继续前进 okta 文档 创建 Okta 网络应用程序并获取客户端身份、客户端秘密和发行者

如何使用

创建策略实例

// app/utils/auth.server.ts
import { Authenticator } from "remix-auth";
import { OktaStrategy } from "remix-auth-okta";
import type { OktaProfile } from "remix-auth-okta";

type User = {
  id: string;
  profile: OktaProfile;
}

// Create an instance of the authenticator, pass a generic with what your
// strategies will return and will be stored in the session
export const authenticator = new Authenticator<User>(sessionStorage);

let oktaStrategy = new OktaStrategy<User>(
  {
    // example of issuer: https://dev-1234.okta.com/oauth2/default
    issuer: "YOUR_OKTA_ISSUER", 
    clientId: "YOUR_OKTA_CLIENT_ID",
    clientSecret: "YOUR_OKTA_CLIENT_SECRET",
    redirectURI: "https://your-app-domain.com/auth/okta/callback",
  },
  async ({ tokens }) => {
    const { id_token, access_token } = tokens.data as { id_token: string; access_token: string };
    const idClaims = jwt.decode(id_token) as OktaIdTokenClaims;
    // check idClaims.exp
    const profile = await OktaStrategy.userProfile(access_token);

    // Get/verify the user data
    return User.findOrCreate({ email: profile.email });
  }
);

authenticator.use(oktaStrategy);

设置路线

// app/routes/login.tsx
export default function Login() {
  return (
    <Form action="/auth/okta" method="post">
      <button>Login with Okta</button>
    </Form>
  );
}

// app/routes/auth/okta.tsx
import type { ActionFunction, LoaderFunction } from "remix";

import { authenticator } from "~/utils/auth.server";

export let loader: LoaderFunction = () => redirect("/login");

export let action: ActionFunction = ({ request }) => {
  return authenticator.authenticate("okta", request);
};

// app/routes/auth/okta/callback.tsx
import type { ActionFunction, LoaderFunction } from "remix";

import { authenticator } from "~/utils/auth.server";

export let loader: LoaderFunction = ({ request }) => {
  const user = await authenticator.authenticate('okta', request);
  if (!user) {
    throw redirect('/login');
  }

  const session = await sessionStorage.getSession(request.headers.get('Cookie'));
  session.set('user', user);

  return redirect('/success', {
    headers: { 'Set-Cookie': await sessionStorage.commitSession(session) },
  });
};

伪造

这个策略最初来自 jrakotoharisoa/ remix-auth-okta (英语) 但后来修改为使用 remix-auth@4.* 财务报告和审定财务报表 修剪回放基于窗体的登录符 .

• 麻省理工学院许可证原件
• 准备了 242a1f3 (韩语)