Backstage集成Okta认证报错：Unknown auth provider 'okta'

问题描述 #

配置Backstage的Okta认证后，点击登录链接出现错误："Unknown auth provider 'okta' at <anonymous>"，相关配置代码如下：

app-config.yaml #

auth:
  # see https://backstage.io/docs/auth/ to learn about auth providers
  providers:
    # See https://backstage.io/docs/auth/guest/provider
    guest: {}
    okta:
      development:
        clientId: [REDACTED]
        clientSecret: [REDACTED]
        audience: https://[REDACTED].okta.com

packages/app/src/App.tsx #

import {
  AlertDisplay,
  OAuthRequestDialog,
  SignInPage,
} from '@backstage/core-components';
import { oktaAuthApiRef } from '@backstage/core-plugin-api';

//...

const app = createApp({
  //...
  components: {
    SignInPage: props => (
      <SignInPage
        {...props}
        auto
        providers={[
          'guest',
          {
            id: 'okta-auth-provider',
            title: 'Okta',
            message: 'Sign in with Okta',
            apiRef: oktaAuthApiRef
          }
        ]}
      />
    )
  },
});

解决方案 #

1. 安装Okta后端认证模块 #

Backstage的Okta认证需要对应的后端支持包，执行以下命令安装：

yarn add --cwd packages/backend @backstage/plugin-auth-backend-module-okta-provider

2. 注册Okta认证提供者到后端Auth插件 #

编辑packages/backend/src/plugins/auth.ts，添加Okta provider的注册代码：

import { createOktaProvider } from '@backstage/plugin-auth-backend-module-okta-provider';

export default async function createPlugin(
  env: PluginEnvironment,
): Promise<Router> {
  const builder = await createRouterBuilder({
    logger: env.logger,
    config: env.config,
    database: env.database,
    discovery: env.discovery,
    tokenManager: env.tokenManager,
  });

  // 注册Okta提供者
  builder.addProvider(createOktaProvider({
    authHandler: async ({ profile }) => {
      return {
        profile: {
          email: profile.email,
          displayName: profile.displayName,
          picture: profile.picture,
        },
      };
    },
  }));

  // 保留已有的guest提供者
  builder.addGuestProvider();

  return await builder.build();
}

3. 修正前端认证提供者ID #

前端SignInPage中配置的provider id必须和后端配置的provider key（即app-config.yaml中的okta）一致，修改App.tsx中的id为okta：

providers={[
  'guest',
  {
    id: 'okta', // 改为与后端配置匹配的key值
    title: 'Okta',
    message: 'Sign in with Okta',
    apiRef: oktaAuthApiRef
  }
]}

4. 检查Okta audience配置 #

Okta的audience需指向你的授权服务器地址，默认授权服务器格式为https://[REDACTED].okta.com/oauth2/default，确认app-config.yaml中的audience是否正确：

okta:
  development:
    # ...其他配置
    audience: https://[REDACTED].okta.com/oauth2/default

完成以上步骤后，重启Backstage后端和前端服务，重新尝试Okta登录即可。

内容的提问来源于stack exchange，提问作者amacrobert