概要

Backstageに認証機能を導入します。

Backstageでは様々な認証方法を提供していますが、今回はGitHubを使った認証を実装します。

環境

backstage v1.21.1

認証

GitHub Authentication Provider | Backstage Software Catalog and Developer Platform

に沿って導入します。

GitHub Appの作成

GitHub認証を導入するためにGitHub Appを作成します。

GitHubが会社のOrgに所属していたらログインできる認可機構を設定したい
Software CatalogのUserやGroupにGitHubのMembersを利用したい

といったケースであれば、個人でなくOrganizationで作成してください。

Register new GitHub App & Identifying and authorizing users

次のパラメータで設定します。

パラメータ	説明	設定値例
GitHub App name	アプリ名。グローバル(GitHub全体)でユニークである必要があります	xxx-backstage
Homepage URL	GitHub Appを使うWebサイトのURL	`http://localhost:3000`
Callback URL	ユーザーがインストールを承認した後にリダイレクトするURL	`http://localhost:7007/api/auth/github/handler/frame`
Expire user authorization tokens	refresh_tokenを提供してアクセストークンの有効期限が切れたときにアクセストークンを更新する	チェックする
Request user authorization (OAuth) during installation	アプリのインストール中に、インストールするユーザーが自分のIDへのアクセスを許可するよう要求する	チェックする

Post installation & Webhook

Webhookは使わないのでOFFにします。

Permissions

認証部分はIdentityさえ分かれば良いので追加で権限は不要です。

後日紹介する認可部分や、それ以外でGitHubのAPIを叩く際に必要になってきます。

インストール対象の選択

個人のGitHub AppとOrgのGitHub Appで若干UIが異なりますが、Backstageではどちらも以下のように設定してください。

作成後

app-config.yamlのauth.provider設定で必要となるので、Client ID、Client secretsはコピーしておいてください。

auth:
  environment: development
  providers:
    github:
      development:
        clientId: ${AUTH_GITHUB_CLIENT_ID}
        clientSecret: ${AUTH_GITHUB_CLIENT_SECRET}

実装

packages/app/src/App.tsxを修正します。

import { githubAuthApiRef } from '@backstage/core-plugin-api';
import { SignInPage } from '@backstage/core-components';

をimportし、createAppに次の行を追加します。

 const app = createApp({
   apis,
+  components: {
+    SignInPage: props => (
+      <SignInPage
+        {...props}
+        auto
+        provider={{
+          id: 'github-auth-provider',
+          title: 'GitHub',
+          message: 'Sign in using GitHub',
+          apiRef: githubAuthApiRef,
+        }}
+      />
+    ),
+  },
   bindRoutes({ bind }) {

すると最初のページが次のようになります。

動作確認

app-config.yamlもしくはapp-config.local.yamlに

auth:
  environment: development
  providers:
    github:
      development:
        clientId: ${AUTH_GITHUB_CLIENT_ID}
        clientSecret: ${AUTH_GITHUB_CLIENT_SECRET}