【LWC】LWRサイトでログイン・ログアウトを切り替える認証ボタンの実装【Experience Cloud】

今回は、Experience Cloudの LWR (Lightning Web Runtime) サイトにおける「サイトのデザインに完全に溶け込むログイン・ログアウトのボタン」の作成方法について解説します。 Auraサイトでは標準コンポーネントで容易に実装できた機能ですが、LWRサイト、特に「Build Your Own」テンプレートを使用する場合、独自の要件に合わせて自作する必要が出てくることがあります。

ログアウトボタンについては、公式ドキュメント「Create a Logout Link Component」を参考に、より実用的で汎用性の高いコードに落とし込んで紹介します。

DXforce Point for Developers

今回の記事で作成したコンポーネントの全ソースコードをGitHubで公開しています。ぜひ Clone して、あなたの組織で動かしてみてください。

GitHub - dxforce-site/loginAndLogoutButton

Contribute to dxforce-site/loginAndLogoutButton development by creating an account on GitHub.

なぜログイン・ログアウトコンポーネントが必要なのか？
実装のポイント
ソースコード
ログアウト後の遷移先設定
まとめ
参考URL

なぜログイン・ログアウトコンポーネントが必要なのか？

LWRサイトはパフォーマンスと柔軟性に優れていますが、一部の標準機能がAuraサイトとは異なる動作をします。特定のデザイン要件や、ヘッダー内の特定の位置にログアウトボタンを配置したい場合、LWC（Lightning Web Component）でカスタムコンポーネントを作成するのがベストプラクティスです。

実装のポイント

実装にあたっての重要なポイントは以下の2点です。

ゲストユーザーの判定: ログインしているユーザーにのみ「ログアウト」ボタンを表示する。ログインしていない場合は「ログイン」ボタンを表示する。
ログアウトURLの構築: サイトのベースパス（basePath）を動的に取得し、正しいログアウトURL（/secur/logout.jsp）へリダイレクトする。
ログインURLの生成: ログアウト同様、basePath を活用して環境に依存しないログインURL（通常は /login）を生成します。
デザインの統一: ログインボタンもログアウトボタン同様、サイトのテーマカラー（CSS変数）が適用されるようにします。

LWRサイトには、サイトのブランディング設定に応じて自動的に値が変わるCSS変数（例: --dxp-g-root-contrast）が用意されています。これを利用することで、「背景が暗いときは白く、明るいときは黒く」といった色の調整を自動で行うボタンが作成できます。

標準の lightning-icon-button は便利ですが、LWRサイトの「テーマ」設定（背景色や文字色）を完璧に反映させるには、独自のCSSとSVGを組み合わせた実装が効果的です。今回は、Experience CloudのDesign Tokens（CSS変数）を活用した、より高度な実装例をご紹介します。

ソースコード

それでは、実際のコードを見ていきましょう。

HTML (logoutButton.html)

isGuest プロパティを使用して、認証済みユーザー（ゲストではないユーザー）にのみリンクを表示します。

標準コンポーネントの代わりに、<button> タグと <svg> タグを使用します。これにより、アイコンの色やサイズ、ホバー時の挙動をCSSで完全にコントロールできるようになります。

<template>
    <template if:false={isGuest}>
        <div class="slds-p-around_x-small right-align">
            <button class="slds-button slds-button_icon slds-button_icon-border-filled auth-button"
                title="ログアウト"
                onclick={handleLogout}>
                <svg class="slds-button__icon slds-align_absolute-center custom-icon" aria-hidden="true" viewBox="0 0 640 640">
                    <path d="M224 160C241.7 160 256 145.7 256 128C256 110.3 241.7 96 224 96L160 96C107 96 64 139 64 192L64 448C64 501 107 544 160 544L224 544C241.7 544 256 529.7 256 512C256 494.3 241.7 480 224 480L160 480C142.3 480 128 465.7 128 448L128 192C128 174.3 142.3 160 160 160L224 160zM566.6 342.6C579.1 330.1 579.1 309.8 566.6 297.3L438.6 169.3C426.1 156.8 405.8 156.8 393.3 169.3C380.8 181.8 380.8 202.1 393.3 214.6L466.7 288L256 288C238.3 288 224 302.3 224 320C224 337.7 238.3 352 256 352L466.7 352L393.3 425.4C380.8 437.9 380.8 458.2 393.3 470.7C405.8 483.2 426.1 483.2 438.6 470.7L566.6 342.7z" fill="currentColor"></path>
                </svg>
                <span class="slds-assistive-text">ログアウト</span>
            </button>
        </div>
    </template>
    <template if:true={isGuest}>
        <div class="slds-p-around_x-small right-align">
            <button class="slds-button slds-button_icon slds-button_icon-border-filled auth-button"
                title="ログイン"
                onclick={handleLogin}>
                <svg class="slds-button__icon slds-align_absolute-center custom-icon" aria-hidden="true" viewBox="0 0 640 640">
                    <path d="M416 160L480 160C497.7 160 512 174.3 512 192L512 448C512 465.7 497.7 480 480 480L416 480C398.3 480 384 494.3 384 512C384 529.7 398.3 544 416 544L480 544C533 544 576 501 576 448L576 192C576 139 533 96 480 96L416 96C398.3 96 384 110.3 384 128C384 145.7 398.3 160 416 160zM406.6 342.6C419.1 330.1 419.1 309.8 406.6 297.3L278.6 169.3C266.1 156.8 245.8 156.8 233.3 169.3C220.8 181.8 220.8 202.1 233.3 214.6L306.7 288L96 288C78.3 288 64 302.3 64 320C64 337.7 78.3 352 96 352L306.7 352L233.3 425.4C220.8 437.9 220.8 458.2 233.3 470.7C245.8 483.2 266.1 483.2 278.6 470.7L406.6 342.7z" fill="currentColor"></path>
                </svg>
                <span class="slds-assistive-text">ログイン</span>
            </button>
        </div>
    </template>
