Joomla!, Microsoft Word, etc.

Joomla!

Joomla!でのPasskeyによるログイン(Passwordlessログイン)の設定

Detail
Written by: fuku-chang
Category: Joomla!
Joomla!でのPasskeyによるログイン(Passwordlessログイン)の設定

Joomla!でのPasskeyによるログイン(Passwordlessログイン)設定を他サイトで試しました。

概要

  •  Joomla! CoreにはSystem - Passkey (Passwordless) Loginというプラグインが用意されており、デフォルトで有効となっています
  • このプラグインを使用し、passwordを入力することなく簡便に、そして安全にログインすることができます
  • 昨今、企業のパスワード漏洩が頻繁に報道されていますが、一刻も早くPasskeyログインが普及してくれることを望みます
  • 当サイトとは別の、わたくしが構築した会員専用サイトで試してみました
  • なお以下の説明は、既にLoginページ又はLoginサイトモジュールが配置され、ログインしたユーザーしか閲覧できないアクセス制限が施されたの会員専用ページが整っている状態を前提としています

手順概要

  1. ログインフォームにPasskeyによるログインボタンを表示できる状態であることを確認します
  2. 各ユーザーが自分のプロファイルページよりPasswordlessログイン用のPasskeyを登録します
  3. PasskeyによるPasswordlessログインを試します

設置手順

  • Joomla! Core + Template: Cassiopeiaの環境であれば、デフォルトでLogin Formに[Sign in with passkey]ボタンが表示されています
  1. Plugin: System - Passkey (Passwordless) Loginの有効状態を確認します
  2. Menu Type: Login Formのページ、又はSite Module: Login Formをページ内に表示します
  • たったこれだけで、PasskeyによるPasswordlessログインができるようになります

ユーザーによるPasskey登録手順

  • パスワード管理アプリ1Passwordを使用した手順を次に説明します
  • 当方で検証した環境は、PC: Windows 11 + Browser: Chrome + Chrome Extension: 1Passwordになります
    • わたくしはパスワードとPasskeyを1Passwordで管理しています
  • なお、会員サイトには事前にEdit User Profileのページを用意する必要があります

1PasswordによるPasskey登録事前準備

  • 1Passwordでは、Logoin用の1アイテムに対し、1つのPasskeyしか登録することができません
  • そのため、当サイトのようにPasskeyによるMFAを有効としているサイトでは、2種のPasskeyを使用することとなります
  • そこでわたくしは、同じユーザーで2つのアイテムを登録しています
    • Passwordログイン用のアイテム: ユーザー名、パスワード、MFA用のPasskeyの3項目を登録します
    • Passkeyログイン用のアイテム: パスワードを記録せず、ユーザー名とPasskeyの2項目のみを登録します

フロントエンドに[Edit User Profile]ページを登録

  • 会員専用サイトを構築する場合、必然的に自分のパスワードやPasskey等を編集できるページをフロントエンドに用意する必要があります
  • Edit User Profileページには、Passkeyを登録する機能も用意されています
  1. Menu > Main Menu > +Newをクリックします
  2.  Menus: Edit Itemが表示されます
  3. Title: Edit My Profile等の任意のタイトルを入力します
  4. Parent Item: - No Parent -又は任意の親アイテムを指定します
    • 一般的にはMy Account等のユーザー専用メニュー階層下とするかと思います
  5. Details tab > Menu Item Type: Edit User Profileを選択します
  6. Status: Publishedを指定します
  7. Save & Closeをクリックします

Passkey登録手順

  1. 通常のパスワードログインでログインします
  2. Edit User Profileページを開きます
  3. Passkey Login blkまで移動します
  4. + Add New Passkeyをクリックします
  5. 当該のPCで用意されているPasskey生成ツールを使用して、Passkeyを登録します
    • Windows PCであればデフォルトのWindows Hello等でPasskeyを登録します
    • 当方の環境では、1Passwordのポップアップが開きます
      • 保存先を上記で説明のPasskeyログイン用のアイテムであることを確認してSaveします
  6. Passkey Login blkのリストにPasskeyが追加されたことを確認します

ログイン手順

  1. Login FormのUsername欄にユーザー名を入力します
    • 仕様上、User名の入力は必須となります
    • 当方の環境では、Login Formのページを表示したタイミングで、ログインするアイテムのポップアップが開きますので、Passkeyログイン用のアイテムを選択します
      • Usernameのみが挿入されEnter押下状態(Loginボタンをクリックした状態)となるため、パスワードを入力するようツールチップが表示されます
  2. Sign in with a passkeyをクリックします
  3. 当該ユーザーのPasskeyを適用します
    • 当方の環境では、選択したPasskeyログイン用のアイテムのPasskeyを入力するポップアップが表示されるので、Passkeyボタンをクリックします
  4. 認証され、会員専用ページへ遷移します
  • 上記の手順の場合、アイテムの選択 > Sign inボタンのクリック > Passkeyボタンのクリックの3ステップのマウス操作のみでログインしています

 メニュー構成を原因とするトラブル

  • 上記のとおり、Passkeyログインの導入は非常に簡単なのですが、当初はエラー表示があり、うまくいきませんでした
  • 原因は、メニュー構成にありました
  • 具体的には、メニューのアクセス権設定が誤っていたことが原因でした

Passkeyログイン導入前のメニュー構成

  • Login (Access: Public / Menu Item Login Redirect: (blank))
    • Edit User Profile (Access: Registered)
  • Home (Access: Registered)
  • Menu A (Access: Registered)
  • Menu B ((Access: Registered)
  • トップページ(https://example.com)へアクセスすると、唯一のAccess: Publicであるhttps://example.com/loginが表示されます
  • ログイン後のリダイレクト先が無指定の場合、同じページ=Homeページへ遷移します
  • パスワードログインの場合は、この構成でログインユーザーだけが閲覧できるサイトとなります

修正後のメニュー構成

  • Login (Access: Public / Menu Item Login Redirect: Members' Home)
  • My Account (Access: Registered)
    • Edit User Profile (Access: Registered)
  • Members' Home (Access: Registered)
  • Menu A (Access: Registered)
  • Menu B ((Access: Registered)
  • メニュー構成をわかりやすくするため、HomeをMembers’ Homeに修正しました
  • ログイン後のリダイレクト先をMembers’ Homeに指定しています
  • この構成にすることでトップページ(https://example.com)へアクセスすると、唯一のAccess: Publicであるhttps://example.com/loginが表示されます
  • ログイン後、Members' Homeへ遷移します

パンくずリストの修正

  • Plugin: Breadcrumbsのデフォルト設定ではHomeを表示しますので、Home > Members' Homeとなってしまいます
  • そこで、Homeを非表示とします
    • Plugin: Breadcrumbs > Module > Home: Show > Hide
  • その結果、Members' Homeが「見た目上」トップページとなります

サイトロゴのリンク修正

  • パンくずリストは修正できましたが、ページ左上のサイトロゴをクリックすると、本来のHomeが表示されてしまいます
  • Template: Cassiopeiaでは、サイトロゴの表示をindex.phpで規定していますので、これを修正します
  1. System > Template > Cassiopeia_child (当サイトの場合) > index.phpをクリックします 
  2. クラス名bland-logoで検索して修正行を表示します
  3. パス指定箇所を"/"から"/members-home"に修正します
    <a class="brand-logo" href="/<?php echo $this->baseurl; ?>/">
↓
<a class="brand-logo" href="/<?php echo $this->baseurl; ?>/members-home">
  4. Save & Closeをクリックします

参照