Azure WebApps でお手軽SNS認証設定をしよう

こんにちは。まーやです。
便利だな~と思った機能第二弾のブログです。今回はSNS認証編です。

e0b70034-f511-8b09-a4e4-e9db43859b0e1解説に使うシステム

今回は「チャットルームシステムを構築する」という形で2つの機能の解説を進めていきたいと思います。投稿でのシステムの流れは次のとおり。

  1. サーバに接続したとき(チャットルームにアクセスしたとき)にSNS認証が行われる
  2. 認証OK後チャットをスタートする
  3. チャットルームの過去情報取得APIをたたいて会話履歴が表示される

システム構成↑に書いたシステムをざっくり図化するとこんな感じ。Azure Webapps 2台で運営することにします。チャットルームへのログインに使う認証処理も、自前でつくれるやん、と言われればその通りですが、SNS認証ならすでに認証基盤が各SNSに用意されているわけですから厄介な認証システムを作る手間を軽減することができます。それってシステム構築側としてはとてもハッピーなことだと思いませんか。

SNS認証設定

Azure WebAppsではサーバへの接続リクエストがあった時点でSNS認証システムを稼働させることが出来ます。自前のユーザIDとパスワードで認証しないとダメ、というシステムでない限りは有効な認証システムとなるかもしれない。がっちり認証というよりはライトな認証システムとして使うか、がっちりシステムの導入としてつかうか、というかんじですね。

WebAppsのデフォルトでは次の5つ認証が用意されています(一部SNSではないですが、同様に設定して使うことが出来ます)。

  • Facebook
  • Google+
  • Twitter
  • (Microsoftアカウント)
  • (Azure Active Directory)

社内向けシステムのログイン、とかであればAzure Active Directoryを使うのがよさそうですね。が、今回はSNS認証機能として紹介しているので、試しにFacebookで認証できるようにしたいと思います。

SNS認証を行うメリット

私が考える限りだと次のようなメリットを上げることが出来ます。

  1. 認証システムの作成が不要になるので運用対象のコードがすっきり。運用対象の削減ができる
    この認証設定機能を使うことで、そもそも自前の認証システムの作成がほぼいらなくなります(※1)。つまり運用対象の(しかもかなり重要な運用保守が必要となる)コードが削減できるわけですから、開発だけでなく運用面でもメリットがあるといえるでしょう。
  2. 誰がどのSNSのアカウントで接続してきたかの情報がとれるので、マーケティング戦略も立てやすい(かもしれない)
    どのSNSのユーザ情報を使って認証したかという情報を得ることで、そのシステムの利用者の分布が見えやすくなります。そこからマーケティング的な知見や施策を見いだせるかもしれません。
    e.g.)Twitterアカウントでログインしてる人が多いのでTwitterに広告を出してみよう、とか。

WebAppsのSNS認証設定機能を使うメリット

「認証処理がほぼコードレスに!」です(※1)。ダッシュボードから設定するだけで、SNS認証処理が発動しますので、この部分に関してはコードを書かなくてよくなります。とにかくお手軽に認証処理ができるわけです。ただし、SNS側の利用設定は必要なのでご注意を(デベロッパーサイトのダッシュボードから設定するだけでOKなことが多いです)。

実際に設定してみる

では早速実際に設定してみましょう。
まず事前にSNS認証に使いたいSNSの開発者登録を行い、各種キーやアプリIDを取得します。
先ほど今回はFacebook認証をしてみる、とお話ししていましたので、Facebookのdeveloper登録をしてアプリID、アプリケーションシークレットを取得します。取得方法についてはネット上にあちこち落ちてますので、そちらを使って作成してみてください(例えばこちらの記事など)。
ここではすでにFacebookアプリIDとシークレットキーが取得できたものとして進めます。

  1. 認証をかけたいWebAppsサーバ(今回の場合はNode.js&html5/JSがのっているサーバ)を選択し、メニューから「認証/承認」を選択します。デフォルトではApp Service認証がオフになっていると思いますので、これをオンにします。8cbb1601-c676-c448-225f-8ae733953446
  2. 認証できなかった場合の挙動の設定を選択します。ここには必ずこのアカウントがないと困る!というSNSアカウントを設定しておくといいと思います。SNS認証が出来なかった場合は別の認証をさせたい(例えば自前の認証システムを通ってもらうなど)場合は、要求の許可を選択しておけばよいと思います。そのあと、SNS認証させたい項目を選択します。今回の場合はFacebookです。5cdc154e-6cf2-033e-c40a-efc00b875b41
  3. Facebook developerサイトで発行されたアプリIDとアプリケーションシークレットを設定し、Facebookからどんな情報を受け取るかを選択します。情報の取得範囲の説明はこのページに書いてありますので、慎重に選択しましょう。取得範囲設定は複数選択も可能です。設定したら一番下にあるOKボタンを押すのを忘れずに。c96903fd-309c-da9b-8118-a2d34b49f0ba
  4. OKボタン押下後、↓のように「構成済み」と表示されたら保存ボタンを押してSNS認証処理作成完了。7bc7d68f-2728-c89c-930b-9d6f0d6322fc
  5. 認証してみよう!サイトにアクセスしてみます5d369025-23b7-8f2a-21ae-8433f30af563385af1b2-7646-a7f6-7718-6bf9f2910e38

できました。簡単ですね。

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中