WordPressを使ったホームページの作り方/プラグインの使い方/ノーコード構築ブログ

【図解&動画解説】wordpressログインにソーシャルアカウントログイン機能追加
HanamiWEBオンラインスクールでは
●バーチャル自習室でのリアルタイム質問!
●チャットで質問し放題!
●24時間学び放題のEラーニング教材!
全部ついて 2,500円/月!
wordpressのログインにソーシャルログイン機能を追加する方法をwordpressの先生が丁寧に解説します!
【Super Socializer】というプラグインを使う事でソーシャルログインを可能にします。

ワンクリックでログイン出来るので、パスワード忘れの心配がない事と、会員サイトによっては会員にもソーシャルログイン機能を実装出来ます!
例えばSimple membershipという会員サイト構築のプラグイン
【図解&動画解説】Simple Memberships会員登録プラグイン~ソーシャルログイン設定方法~
WordPress Social Share, Social Login and Social Comments Plugin – Super Socializerプラグイン設定
正式名称はWordPress Social Share, Social Login and Social Comments Plugin – Super Socializer。こちらを使ってソーシャルログイン機能を有効化にします。
WordPress Social Share, Social Login and Social Comments Plugin – Super Socializerプラグインのインストール&有効化
wordpresssプラグインの検索でSuper Socializerを調べ、プラグインをインストール&有効化します。

【Super Socializer】>【Social Login】
左サイドバーに【Super Socializer】という項目が追加されるので、その中の【Social Login】をクリックして設定へ進みます。

ソーシャルログインを有効にする
チェックを入れていれます。

ログインに使用したいSocialサイトのIDとシークレットキーが必要になります。今回はgoogleをご紹介します。

googleログイン設定
API管理コンソールへアクセス
https://console.developers.google.com/dcredirect/
上記URLからgoogleAPI管理コンソールへ移動します。
プロジェクトを作成
プロジェクトを作成をクリック

好きなプロジェクト名を入力
好きなプロジェクト名を入力し、組織なしのまま【作成】をクリックします。

ダッシュボードへ移動

OAuth同意画面
外部を選択して【作成】

OAuth同意画面
設定する項目は
- アプリケーション名
- 承認済ドメイン

1.アプリケーション名
何でも構いませんが、サイト名や会社名がおすすめです。
2.承認済ドメイン
●●●.com等使用するサイトのドメインを入力します。httpsなどは不要です。
ドメインを入力したらエンターを押す事を忘れないでください。入力したドメインが確定しません。
3.最後に保存ボタンをクリック
認証情報
左サイドメニューの【認証情報】をクリックして【+認証情報を作成】をクリックします。

OAuthクライアントIDをクリック

ウェブアプリケーションを選択

詳細設定
設定する項目は以下の2か所
- 名前
- 承認済リダイレクトURL

1.名前
何でも構いませんが、サイト名や会社名をお勧めします
2.承認済のリダイレクトURI
サイトのURLをコピーしてきます。この時はhttps://~始まる正式なURLを入力します。
URLをコピーした際に末尾に/が入る事があるのですが、ここでは/は入れないように注意をして下さい。
3.作成ボタンをクリック
クライアントIDが作成されました。鉛筆アイコンをクリックするとクライアントIDとシークレットキーを確認する事が出来ます。

クライアントIDとクライアントシークレットの確認

ログイン画面にgoogleアイコンが出る
wordpress用のユーザー名とパスワードを入力しなくても、googleアイコンクリックで管理画面へログイン出来るようになりました!
googleのアカウント(gmailやGsuitに登録しているメールアドレス)でユーザー登録を済ませておく必要があります。

ホームページのリスキリングはお任せください!
2019年よりWordPressやホームページに関するスキルシェアを行ってきました。事例やノウハウが蓄積され、スピーディーかつ的確にお悩みを解決へと導く事を得意としています。ホームページに関するお悩みがございましたら、LINE公式アカウントよりお気軽にご相談ください!
↑クリックするとLINE公式が開きます
新着記事