Googleアカウントを使ったログイン・サインアップ

GoogleのAPIを使用してログインするログイン機能があります。この機能を利用することで簡単にa-blog cmsへログインすることができる様になります。またサインアップ機能(読者登録)も対応していますので、読者登録を実装されている場合は有効なカスタマイズになります。

Google API Consoleでの設定

Googleアカウントを使ったログインのための準備として、a-blog cms の管理ページ>コンフィグ>ログイン設定 にあるGoogleの「Client ID」と「Secret Key」の2つの情報が必要になります。この2つの情報は、GoogleのOAuth クライアント IDを作成することで入手できます。


Google API 「Client ID」「Secret Key」設定画面

Google API 「Client ID」「Secret Key」設定画面

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

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


プロジェクトの作成

プロジェクトの作成


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

  • アプリケーションの種類: ウェブアプリケーション
  • 承認済みの JavaScript 生成元: Googleアカウントでログインを行うサイトURL(http://www.example.com)を入力
  • 承認済みのリダイレクト URI: 対象となるa-blog cmsのブログURL/callback/signin/google.html

作成すると、クライアントIDクライアントシークレット が表示されます。後で使うのでメモしておきましょう。また認証情報になりますので、外部にもれないように気をつけて下さい。


認証情報の作成

認証情報の作成


3.同意画面を設定します。認証情報 > OAuth同意画面から設定してください。サービス名は必須項目です。


OAuth同意画面の設定

OAuth同意画面の設定


a-blog cms 側の設定

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

1. 認証情報を登録

管理ページ > コンフィグ > ログイン設定 から設定できます。先ほどメモした「Client ID」 を Client IDに 「Client Secret」を Secret Keyに入力してください。


Google API 「Client ID」「Secret Key」設定画面

Google API 「Client ID」「Secret Key」設定画面

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

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

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


SNSログインの有効化

SNSログインの有効化

3. ユーザーごとの設定

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

https://example.com/mypage/update-profile/

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


ユーザー管理でSNSと関連づけます

ユーザー管理でSNSと関連づけます


ログイン

ここまでの設定が行われていれば、ユーザーID、パスワードを入力しなくても、Googleのログインボタンからログインできるようになります。ログイン画面を表示すると、通常のユーザーID、パスワードの入力欄の下に、Googleのログインボタンが表示されます。


管理ログイン画面の場合

管理ログイン画面の場合


一般サインイン画面の場合

一般サインイン画面の場合