WordPressでGoogle OAuthログインできるNextend Google Connectを導入する方法

先日FacebookのOAuthログイン対応するための記事を書きました。

WordPressでFacebook OAuthログインできるNextend Facebook Connectを導入する方法

2017.10.08

今回はそのGoogleバージョンです。

EIKING
なんてこたあない、やりかたはほぼいっしょや

特につまずくことなくできました。

 

Nextend Google Connectプラグイン導入

兎にも角にもとりあえずNextend Google Connectプラグインをインストール&有効化します。

プラグイン > 新規追加
からNextend Google Connectを検索してインストール&有効化しましょう。

有効化したら、
サイドバーのメニューからは、
設定 > Nextend FB Connect

からいけます。

 

Nextend Google Connect設定

Nextend Google Connectの設定ページにいくと、
GoogleのAPI設定のことを詳しくかいてくれてるんですよ。

でもね。

EIKING
UIめっちゃ古いから全然わからん

めっちゃ変わってるのでほぼ参考にならないですw

 

Google Developers Consoleにてプロジェクト作成

Google Developers Consoleにいってログインしたら、
まずはプロジェクトを作成します。

左上の青い「プロジェクトを作成」から。

プロジェクト名を決めて「作成」します。

 

Google+APIを有効化する

OAuth認証では、Google+APIを使うので、
有効化する必要があります。

左のハンバーガーメニューから、
APIとサービス > ライブラリ

へいきます。

下の方へいくと、Google+APIというのがありますね。
それ押してみます。

有効にします。

数秒有効化にかかります。

 

OAuth同意画面の設定

Google+APIの有効化が済んだら、
次にOAuth認証するために認証情報を作成していきます。

左のハンバーガーメニューから、
APIとサービス > 認証情報

へいきます。

認証情報の前にOAuth同意画面の設定が必要です。

「OAuth同意画面」というタブから。

内容を入力します。
最悪、とりあえずは「ユーザーに表示するサービス名」だけでもOKで、
ほかはあとから設定できます。

ユーザーに表示するサービス名 これはサイト名でOKです
ホームページのURL 実際に実装するサイトのURL
サービスロゴのURL ロゴに使いたい画像のURL
プライバシーポリシーのURL privacyポリシーURL
利用規約のURL 利用規約のURL(ECなら利用規約ってないかもしんないので特商法ページでいいのでは)

とりあえず完成。

 

認証情報を作成

次に認証情報のページから、
認証情報を作成 > OAuthクライアントID

を選択します。

下記の様にデータを入力していきます。

アプリケーションの種類 ”ウェブアプリケーション”
名前 サイト名でOK
承認済みのJapaScript生成元 サイトURL
承認済みのリダイレクトURI Nextend Google Connectプラグイン設定ページ参照

承認済みのリダイレクトURIについてですが、
実は役に立たないとディスってしまったプラグイン設定ページのインストラクションに載ってますw

サイトURL+wp-login.php?liginGoogle=1

がリダイレクトURLですね。
これ設定できてないとエラーなりますので。

で最後「作成」を押します。

 

クライアントIDとシークレット取得

作成を押すと、クライアントIDとクライアントシークレットが表示されます。

これをNextend Google Connectプラグイン側で入力する必要があります。

 

APIキーの取得

最後にAPIキーの取得です。
これもしかしたら必要ないかも。

別のサイトでは必要なかったので、
クライアントIDとシークレットでダメならAPIキーも取得しましょう。

認証情報を作成 > APIキー

へいきます。

ソッコーで作成されます。

これをメモって、「キーを制限」へ。

キーの制限 HTTP referrers
このHTTPリファラー・・・ サイトドメインを*で囲む

で「保存」です。

完了!

 

Nextend Google Connectに情報入力

ようやくNextend Google Connectの設定画面に戻ります。

Google側で取得した、

  • クライアントID
  • クライアントシークレット
  • APIキー(必要であれば)

を入力していきます。

あとはFacebook連携の記事と同様です。

WordPressでFacebook OAuthログインできるNextend Facebook Connectを導入する方法

2017.10.08

 

Googleログイン連携テスト

いきましょう。

キター!

ということで連携完了です。

ユーザもちゃんと作成されていました。
ちょっとFBと同じぐらいと思ってましたが、かなり記事疲れましたw

EIKINGプロデュースのPRIMAでamazon販売を加速しよう

PRIMAは業界最多10カ国のamazonに対応したamazonデータ収集・価格改定システムです。ありとあらゆる商品データ、ライバル価格を収集でき、さらに綿密なSKU別のルールで自動価格改定も行えます。現在ユーザ数は500+。

コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

1985年生まれ、愛媛県出身東京都在住。 26歳で起業して輸出入貿易事業を開始。 現在は貿易・商品開発・業務支援システム開発・コンサルティング等を行う会社を2社経営。 ”遊ぶために働く、働くために遊ぶ”の相乗効果がパフォーマンスの高い人生を実現できる方法と信じ、日々死ぬほど働き、死ぬほど遊んでいる。 趣味はフェス・ライブ観戦、旅行。 このブログでは自身が経験したビジネス関連と国内外での遊びの情報について発信中。