WordPressでOTPによる電話番号でのログインを追加する方法

ウェブサイトにログインする唯一の方法がメールとパスワードだった時代を覚えていますか？時代は変わり、今では多くのユーザーが電話番号でのログインの利便性を期待しています。

さまざまな人々のWordPressサイトに電話ベースのログインシステムをセットアップするのを手伝ってきた経験から、どの方法が最も効果的で、どの方法を避けるべきかを学びました。最も信頼性の高いオプションを見つけるために、プレミアムプラグインからカスタムソリューションまで、あらゆるものをテストしました。

このガイドでは、WordPressサイトにOTP認証付きの電話番号ログインを追加する方法を共有します。小規模ビジネスサイトでも大規模なメンバーシッププラットフォームでも、ニーズに合ったソリューションが見つかります。

WordPress ユーザーが電話番号でログインできるようにする理由

電話番号によるワンタイムパスコード（OTP）でのユーザーログインを許可することは一般的なプラクティスです。これにより、アカウントを安全に保ちながら、複雑なパスワードを覚える必要がなくなります。

WordPress サイトに電話ログインを追加することを検討すべき理由は次のとおりです。

• セキュリティの向上：静的なパスワードとは異なり、OTPは一度使用すると期限切れになるため、ログインが大幅に安全になります。
• サインインの高速化：長いパスワードを入力する必要はありません。電話に送信された簡単なコードで、ユーザーはすぐにログインできます。
• パスワードリセットの削減：コミュニティサイトを運営している場合、ユーザーは忘れたパスワードをリセットする必要がなくなり、時間とサポートチケットを節約できます。
• ユーザーエクスペリエンスの向上：スムーズなログインはユーザーを満足させ、サイトへの再訪問を促します。
• モバイルユーザーに最適：携帯電話で閲覧する人が増えています。コードでログインできるようにすることで、プロセスがシームレスになります。

さて、WordPressでOTPによる電話番号でのログインを簡単に許可する方法を見ていきましょう。

WordPressでOTPによる電話番号でのログインを追加する方法

無料のLogin with Phone Numberプラグインを使用すると、WordPressに簡単に電話番号ログインを追加できます。

ただし、WordPressはデフォルトでSMSメッセージを送信しないため、OTP配信を処理するためにFirebaseやTwilioのようなサードパーティサービスも必要になります。

まず、無料のLogin With Phone Numberプラグインをインストールして有効化する必要があります。詳細は、WordPressプラグインのインストール方法に関するこのチュートリアルを参照してください。

プラグインを有効化したら、WordPressダッシュボードからログイン設定 » 一般ページにアクセスし、「電話番号ログインを有効にする」オプションにチェックを入れてください。

その後、ユーザーがログインするすべての地域の国コードを追加できます。デフォルトでは、プラグインにはすべての国の電話番号国コードが含まれています。

この設定はこのままにしておくことをお勧めします。これにより、サイトがグローバルなオーディエンスにアクセス可能であることが保証されます。

次に、ユーザーにメールログインを許可したい場合は、「メールログインを有効にする」オプションを確認する必要があります。

メールでログインすることに慣れている既存のユーザーがいる場合は、この設定をお勧めします。これにより、電話番号ログインが有効になっても、引き続きメールでログインできるため、ユーザーが不満を感じることはありません。

次に、「電話番号の後にメールを強制取得」オプションをチェックできます。この設定により、新規ユーザーは登録を完了する前にメールアドレスを提供する必要があります。特に、すでにメールリストをお持ちで、新規ユーザーからメールを収集したい場合に便利です。

電話番号でのユーザー登録を有効にすることもできます。それが完了したら、ユーザーに付与されるアクティベーションコードの長さを入力します。

その後、下にスクロールして「タイマーを有効にする」オプションを見つけます。クリックして有効にし、ユーザーがOTPを入力する時間制限を設定します。

例えば、60秒に設定した場合、ユーザーはコードが期限切れになる前に1分間コードを入力できます。その後、「変更を保存」ボタンをクリックして設定を保存します。

上部にある「ゲートウェイ」タブに切り替えます。ここで、電話番号OTPログイン用のSMSサービスプロバイダーを選択する必要があります。

このチュートリアルではFirebaseを使用します。Firebaseは、ユーザーの携帯電話にワンタイムパスコードを送信して安全なログインを可能にするGoogleのサービスです。

最新の詳細については、価格ページを確認することをお勧めします。ただし、Twilio、WhatsApp、Alibaba SMSなどのオプションを選択することもできます。

一部のオプションは Pro プランでのみ利用可能になることに注意してください。

Firebase を選択したら、その API キーと設定を追加する必要があります。

このためには、Firebaseコンソールにアクセスし、「Firebaseプロジェクトを作成」オプションを選択する必要があります。

これにより新しい画面が表示され、プロジェクト名を追加する必要があります。何のために使用しているかを覚えるのに役立つ名前を付けることができます。

次に、「続行」ボタンをクリックします。

Firebaseは、プロジェクトでGoogleアナリティクスを有効にするための許可を求めます。

それを許可したら、ドロップダウンメニューから「Firebaseのデフォルトアカウント」を選択し、「プロジェクトを作成」ボタンをクリックする必要があります。

プロジェクト概要ページに移動します。ここで、左側の列からビルド » 認証タブに移動します。

「開始する」ボタンをクリックしてください。

これを行うと、画面に新しい設定が表示されます。ここで、サインインプロバイダーのリストから「電話」を見つけ、クリックしてから「有効にする」スイッチを切り替えます。

これにより、ユーザーはFirebase SDKの電話認証を使用して携帯電話番号でサインインできるようになります。その後、「保存」ボタンをクリックします。

