Cloudflare 接入提供商

与 GCP IAP 代理提供商或 AWS ALB 提供商类似，开发人员可将身份验证支持卸载到 Cloudflare Access。

本教程展示了如何在 Cloudflare Access 上使用坐在 Backstage 前面的身份验证。

假设 Cloudflare 隧道已经在配置为从后端为前端应用程序提供服务的 Backstage 实例前提供流量，并且已经使用 Cloudflare Access 进行了控制。

配置

让我们先添加以下内容auth配置中的app-config.yaml或app-config.production.yaml或类似内容：

auth:
  providers:
    cfaccess:
      teamName: <Team Name>

您可以在 Cloudflare Zero Trust 面板中找到团队名称。

要加载提供程序，就必须设置好这部分配置。 现在让我们添加提供程序本身。

后端更改

添加一个providerFactories中的路由器条目。packages/backend/plugin/auth.ts.

packages/backend/plugin/auth.ts

import { providers } from '@backstage/plugin-auth-backend';

export default async function createPlugin(
  env: PluginEnvironment,
): Promise<Router> {
  return await createRouter({
    logger: env.logger,
    config: env.config,
    database: env.database,
    discovery: env.discovery,
    providerFactories: {
      'cfaccess': providers.cfAccess.create({
        // Replace the auth handler if you want to customize the returned user
        // profile info (can be left out; the default implementation is shown
        // below which only returns the email). You may want to amend this code
        // with something that loads additional user profile data out.
        async authHandler({ accessToken }) {
          return { profile: { email: accessToken.email } };
        },
        signIn: {
          // You need to supply an identity resolver, that takes the profile
          // and the access token and produces the Backstage token with the
          // relevant user info.
          async resolver({ profile, result }, ctx) {
            // Somehow compute the Backstage token claims. Just some sample code
            // shown here, but you may want to query your LDAP server, or
            // https://<teamName>.cloudflareaccess.com/cdn-cgi/access/get-identity
            // https://developers.cloudflare.com/cloudflare-one/identity/users/validating-json/#groups-within-a-jwt
            const id = profile.email.split('@')[0];
            const sub = stringifyEntityRef({ kind: 'User', name: id });
            const ent = [sub, stringifyEntityRef({ kind: 'Group', name: 'team-name' });
            return ctx.issueToken({ claims: { sub, ent } });
          },
        },
      }),
    },
  });
}

现在后端已经准备就绪，可以在/api/auth/cfaccess/refresh剩下的工作就是更新前端登录机制，以用户的名义通过 Cloudflare Access 轮询该端点。

将提供程序添加到 Backstage 前端

建议使用ProxiedSignInPage安装在packages/app/src/App.tsx像这样

packages/app/src/App.tsx

import { ProxiedSignInPage } from '@backstage/core-components';

const app = createApp({
  components: {
    SignInPage: props => <ProxiedSignInPage {...props} provider="cfaccess" />,
  },
  // ..
});

参见使用代理提供商登录了解如何设置登录页面，以便本地开发也能顺利进行。