</template>

CSS (logoutButton.css)

ここが今回の肝です。var(--dxp-g-root-contrast) を使用することで、サイトの基本テキスト色（背景色に対する対比色）を動的に取得しています。

.right-align {
    display: flex;
    justify-content: flex-end;
}

.auth-button {
    color: var(--dxp-g-root-contrast);
    border-color: var(--dxp-g-root-contrast);
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.auth-button:hover {
    background-color: color-mix(in srgb, var(--dxp-g-root-contrast) 20%, transparent);
}

.custom-icon {
    width: 1.2rem;
    height: 1.2rem;
    fill: var(--dxp-g-root-contrast);
}

この実装のメリット

テーマカラーへの自動追従: Experience Builderでサイトの「テーマ」>「色」を変更すると、このボタンの色（線、アイコン、ホバー時の背景）も自動的に変わります。コードを修正する必要はありません。
モダンなCSS機能の活用: color-mix 関数を使用することで、不透明度を調整したホバー色を動的に生成しており、非常に洗練されたインタラクションを提供できます。

JavaScript (logoutButton.js)

ここでは @salesforce/community/basePath を使用して、環境に依存しない動的なURL生成を行います。公式ドキュメントの例ではパスの結合処理が少し複雑に書かれていますが、シンプルに basePath と /secur/logout.jsp を結合する方法が安全です。

/**
 * @description : ログイン・ログアウト機能を提供するLWC
 */
import { LightningElement } from 'lwc';
// 現在のユーザーがゲストかどうかを判定するモジュール
import isGuest from '@salesforce/user/isGuest';
// サイトのベースパス（例: '/s' や '/my-site'）を取得するモジュール
import basePath from '@salesforce/community/basePath';

export default class LoginAndLogoutButton extends LightningElement {
    
    /**
     * ゲストユーザーかどうかを返すgetter
     * @return {boolean}
     */
    get isGuest() {
        return isGuest;
    }

    /**
     * ログアウト用のURLを生成するgetter
     * 公式ドキュメントの仕様に基づき、/secur/logout.jsp へのパスを構築します。
     * @return {string}
     */
    get logoutLink() {
        // basePathが'/'の場合は空文字に置換し、それ以外はそのまま使用する安全な実装例です
        const sitePrefix = basePath === '/' ? '' : basePath;
        return `${sitePrefix}/secur/logout.jsp`;
    }

    /**
     * ボタンクリック時のイベントハンドラ
     * ログアウトURLへブラウザをリダイレクトさせます。
     */
    handleLogout() {
        // 生成したログアウトURLへ遷移
        window.location.href = this.logoutLink;
    }

    /**
     * ログイン用のURLを生成するgetter
     * デフォルトの /login へのパスを構築します。
     * @return {string}
     */
    get loginLink() {
        const sitePrefix = basePath === '/' ? '' : basePath;
        return `${sitePrefix}/login`;
    }

    /**
     * ログインボタンクリック時のイベントハンドラ
     * ログインURLへブラウザをリダイレクトさせます。
     */
    handleLogin() {
        window.location.href = this.loginLink;
    }
}

設定ファイル (logoutButton.js-meta.xml)

エクスペリエンスビルダーで使用できるようにターゲットを設定します。

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>65.0</apiVersion>
    <isExposed>true</isExposed>
    <masterLabel>Login and Logout Button</masterLabel>
    <description>LWRサイト用のカスタムログイン・ログアウトボタン</description>
    <targets>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
</LightningComponentBundle>

ログアウト後の遷移先設定

コードの実装ができたら、最後にSalesforce側の設定を確認しましょう。ログアウト後にユーザーをどこに遷移させるかは、ワークスペースで設定します。

デジタルエクスペリエンスのワークスペースを開きます。
[管理] > [ログイン & 登録] をクリックします。
[ログアウトページ URL] の項目で、ログアウト後のリダイレクト先（例: ログインページや特定のWebサイト）を指定します。指定しなければ通常のログイン画面に戻ります。