人気ワード

Copy Title & URL

Bookmark

Feed

Share

snsモジュール:LINEソーシャルログインの設定方法

目次

  1. snsモジュールとは
  2. LINEサービスの事前準備
  3. ソーシャルログイン機能の構築
    1. LINE Developers:ログインチャネルの情報取得
    2. パレットCMS:ソーシャルログイン定義の設定
    3. パレットCMS:コンテンツの設定
  4. ソーシャルログイン時のエラー

ご提供していたsnsモジュール「Twitter・FacebookへのSNS投稿機能」は、API利用形態の変更を受け、Ver.1.9から廃止となりました。

snsモジュールとは

SNS連携を行うモジュールです。LINEアカウントによるログイン設定が行えます。

ソーシャルログインを利用する場合はuserモジュールの導入が必要です。

連携モジュール

  • LINEアカウントによるログイン(ソーシャルログイン):userモジュール

LINEサービスの事前準備

ソーシャルログイン機能を実装するにあたり、LINEの各種サービス設定は事前に進めておいてください。

LINEログインを始めよう:
https://developers.line.biz/ja/docs/line-login/getting-started/

  1. ログイン設定をするLINEアカウント作成
  2. プロバイダーの作成
  3. LINEログインチャネルの作成

ソーシャルログイン機能の構築

SNSとユーザーシートの紐付け(ソーシャルログイン定義)を設定した後、SNSログインボタンを設置するコンテンツにSNS変数を利用して記述します。

ソーシャルログインの構築

  1. LINE Developers:LINEログインチャネルの情報取得
  2. パレットCMS:ソーシャルログイン定義の設定
  3. パレットCMS:コンテンツの設定

ログイン機能のほか、以下の関連機能をユーザーコンテンツに追加することができます。

  • SNS連携の解除
  • 連携状態の判別
  • 未連携かつログイン失敗の状態で登録した場合、登録後に連携を生成
  • 管理者による連携状態の管理

LINE Developers:ログインチャネルの情報取得

① LINE Developersの「コンソール」にログインし、連携するLINEログインチャネルを選択します。

LINEソーシャルログイン_LINE Developersコンソールログイン
図3-1:LINE Developers - チャネル選択

② チャネル基本設定から「チャネルID」と「チャネルシークレット」をメモします。

LINEソーシャルログイン_チャネル基本設定
図3-2:チャネル基本設定

パレットCMS:ソーシャルログイン定義の設定

① パレットCMSでソーシャルログインの接続設定をします。
歯車マーク - SNS | ソーシャルログイン管理 から、ソーシャルログイン定義 を選択します。

LINEソーシャルログイン_ソーシャルログイン定義
図3-3:チャネル基本設定
ソーシャルログイン定義
パレットCMSのソーシャルログインを実装するシートにSNS側の接続情報を定義する設定です。

下部のソーシャルログイン連携 については、パレットCMS:コンテンツの設定 の章で解説します。

②「新規作成」から基本情報を設定し、「作成」よりLINE接続情報の設定に進みます。

LINEソーシャルログイン_ソーシャルログイン定義登録
図3-4:ソーシャルログイン定義登録
  
基本情報(登録)
定義名 接続するサービス名など、わかりやすい管理名称を設定
接続種別 LINEログイン
連携先 連携する(ソーシャルログイン機能を付加する)ユーザーシートを選択

③ 接続情報を設定する前に、基本情報欄の「コールバックURL」を控えます。後でLINE側に設定します。

コールバックURLとは
LINEログイン後に、ユーザーがリダイレクトされるURLです。
LINE Developers - LINEログインチャネル | LINEログイン設定 に設定します。
LINEソーシャルログイン_コールバックURL取得
図3-5:ソーシャルログイン定義編集
  
基本情報(編集)
ID ソーシャルログイン定義のシステムID。後でユーザーログインコンテンツの記述に使用します。
コールバックURL LINEログインチャネル に設定するコールバックURLを表示。
https://パレットCMS設置先URL/sns_login.php
ログインチャネル | LINEログイン設定で使用します。
定義名 登録時に設定した定義名。
接続種別 LINEログイン
連携先 登録時に設定した連携ユーザーシート名

