4kaku design

マーケティングを勉強しているWebデザイナーのノート

a-blog cms Ver.2.1.0 から「SNSログイン機能」が搭載されました!

アカウント名とパスワードがなくても、あらかじめTwitterかFacebookのアカウントとユーザーをひもづけておけば認証だけでブログにログインすることができるようになりました。新規読者(ユーザー)登録もバッチリです。

a-blog cms v2.1.0 リリースノート


SNSログインを設定するキモは「APIキーの入手」


Twitter、FBのログインボタンが追加されました

「a-blog cms 2.1もリリースされたところだし、WordPressとの比較記事を書いてみよう」に続いて、Ver.2.1.0リリース記念エントリー第二弾ではSNSログインの方法についてご案内します。

そもそも、SNSログインができるようになることで何が良くなるんでしょうか。既存ユーザーのログインが楽になるのも重要ですが、一番は「新規ユーザー登録のハードルがぐっと下がる」ことだと思います。自分の情報を入力する手間が省けるので、読者限定コンテンツを配信するサイトの場合はこれって結構重要です。

しかし、初めてTwitter、Facebook連携をする際にはSNS側であれこれ設定が必要です。一度覚えてしまえば他のWebアプリを作るときにも役立ちますので、ぜひ挑戦してみてください。
※本エントリー内のスクリーンショットは2014年6月25日現在のものです。


a-blog cms 側での設定


コンフィグ設定

APIキーを入力!

a-blog cms 側の設定は、「コンフィグ設定でチェックを入れる」「APIキーを入力する」の2つだけ。

しかし、このAPIキーの入手方法がひと手間かかりました。今回は英語を読みたくない人でもさくさくSNSログインをお試しいただけるよう、スクリーンショットとともにご案内します。(利用規約にはざっくりで構いませんので、目を通すことをおすすめします)

SNSアカウントで新規ユーザー(読者)登録するための設定

ユーザー登録の外部申請
チェックを入れると、SNS経由でユーザーを登録できるようになります
外部申請時の権限
SNS経由で作ったユーザーの権限を設定。ほとんどの場合は「読者」で良いかと思います。
SNSログイン機能
チェックを入れると、SNS経由で作ったアカウントでログインができるようになります

既存ユーザーがSNSログインを利用するための設定

ログイン中の投稿者
公開権限がシビアなブログの場合はチェックを入れてもらった方が安全
SNSログイン機能
チェックを入れてください
SNSログイン使用権限
デフォルトは「読者」のみですが、試しに使ってみる場合は「管理者」や「全ての権限」に設定してください

Twitter API キーを入手するには



Twitterのデベロッパーツールにアプリケーションを登録し、APIキーを取得します。タイムラインが表示されているページからも行けますが、リンクが大変見つけづらいのでご注意ください。新デザインのホーム画面からはリンクがないようでした。



「Create New App」からアプリケーションを登録します。入力項目は以下の通り。「Callback URL」は以前のTwitter連携の設定と変わっているので要確認です。「API Keys」タブで取得したAPIキーとAPI secret が確認できるので、それをプロパティ設定で入力してください。


Name
「Twitter」という単語が含まれていなければ、どんな名前でもOK
Description
10文字以上200文字以下の説明文
Website
a-blog cms が設置されているURL
Callback URL
a-blog cms が設置されているURL/callback/signin/twitter.html

FacebookのAPIキー入手方法



画面の指示に従ってデベロッパー登録をすると、Facebook Developersでアプリケーションを登録できるようになります。
「Display Name」と「カテゴリ」を入力すれば、この画面での設定はひとまず終了です。



この時点ですでにa-blog cms で必要なApp IDとApp Secret は取得できました。しかし、このままではまだSNSログインは利用できません。
サイドバーの「Setting」をクリックし、「Basic」タブの「Add Platform」から「Website」を追加します。入力項目は以下の通り。


Namespace
空欄でOK
App Domains
a-blog cms が設置されているURL
Contact Email
利用可能なEメールアドレス
Site URL
a-blog cms が設置されているURL
Mobile Site URL
今回の場合は空欄

「Setting」での入力が終わったら、「Status & Review」でスクリーンショットに載っているボタンを「Yes」に切り替えます。これで、不特定多数のユーザーがFacebookアカウント経由でユーザー登録ができるようになりました。
「Setting」でEメールアドレスを入力していないと、ここでボタンを切り替えることができません。


取得したAPIキーを使ってみよう!


既存ユーザーがSNSアカウントでログインするためには


ユーザー設定画面のTwitter、Facebookそれぞれの認証ボタンをクリックすると、既存ユーザーとSNSアカウントを紐付けることができます。無事に認証できると、青いボタンが「認証解除」の赤いボタンに変わります。


SNSアカウントを使って新しいユーザーをつくる(読者登録)


ログインページ最下部の「新規の読者登録はこちら」のリンクから新規ユーザーを登録することができます。ここで作るユーザーの権限は、最初にご紹介した機能設定の画面で設定してください。

以上で、SNSログインに必要な設定は終了です。ぜひお試しください!

現在、制作スタッフがリレー形式でブログを更新しています。詳細はこちらをご覧ください。5周年記念セールも開催中です!