次に、「設定」タブに切り替え、左側の列から「承認済みドメイン」オプションを選択します。ここで、「ドメインを追加」ボタンをクリックする必要があります。

これにより、ウェブサイトのドメイン名を追加する必要があるプロンプトが開きます。

これは、他のユーザーによる不正使用を防ぎ、あなたのウェブサイトのみがこのFirebaseプロジェクトに接続することを許可するという重要なセキュリティ対策です。

その後、上部にある「プロジェクト概要」の横にある設定アイコンをクリックし、「プロジェクト設定」タブを選択します。

次に、「Your Apps」セクションまでスクロールし、Webアイコンを選択します。

次に、アプリの名前を追加し、「アプリを登録」ボタンをクリックする必要があります。これを行うと、FirebaseはSDK用の特別な設定コードを生成します。

「SDK」はSoftware Development Kit（ソフトウェア開発キット）の略で、このコードにはWordPressサイトをFirebaseプロジェクトに接続するために必要なすべての設定が含まれています。

ここから、「コンソールに進む」ボタンをクリックするだけです。

プロジェクト概要ページに戻ったら、「Web API キー」をコピーして安全な場所に保管してください。

次に、「マイアプリ」セクションまでスクロールすると、最新のアプリの詳細が画面に表示されます。

ここで、「Config」ラジオボタンを選択して、Firebase SDKをconfigとして表示します。コピーして安全な場所に保管してください。

その後、WordPressダッシュボードに戻り、Login with Phone Numberプラグインの設定のそれぞれのフィールドにFirebase APIキーと設定を追加する必要があります。

次に、「変更を保存」ボタンをクリックして設定を保存します。

これが完了したら、ログインフォームを追加したいWordPressページを開き、「ブロックを追加」ボタンをクリックします。

ブロックメニューから、「ショートコード」ブロックを選択し、以下のショートコードを追加する必要があります。

[idehweb_lwp]

最後に、「更新」または「公開」ボタンをクリックして設定を保存します。

これで、新規ユーザーがあなたのウェブサイトを訪れた際に、電話番号を使って登録・ログインできるようになります。既存ユーザーは引き続きメールでログインできます。

これを設定したら、既存のユーザーにメールを送信して、できるだけ早く電話番号を追加するように促すことをお勧めします。

WordPressダッシュボードのプロフィールページにアクセスし、「個人情報」セクションまでスクロールダウンして電話番号を追加し、「ユーザーを更新」をクリックすることで、これを行うことができます。

これにより、すでにサインアップしている既存のユーザーも、後で電話番号でログインできるようになります。

ボーナス: WordPressにGoogleによるワンクリックログインを追加する

電話番号と OTP によるログインは安全なオプションですが、一部のユーザーはアカウントにアクセスするためのさらに簡単な方法を好みます。

Googleのワンクリックログインを追加すると、ユーザーは即座にサインインでき、ユーザーエクスペリエンスを向上させ、ログインの摩擦を減らし、サインアップを増やすことができます。

これは、メンバーシッププラットフォーム、オンラインストア、コミュニティなど、頻繁に訪問者がいるサイトに特に役立ちます。

無料のNextend Social Loginプラグインを使用すると、この機能に簡単にアクセスできます。これは、ユーザーがGoogle、Facebook、Twitterなどの既存のソーシャルメディアアカウントを使用してサイトに登録およびログインできる人気のツールです。

また、ソーシャルプロファイルを既存のアカウントにリンクすることもできるため、再訪したユーザーが重複を作成することはありません。

開始するには、WordPressにGoogleでワンクリックログインを追加する方法に関するチュートリアルを参照してください。

WordPressでOTP経由の電話番号ログインを追加することに関するよくある質問

新しいログインシステムの設定には、いくつかの質問が生じる可能性があります。ここでは、WordPressに電話番号ログインを追加することについてよく尋ねられる質問とその回答をいくつか紹介します。

Firebaseの無料制限を超えた場合、どうなりますか？

ウェブサイトのトラフィックが増加し、Firebaseのようなサービスの無料利用枠を超えた場合、有料プランに移行することになります。

Firebaseアカウントのダッシュボードで利用状況を監視することをお勧めします。

既存のユーザーは、古いメールアドレスとパスワードで引き続きログインできますか？

はい。チュートリアルで示されているように、電話番号ログインプラグインを使用すると、メールログインを有効にしたままにできます。これは、既存のユーザーを混乱させないために強く推奨されます。

既存のユーザーは、古い認証情報で引き続きログインでき、いつでもプロフィールに電話番号を追加することを選択できます。

電話番号ログインフォームのデザインをカスタマイズすることは可能ですか？

プラグインの無料版では、ほとんどのWordPressテーマに馴染むように設計された基本的なスタイリングが提供されます。

プラグインのプロ版には、より多くの組み込みスタイリングオプションも含まれています。

この電話番号ログイン方法は、WooCommerceや私のメンバーシッププラグインでも機能しますか？

はい、電話番号ログインプラグインは、標準のWordPressログインおよび登録フックと統合するように設計されています。

これは、WooCommerce、MemberPress、およびログインおよび登録ページにデフォルトのWordPressユーザーシステムを使用するその他の人気のあるプラグインと自動的に連携するはずです。

この記事がお役に立ち、WordPressでOTP経由の電話番号ログインを追加する方法を学べたことを願っています。また、WordPressからパスワードリセット/変更オプションを削除する方法に関する初心者向けガイドや、WordPressログインポップアップモーダルを作成する方法に関するチュートリアルも参照してください。

この記事が気に入った場合は、WordPressのビデオチュートリアルのために、YouTubeチャンネルを購読してください。また、TwitterやFacebookでも私たちを見つけることができます。