外部アカウントを使ったログインをASP.NET Identityで実現する

ASP.NET Identity入門 第9回

　最近TwitterやGitHubなどのアカウントを使ってログインできるWebサービスをよく見るようになりました。連載の第9回となる今回は、この外部アカウントを使ったログインをASP.NET Identityを用いて実現する方法について紹介します。

外部ログインとは

　最近Webサービスを利用していると、TwitterやGitHub、Facebook、Googleなどのアカウント情報を使ってログインできるサービスをよく見るようになりました。例えば、プログラミング情報の投稿サイトである「Qiita」では、GitHubとTwitterのどちらかのアカウントでログインできるようになっていて、Qiita側にパスワードを登録しなくても利用できます。

　こういった外部のソーシャルアカウントを使ったログイン方法を、ASP.NET Identityでは「外部ログイン」または「外部認証」と呼んでいます。外部ログインは、本連載の第1回でも紹介した通り、ASP.NET Identityを開発した動機の一つでもあり、バージョン1.0のころからサポートしています。

　外部ログインを利用することで、次のようなメリットがあります。

パスワードを持たなくてよい

　外部サービスに認証処理を委譲するため、アプリケーション自体で認証のためのパスワードを持たなくてよくなります。したがって、その分セキュリティ上も有利になります。

外部サービスのアカウント情報が使える

　ログインした外部サービスのアカウント情報を、ある程度自由に使えるようになります。例えば、表示する「ユーザー名」にTwitterのユーザー名を使う、といったことができるようになります。

　今回はTwitterを例にして、外部ログインの説明を行っていきます。FacebookやGoogle等のサービスでも、ほぼ同じようなイメージで動作しますので、Web検索等で調べてみてください。

　なお、今回から「Visual Studio Community」を使ってサンプルの作成、説明を行っていきますので、ご了承ください。

外部ログインの動作イメージ

　Twitterを例とした動作イメージを図1に示します。

図1　外部ログインの動作イメージ

1. 外部ログイン要求

　ログイン画面に追加された「別のサービスを使用してログインします。」欄の下にある「Twitter」ボタンをクリックすることで、Twitterを使用してログインすることを要求します。この時、Twitter側には事前に設定しておいた「Consumer Key」と「Consumer Secret」が送信されます。

2. 外部サービスでの認証

　Twitterのアプリ認証画面にて「連携アプリを認証」ボタンをクリックし、Twitter側で認証します。

3. メールアドレス入力

　元のアプリケーションに戻ってくるので、Twitterを使用してログインするユーザーの「メールアドレス」を入力してから「ログイン」ボタンをクリックし、ログインを完了します。この時、Twitterによる認証情報を読み取り、アプリケーション側のユーザー情報等に使うことができます。

Webアプリケーションの作成

　それでは、順に外部ログインを行う方法について説明していきましょう。まず、これまでの連載と同様に、Visual Studioを起動して新しいプロジェクトを「ASP.NET Webアプリケーション」の「Web Forms」として作成します。サンプルではプロジェクト名を「ExternalLoginSample」としています。

　プロジェクトを作成したら、この後のTwitter側の設定で使いますので、プロジェクトのプロパティの「開発サーバー」→「URL」を控えておきましょう（図2）。

図2　開発サーバーのURL