背景・概要

こんにちは！プロダクト開発部の山岡です。

今回新規のプロジェクトでAuth0の認証を利用したサービスを開発しております。その際にメインサービスとは別に運用チームが利用する、多機能ではありませんが管理側のサービスも必要となりました。

管理ツールのユーザー制御を検討し下記のように決定しました。

利用できるユーザーはGoogleグループで管理する

最初に候補に上がったのは Google Workspaceを直接利用したSAMLアプリケーションとして作成する方式です。

他のプロダクトでも利用されていたので、同じように利用しようと考えていました。

しかし今回はメインサービスでAuth0を利用していたので、合わせてAuth0からのGoogle WorkspaceのSAMLを利用することになりました。

構成図

Google Workspace側の設定

Google Workspace側では「ウェブアプリとモバイルアプリ」の作成を行います。

ACS:https://auth.xxxxxxxxx.dev.jmdc.co.jp/login/callback?connection=GoogleWorkspace

エンティティID:urn:auth0:xxxxxxxxx:GoogleWorkspace

※エンティティIDの入力は必須です

Auth0側の設定

Auth0にはデフォルトでGoogle WorkspaceをSAMLとして登録する項目がありますが、そちらで構築した場合、対象のGoogle Workspaceのユーザーが誰でもログインできるようになってしまったので、 SAMLの欄から設定しました。

React側の設定

import { Auth0Provider } from '@auth0/auth0-react'
import { startTransition, StrictMode } from 'react'
import { hydrateRoot } from 'react-dom/client'
import { HydratedRouter } from 'react-router/dom'

startTransition(() => {
  hydrateRoot(
    document,
    <Auth0Provider
      domain={import.meta.env.VITE_AUTH0_DOMAIN}
      clientId={import.meta.env.VITE_AUTH0_CLIENT_ID}
      authorizationParams={{
        redirect_uri: window.location.origin,
        audience: `${import.meta.env.VITE_AUTH_AUDIENCE}`,
        scope: 'openid profile email',
        response_type: 'token id_token',
      }}
      cacheLocation={'localstorage'}
    >
      <StrictMode>
        <HydratedRouter />
      </StrictMode>
    </Auth0Provider>,
  )
})