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 より事前にご登録ください。

アプリの作成手順

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

1. Facebook の Devdlopersアカウントを作成します。
上部ナビゲーション「スタート」から、アカウントを作成します。
「Facebook for Developersアカウントを作成しよう」の下にある「次へ」から、アプリの登録画面へ移行します。



2.アプリ情報を入力します。
アプリ名、メールアドレスを登録し「Next」ボタンをクリックします。次に自分に当てはまる役割についてのアンケートに答えます。



3.「Add Your First Product」から、アプリダッシュボードに移動します。



4.ダッシュボード左にあるサイドバーの「設定」→「ベーシック」にて アプリIDapp secret を確認します。app Secret は非表示になっていますので、 app Secret 欄右側の「表示」で表示して確認してください。



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


Twitter 側の設定

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

アプリの作成手順

この手順は2018年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.アプリケーションの作成が完了すると、情報の確認や設定の変更ができます。以下の内容を確認してください。


Keys and Access Tokens

「Keys and Access Tokens」タブの「Access level」が、「Read and write」となっていることを確認してください。これが基本のアクセス形式となります。


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 APIとサービス」から「認証情報」を選択します。「認証情報を作成」から「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(ログイン)の各情報を登録します。今回TwitterについてはSNSログインのために設定を行いますので、Twitter(SNSログイン用)に登録します。なお、Twitterアプリケーションの欄はSNSログイン以外の用途で使いたい時のためのものとなります。



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 デモサイト