今運用している会員サイトにユーザーが登録の手間を省けるようにSNSログインを入れたい。
実はそれはジャイアニズムというプラグインを使えば解決することができます。
ジャイアニズムをFacebookやLINEログインといったSNSログインを簡単に導入することができます。
なので、今回はジャイアニズムを使ってLINEログインを導入する方法をご紹介していきます。
今回の記事を読むことで、どういう流れでLINEログインを導入や流れの確認をすることができるのでぜひ最後まで読んでみてください。
Contents
ジャイアニズムとは
ジャイアニズムとはWordPressにSNSログインを実装することができる国産のプラグインになります。
SNSを使って登録もできるので、ユーザーに登録フォームの入力の手間を省いて登録率アップにもつなげることができます。
ジャイアニズムででできること
ジャイアニズムでは、次のSNSログインを実装することができます。
・Facebook
・Twitter
・Google
・Instagram
・LINE
今回はLINEとジャイアニズムを連携する方法を紹介していきます！
LINEの開発者アカウントの作成
まずは、LINEの開発者サイトに行ってログインします。
LINEのアカウントを持っていない方は予め作成しておくようにしましょう。
LINEの開発者サイトにアクセスしたら、サイトの中にある「ログイン」ボタンをクリックしてログインするようにしましょう。
「ログイン」ボタンをクリックすると、LINEの開発者ログインページが表示されます。
作成したアカウント情報を入力してログインします。
Authentication failedが出た場合
LINEの開発者ページにいつものメールアドレスとパスワードを使ってログインしたのに「Authentication failed」と表示された画面が出ることがあります。
これは、何かしらの理由でログインに失敗したとの表示のようです。
ただ、連携しているスマホに「LINE Developersにログインしました。」といったメッセージが来ていればログインは完了しています。
なので、もう一度開発者ページのトップに戻って「ログイン」ボタンをクリックしてみてください。
すると、今度はログインフォームの代わりにアカウントが表示されていると思います。
表示されたら、そのままログインをクリックしてログインしましょう。
ちなみにログインを押しても「Authentication failed」が出る場合は下記のページにアクセスして「コンソールにログイン」をクリックしてログインしましょう。
僕の場合はそれでログインできました。
ログインがうまくいくと下記のようなページが表示されます。
LINEの開発者アカウントの作成
LINEの開発者アカウントを作成していない場合は、初回のログイン時に開発者作成ページが表示されます。
ここでは、開発者として使用する情報を入力して開発者アカウントを作成しましょう、
入力した情報で開発者アカウントが作成できたら、開発者アカウント専用ページが表示されます。
これで、LINEの開発者アカウント作成は完了です。
新規プロバイダーの作成
開発者アカウントの作成ができたら次はプロバイダーを作成していきます。
プロバイダーとは認証を行うために作成する個人や企業名のことです。
開発者ページトップから「新規プロバイダー作成」をクリックしましょう。
クリックしたら、プロバイダー名を入力する画面が表示されます。
今回は「アカウント名＋LINEログイン」としました。
入力ができたら「確認する」をクリックして、作成しましょう。
作成終えると次のようなページが表示されます。
これでプロバイダーの新規作成は完了です。
新規チャンネルの作成
プロバイダーが作成できたら、今度はチャンネルを作成していきましょう。
チャンネルとは、プロバイダー名の中にあるプロジェクトのことです。
今回はLINEログインを実装するので、LINEログインの「チャンネルを作成する」をクリックしましょう。
クリックすると、チャンネルの作成画面が表示されます。
それぞれ入力してチャンネルを作成していきましょう。
ちなみに、アプリタイプには「WEBで使う」を選びます。
また、このチャンネル作成ではLINEの文字列を含んだものを作成することができないようです。
LINEの文字列が含まれた場合は下記のようなエラー画面が表示されます。
うまく作成すると作成されたアプリが一覧に表示されます。
これでチャンネルの作成は完了です。
チャンネルIDとチャンネルシークレットの取得
チャンネルの作成が完了したら、今度はLINEとジャイアニズムを連携するために必要な「チャンネルID」と「チャンネルシークレット」を取得します。
「チャンネルID」と「チャンネルシークレット」はアプリ一覧画面の中から「LINEログイン」のものクリックします。
すると、チャンネル詳細画面が表示されます。
この詳細画面のタブ「チャネル基本設定」のタブになっていることを確認して、下にスクロールしましょう。
スクロールしていくと、チャンネルIDとチャンネルシークレットと書かれた部分が表示されます。
この２つがLINEとジャイアニズムを連携するのに必要なものになります。
なので、メモを取っておくようにしておきましょう。
これで「チャンネルID」と「チャンネルシークレット」の取得は完了です。
ジャイアニズムの設定画面に移動
「チャンネルID」と「チャンネルシークレット」をそれぞれ取得ができたら、今度はジャイアニズムの設定画面に移動します。
設定画面に移動すると下記のような項目が表示されると思います。
ジャイアニズムには次のような基本設定があります。
１．現在の登録設定
２．ログイン画面
３．ボタンサイズ
現在の登録設定について
現在の登録設定については、WordPressのデフォルトの設定を使用するか、ジャイアニズムの設定を使用するかを選べます。
特に理由がなければここは、ジャイアンらしく登録を「登録を強制する」にチェックを入れておきましょう。
ログイン画面設定について
ここでは、すべてのログイン画面にログインボタンを表示するか、ログインボタンを手動で設定するかを選ぶことができます。
特に理由がなければ、「すべてのボタンをログイン画面に表示する」を選んでおきましょう。
ボタンサイズについて
ここでは、ボタンサイズを「中」か「大」の２つのサイズから選ぶことができます。
好きなサイズを選ぶようにしましょう。
ジャイアニズムとLINEを連携
ジャイアニズムとLINEを連携するには、ジャイアニズムの設定画面を下にスクロールしていきましょう。
すると、LINEの設定画面が表示されるので、設定に必要な項目を埋めていきます。
ジャイアニズムで必要な項目には次のような項目があります。
・LINEと接続
・チャンネルID
・チャンネルシークレット
・リダイレクトURL
・メールアドレスを取得する。
LINEと接続について
LINEと連携して、LINEログインを実装するかどうかを聞かれます。
ここはONにします。
チャンネルID
ここにはLINEのチャンネルIDを入力します。
チャンネルシークレット
ここにはLINEのチャンネルシークレットを入力します。
リダイレクトURL
ここはリダイレクトさせる場合に設定します。
リダイレクトURLのコピーのボタンをクリックして、表示されたURLをコピーしてください。
表示されたURLをコピーできたら、連携するLINEのチャンネルのチャンネル詳細ページに行きます。
チャンネル詳細ページに移動したら、タブの「アプリ設定」をクリックしましょう。
そこで、「Calback URL」という項目があるので編集を押して先程コピーしたURLを貼り付けます。
これでリダイレクトURLの設定は完了です。
ここの設定をしておかないとLINEが使用できないので、しっかりと設定しておきましょう。
メールアドレスを取得する。
ここはユーザーがLINEログインした時のメールアドレスを取得するかどうかの設定ができます。
ここを設定しておかなくてもLINEログインは実装できますが、ログインしたユーザーのメールアドレスがLINEが作成した適当なメールアドレスになります。
必要な場合はチャンネル詳細ページから、メールアドレスの申請を行いましょう。
必要な項目を埋めたら「変更を保存」をクリックしましょう。
これで、ログイン画面に移動するとLINEログインのボタンが表示されていると思います。
まとめ
今回はジャイアニズムを使ってLINEログインを実装する方法を紹介しました。
ジャイアニズムは他のSNSログイン(InstagramやTwitter)などにも対応しているので、他にも対応させたいものがあれば対応させることができます。
ジャイアニズムはSNSログインを付与するプラグインなので、これだけで会員サイトを作成するとかはできません。
ただ、今の会員サイトにSNSログインを実装したいなどの場合は、とても便利なプラグインなのでぜひ使ってみてください！
