WordPressにLINEログインを組み込むプラグイン「WP LINE Login」

Wordpress×LINEログイン Wordpress

WordPressにLINEアカウントでログインする機能を追加するためのプラグイン「WP LINE Login」の解説です。

機能

  • WordPressにLINEアカウントを使用してログイン可能(ソーシャルログイン機能をWordpressに追加)
  • 新規ユーザー、既存ユーザー両方と連携可能
  • WP LINE Connect」とも連携可能

仕様

新規ユーザーの連携

LINEログイン → WP新規ユーザー登録 → 連携

既存ユーザーの連携

  • LINEログイン → Wordpressログイン → 連携
  • 既にログイン済みなら連携メニューよりLINEログイン → 連携

インストール方法

WordPressのプラグインディレクトリには掲載していないため、ZIPファイルをダウンロードして管理画面のプラグインページよりアップロードしてください。

  • GitHub/wplineloginより最新のリリースのAssets部分のリンクより「wplinelogin.zip」をダウンロードしてください。
  • WordPressの管理画面へログインし、「プラグイン」メニューから「新規追加」を選び、「プラグインをアップロード」をクリックします。
  • 「ファイルの選択」から、ダウンロードしておいたZIPファイルを選択し、「今すぐインストール」をクリックします。
  • インストールが完了したら、プラグイン一覧画面より「 WP LINE Login」を有効化します。

初期設定

LINE Developersでの設定

LINEログインチャネルの作成

  1. あらかじめLINE Developersにて、LINEログイン チャネルを作成しておいてください。
  2. チャネルIDとチャネルシークレットをメモしておきます。

コールバックURLの設定

LINE Developersの「LINEログイン設定」を開き、「コールバックURL」を下記のように設定してください。

WordPressサイトURL/linecallback/

例)https://example.com/linecallback/

WordPress側でのLINE loginプラグイン設定

  1. 「設定」→「LINE Login」メニューからLINE Login設定ページを開きます。
  2. メモしておいたチャネルIDと、チャネルシークレットをチャネルタブの各入力欄に入力します。
  3. 暗号化シークレットを適当な英数字に変更します。
  4. ページ設定タブを開いて、ご自分のサイトに合わせて各ページのURLを設定します。
  5. 設定を保存します。

使用方法

LINEログインリンクをサイトに追加します。ショートコードを使用してLINEログインリンクを表示することもできます。

LINEログイン用ショートコード

[line_login_link]

このショートコードには2つの役割があります。

  1. LINEログイン用のリンクを表示
  2. WPユーザーのLINEアカウントとの連携状態と連携・連係解除リンクの表示

ログイン状態に応じて表示される内容が異なります。未ログインならログイン用リンクが、ログイン中なら、連携状態と、連携・連係解除リンクが表示されます。

ショートコードの表示フローはこのようなものとなります。

ショートコードを表示するページの例
  • ログインページ(ログインフォームの下部)
  • ユーザーの登録情報編集ページ

LINEログイン用リンクURL

ショートコードを使用せずに直接下記URLへのリンクを作成することでもLINEログインや連携が行えます。

LINEログインを開始するために4つのURLが用意されています。違いは下記のとおりです。

ログイン用

未連携のLINEアカウントでログインした場合、WPのログインページへ遷移します。

  • linelogin/
新規登録用

未連携のLINEアカウントでログインした場合、新規登録ページへ遷移します。

  • linesignup/
  • lineregister/
LINE連携/連係解除用

すでにログイン済みのユーザー用に、LINE連携を開始または解除を行うために使用します。連携・連係解除後はユーザーホームページへ遷移します。

  • linelink/
  • lineunlink/

パラメータによる文言の変更

リンクや連携状態表示のメッセージ、ボタンラベルをショートコードのパラメータで指定できます。

login_label

ログインリンクのラベル

unlinked_label

LINE連携されていない場合の状態表示。デフォルトは「LINE 連携されていません」

unlinked_button

LINE連携されていない場合に表示される連携開始ボタンラベル。デフォルトは「連携」

linked_label

LINE連携されている場合の状態表示。デフォルトは「LINE 連携済みです」

linked_button

LINE連携されている場合に表示される連携解除ボタンラベル。デフォルトは「連携解除」

サンプル

[line_login_link login_label="LINE Login" unlinked_label="You are not linked." linked_label="You are already linked." unlinked_button="LINK" linked_button="UNLINK"]

出力HTMLサンプル

//ログインリンク
<a href='https://example.com/linelogin/' class='line-login-link login'>[login_label]</a>

//連携状態表示: 未連携
<span class='line-login-label unlinked'>[unlinked_label]</span>
<a href='https://example.com/linelink/' class='line-login-link unlinked'>[unlinked_button]</a>

//連携状態表示: 連携済み
<span class='line-login-label linked'>[linked_label]</span>
<a href='https://example.com/lineunlink/' class='line-login-link linked'>[linked_button]</a>

LINE連携完了時のメッセージ表示ショートコード

下記のショートコードがLINE連携完了時のメッセージや、未連携の場合、WPユーザーでのログインを促すメッセージなどを表示するために使用されます。

[line_login_message]

メッセージ表示用ページの作成

新たにメッセージ表示用ページを作成します。作成したページのURLをLINE Loginの設定「メッセージページURL」欄にセットします。(デフォルトでは「linemessage/」です)

加えて下記のページにもこのショートコードを追加しておくと、WPユーザーでのログインが必要なときに適切なメッセージが表示されるためユーザーにとってわかりやすくなります。

  • ログインページ
  • 新規ユーザー登録ページ

ログインフローチャート

カスタマイズ

LINE Login設定ページより設定が行えます。

メッセージの内容や各種ページのURLを変更することが可能です。

その他複雑なカスタマイズをご希望の場合は有償で承りますのでこちらからご連絡ください。

必要動作環境

  • WordPress 4.9.13以上

制作者

  • シップ

謝辞

  • 使用してくださっている方々。

ライセンス

  • GPLv3

Comments

  1. teto より:

    [line_login_link]のショートコードでlinelink/にアクセスしても
    もちろんページがないので「Page Not Found」になるのですが
    リダイレクトは自分で構築しないといけないのでしょうか?

    • ship ship より:

      基本的には{サイトURL}/linelink/ が固定ページへのアクセスとみなされるパーマリンク構造であれば、自動でリダイレクトされるかと思います。
      「Page Not Found」になる理由として考えられるのは{サイトURL}/linelink/ を表示したときに「linelink」が固定ページスラッグ(pagename)として認識されていないからかもしれません。
      クエリ変数のpagenameがどのような値になっているかQuery Monitorなどを用いてご確認ください。

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