④ 接続情報にLINEログインチャネルから取得した「チャネルID」「チャネルシークレット」を入力し、ステータスを「有効」にします。

LINEソーシャルログイン_ログインチャネル設定
図3-6:ソーシャルログイン定義編集

⑤ LINE Developersコンソールに戻り、ログインチャネル | LINEログイン設定 にパレットCMSから取得したコールバックURLを設定します。

LINEソーシャルログイン_コールバックURL設定
図3-7:ログインチャネル | LINEログイン設定

⑥ 設定した定義の編集を行う場合は、ソーシャルログイン定義一覧のえんぴつマークから行います。

LINEソーシャルログイン_ソーシャルログイン定義一覧
図3-8:ソーシャルログイン定義一覧

パレットCMS:コンテンツの設定

ソーシャルログインボタンを設置するコンテンツや会員マイページなどに、以下のソーシャルログイン変数を設置することでSNS連携が動作します。

引数の指定 [変数:$1:$2:$3:$4] 
変数に続いて、引数を:(半角コロン)で区切って指定します。

変数:[sns_login_url] の引数指定例 ※第1引数から第4引数まで指定した例

<div class="form">
  <button type=button onclick="location.href='[sns_login_url:sh9dp45cvlsb:ugjaxr1i67vw:user_mypage_m:login_error]'">
  LINEでログイン
  </button>
</div>

ソーシャルログイン連携 には、ユーザーがSNS連携に成功したレコード(連携データ)が保存されます。

管理者による確認用途のほか、複数アカウントでの連携防止、連携解除などステータス変更時に参照します。
※連携データを削除すると、該当の連携者はログイン承認からやり直しになります。

LINEソーシャルログイン_ソーシャルログイン連携一覧
図3-9:ソーシャルログイン連携一覧
変数 引数仕様 返却値 変数設置箇所
[sns_login_url] 【SNS】ソーシャルログインURL【引数対応】
$1:ソーシャルログイン定義のID
$2:連携対象のユーザーシートID
$3:処理が成功した時に着地するページのコンテンツID
$4:処理が失敗した時に着地するページのコンテンツID
URL 全コンテンツ

変数に指定した引数を元にソーシャルログインURLを返却します。ソーシャルログインする操作者が一般権限かユーザー権限かにより挙動が異なります。

  • 一般:$2に対してログインを行い、連携データの参照先として$1を利用する。
  • ユーザー:$1に対して連携データの作成を試み、連携データを新たに作成した場合はログイン成功、既に連携データがある場合は失敗となる。
  • ログイン処理が成功した場合:$3で指定したコンテンツに着地する。
  • ログイン処理が失敗した場合:$4で指定したコンテンツに着地する。
変数 引数仕様 返却値 変数設置箇所
[sns_login_exists] 【SNS】ソーシャルログイン連携チェック【引数対応】
$1:ソーシャルログイン定義のID
0、1 ユーザー詳細

閲覧中のユーザー詳細におけるユーザーの連携状態を0、1で返却します。

  • 返却値:0:連携が存在しない。
  • 返却値:1:連携が存在する。
変数 引数仕様 返却値 変数設置箇所
[sns_login_delete_url] 【SNS】ソーシャルログイン連携解除【引数対応】
$1:ソーシャルログイン定義のID
URL ユーザー詳細

会員マイページからソーシャル連携の解除ができます。ログイン中アカウントの連携状態を指定した引数をもとに解除します。

変数 引数仕様 返却値 変数設置箇所
[sns_login_regist] 【SNS】ソーシャルログイン引継
引数なし
1 ユーザー登録

以下の条件を満たす場合、ユーザー登録完了後に連携データを自動発行します。

  • 変数が設置されている。
  • 直前で連携に失敗したなど、同一セッション間で連携に失敗したデータを保持している。
  • 連携に失敗したユーザーシートと登録時のユーザーシートが同一。

ソーシャルログイン時のエラー

ソーシャルログイン時のエラーは、LINEソーシャルログイン:エラーコード を参照してください。

関連記事