SNSログイン機能admin18

SNSログインとは

a-blog cmsでは、Facebook、Twitter、Googleのユーザーアカウントを使用してログインするSNSログイン機能があります。
a-blog cmsでは、Facebook、Twitter、Googleの各サービス、a-blog cms のブログ、a-blog cmsのユーザーに必要な設定を行うことでこの機能が利用できます。


Facebook 側の設定

Facebookアカウントを使ったSNSログインのための準備として、a-blog cms の管理ページ>コンフィグ>プロパティ設定 にあるFacebookアプリケーション欄の「Application ID」と「Appliction Secret」の2つの情報が必要になります。
この2つの情報は、 独自のFacebookアプリを作成することで入手できます。

注意:Facebookアプリの作成には、Facebook開発者登録が必要です。開発者登録がされていない場合には https://developers.facebook.com より事前にご登録ください。

アプリの作成手順

この手順は2014年11月現在のものです。Facebook側の仕様変更がされる場合がありますのでご注意ください。

1. 新規アプリを作成画面へ移動します。
上部ナビゲーションのAppから「Add a New App」を選択すると、モーダルウィンドウでプラットフォームの選択画面が表示されます。ここでが「ウェブサイト」を選択します。



2.Quick Start for Website の画面から、新たに作成するAppの名前(任意のもの)を入力して「Create New Facebook App ID」をクリックすると、次の画面へ移動します。



3.「Is this a test version of another app?」は「いいえ」の状態で、対象となるサイトに適したカテゴリを選択して「Create App ID」をクリックして次の画面へ移動します。


4.詳細な作成画面に移動します。ここでは画面下部のフォームからFacebookアカウントでのログインを行うサイトのURLを入力します。



5. Appの登録ができました。画面下部の「次のステップ」の文中にある「Skip to Developer Dashbord」リンクからダッシュボードへ移動します。



6.ダッシュボード画面ではApp ID とApp Secret が確認できます。App Secret は非表示になっていますので、 App Secret 欄右側の「Show」で表示して確認してください。



これで設定に必要な「App ID」「App Secret」が取得できました。
これらの情報のa-blog cmsへの設定は後述します。


Twitter 側の設定

Twitterアカウントを使ったSNSログインのための準備として、a-blog cms の管理ページ>コンフィグ>プロパティ設定 にあるTwitter(SNSログイン用)欄の「API Key」と「API Secret」の2つの情報が必要になります。
この2つの情報は、 独自のTwitterアプリを作成することで入手できます。

アプリの作成手順

この手順は2015年4月現在のものです。Twitter側の仕様変更がされる場合がありますのでご注意ください。

1. Twitter のアプリケーション登録ページ( https://apps.twitter.com )から、申請を行う必要があります。
この時点でログインしているアカウントが表示や投稿に関連づけられます。
画面右側の「Create New App」から新しいアプリケーションの作成を行います。



2.Application Detail の各欄を入力します。

Name、Descriptionにはわかりやすい名前と概要を入力し、Websiteには対象となるa-blog cmsのブログURLを入力してください。
Callback URLには以下の内容を入力してください。


対象となるa-blog cmsのブログURL/callback/signin/twitter.html

画面下部の規約に同意して登録を完了してください。



3.アプリケーションの作成が完了すると、情報の確認や設定の変更ができます。以下の内容を変更してください。


Application Settings内「Access level」

基本のアクセス形式です。初期状態では「Read-only」となっていますので、 (modify app permissions)のリンクから「Read & Write」に変更してください。



Keys and Access Tokens

a-blog cmsとの連携には、このタブで表示される「Consumer Key (API Key)」と「Consumer Secret (API Secret)」が必要になりますのでメモをしておいてください。



Google側の設定

Googleアカウントを使ったSNSログインのための準備として、a-blog cms の管理ページ>コンフィグ>プロパティ設定 にあるGoogle(ログイン)欄の「Client ID」と「Secret Key」の2つの情報が必要になります。

この2つの情報は、GoogleのOAuth クライアント IDを作成することで入手できます。

OAuth クライアント IDの作成手順

1. Google API Console( https://console.developers.google.com/ )から、申請を行う必要があります。この時点でログインしているアカウントに関連づけられます。はじめにヘッダーの「プロジェクトを選択してください」から「プロジェクトの作成...」から新しいプロジェクトを作成を行います。


Google API Consoleの画面

プロジェクトを作成します


2. 認証情報から認証情報作成を行います。左のAPI Managerから「認証情報」を選択します。「認証情報を作成」から「OAuth クライアント ID」を選択します。


認証情報を作成します

「OAuth クライアント ID」を選択します

3. クライアント ID の作成を行います。クライアント ID の作成画面からはじめに同意画面を設定します。「同意画面を設定」からOAuth 同意画面からユーザーに表示するサービス名にサービス名を入力し保存をしてください。


同意画面を設定します

サービス名を入力し保存をしてください

アプリケーションの種類はウェブ アプリケーションを選択し、わかりやすい名前(例:googleOAuthApi)を入力します。承認済みの JavaScript 生成元にGoogleアカウントでログインを行うサイトのURL(http://www.example.com)を入力します。ワイルドカード(http://*example.com)やパス(http://example.com/subdir)を含めることはできませんのでご注意ください。承認済みのリダイレクト URIには以下の内容を入力してください。
対象となるa-blog cmsのブログURL/callback/signin/google.html


ウェブアプリケーションを選択し必要な情報を入力します


4. クライアント ID の作成が完了すると、OAuth クライアントの情報が表示されます。「OK」をクリックするとファイルをダウンロードしないと見れなくなりますので、メモしておいてください。


クライアントIDとシークレットが表示されます


a-blog cms 側の設定

SNSログインのためのa-blog cms側での設定は大きく3つあります。


1. 各サービスのアプリ情報を登録

Facebook、Twitter のアプリ情報は管理ページ>コンフィグ>プロパティ設定 から設定できます。
プロパティ設定画面の「ウェブサービス」からTwitter(SNSログイン用)、Facebookアプリケーション、Google(ログイン)の各情報を登録します。



2. SNSログインのための設定

ブログ全体でのSNSログイン機能と対象についての設定は管理ページ>コンフィグ>機能設定 から行います。



SNSログイン機能のチェックで該当ブログでの機能を有効化します。
SNSログイン使用権限では、SNSログイン機能が使えるユーザー権限を設定します。


3. ユーザーごとの設定

「2. SNSログインのための設定」でブログでのSNSログイン機能を有効にすることで、該当ブログに所属する各ユーザーの管理画面にSNSログインのための項目が表示されるようになります。


Twitterログイン、Facebookログインの各ボタンは、各SNSにログインした状態で認証(または認証解除)することで、ログイン情報とこのユーザーが関連づけされます。
ログイン状態がユーザーに関連づけされますので、この設定は管理者が一括ではなく、各ユーザーが個別に行うものとなります。



認証がされている場合は「認証」ボタンが「認証解除」に変わって表示されます。


各サービスの認証ボタンを押した時、サービスにログインしていない場合は、各サービスの認証画面が表示されます。ここでログインすることで、このユーザーでのa-blog cmsのSNSログインが有効になります。



a-blog cmsを体験してみよう!

お手元のPC、スマートフォンで a-blog cms製Webサイトをご覧いただけます。

メニューの「ログイン」からエントリーの投稿も!

a-blog cms デモサイト