お問い合わせ
    氏名

    メールアドレス

    件名

    お問い合わせ内容



    会員登録(無料)
    ログイン
    スキルアップは今すぐこちら!▶

    【WordPress】「WordPress Social Login and Register」GoogleアカウントやFacebookログイン機能を実装する便利プラグイン

    WordPress(ワードプレス)
    この記事は約4分で読めます。

    前回はソーシャルログイン機能を実装できる便利プラグインとして「Nextend Social Login and Register」をご紹介させていただきましたが、今回は「WordPress Social Login and Register」プラグインをご紹介したいと思います。

    WordPress Social Login and Register プラグインとは?

    WordPressソーシャルログインプラグインを使用すると、Facebook、Google、LinkedIn、Twitter、Apple、Discord、Twitch、Line、Wechat、その他40のアプリを使用して、ソーシャルログイン、ソーシャル共有、コメントを行うことができます。訪問者が通常の登録フォームに記入する時間を無駄にする代わりに、ソーシャルメディアプロファイルを使用してWebサイトに登録/ログインすることができます。

    WooCommerce、BuddyPress、MailChimp、Paid Memberships Pro、Ultimate Memberなどの人気のあるプラグイン、およびDiscord&Hubspotなどのアプリケーションとの統合や連携も可能です。

    WordPress Social Login and Register (Discord, Google, Twitter, LinkedIn)
    Social Login with Discord, Facebook, Google, Twitter, LinkedIn and 40+ apps. Social login with social share and comments. Free, fast & easy! WooCo …

    プラグインの設定方法

    まずはプラグインを検索してインストール、有効化します。

    ワードプレスの管理画面にminiOrange Social Login, Sharingというメニューが追加されます。

    Socialログイン機能を追加する

    メニューを開くと、いろいろなSNSアカウントと連携できる設定項目があります。半数の機能はPROプラン(有料購入)の機能ですが、無料の範囲でも便利に使うことができます。

    今回は、Googleアカウントでログインできる機能を追加してみます。

    ワードプレスにGoogleアカウントでログインする

    まずは、使用したいソーシャルアカウントをオンにします。

    そうすると、設定画面が表示されます。

    プロジェクトを作成する

    console.cloud.google.comにアクセスして、新しいプロジェクトを作成します。

    Google Cloud プラットフォーム
    Google Cloud Platform では、Google と同じインフラストラクチャでアプリケーション、ウェブサイト、サービスを構築、導入、拡大することができます。

    ※こちらのGoogleサービスは使用状況が膨大になると課金対象になる可能性があるので使用の際はご注意ください。

    「プロジェクトを作成」から新しいプロジェクトを作成します。

    プロジェクト名を設定して、作成を押します。

    OAuth同意画面を設定する

    前回と同様に「OAuth同意画面」を設定します。

    画面に沿ってOAuth同意画面を設定していきます。

    画面に沿って設定していきます。

    「スコープ」>「テストユーザー」は、ひとまず無設定でそのまま進んでみます。

    アプリ公開

    アプリを公開してみます。

    公開されました。

    OAuthクライアントIDを作成する

    「OAuthクライアントID」を作成します。メニューから「認証情報を作成」をクリックすると選択肢が表示されますのでクライアントID」を選択します。

    アプリケーションの種類は「ウェブアプリケーション」を選択します。

    認証済みリダイレクトURLは「https://yourdomain.com/openidcallback/google」を入れて「作成」を押します。

    OAuthクライアントが作成されました!こちらの「クライアントID」と「クライアントシークレット」を控えておきます。※重要な情報になるので注意しましょう。

    「OAuth2.0 クライアントID」が作成されました!

    「クライアントID」と「クライアントシークレット」を設定する

    ログイン画面にGoogleでログインが追加された

    ログイン画面にGoogleでログインするボタンが追加されました!

    まとめ

    「WordPress Social Login and Register」プラグインを使うと、ワードプレスにGoogleなどのソーシャルアカウントでログイン機能を導入できます!

    また、ショートコードを活用すれば、ログイン画面以外の場所にも表示することができます。詳しい使い方や活用方法については、また別の記事でまとめたいと思います。

    ご参考ください😃

    2 件のコメント

    コメント
    1. EGUWEB eguweb より:

      テスト

    タイトルとURLをコピーしました