外部ログインサイトの表示
Startup.Auth.csファイルに変更を加えると、ログイン画面に外部ログイン用の「Twitter」ボタンが表示されるようになります。この「Twitter」ボタンの実体はAccout/OpenAuthProviders.acsx（.cs）ファイルによって定義されたユーザーコントロールで、このコントロールをクリックすることで、Page_Loadイベントハンドラーに記載された外部ログイン処理が行われます（リスト3）。
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
var provider = Request.Form["provider"];
if (provider == null)
{
return;
}
// 外部ログイン プロバイダーへのリダイレクトを要求します
string redirectUrl = ResolveUrl(String.Format(CultureInfo.InvariantCulture, "~/Account/RegisterExternalLogin?{0}={1}&returnUrl={2}", IdentityHelper.ProviderNameKey, provider, ReturnUrl));
var properties = new AuthenticationProperties() { RedirectUri = redirectUrl };
// アカウントをリンクするときに xsrf の検証を追加します
if (Context.User.Identity.IsAuthenticated)
{
properties.Dictionary[IdentityHelper.XsrfKey] = Context.User.Identity.GetUserId();
}
// 外部ログインサイトを表示する
Context.GetOwinContext().Authentication.Challenge(properties, provider);
Response.StatusCode = 401;
Response.End();
}
}
OwinContextのAuthenticationプロパティのChallengeメソッドを呼び出すことで、provider引数で指定した外部ログインサービスの認証ページに遷移します。
ユーザー名としてTwitterのスクリーン名を表示する
せっかくTwitterを認証に使うのですから、Twitterの情報もWebアプリケーションで活用してみましょう。ここでは、ログイン後に表示されるユーザー名を、Twitterのスクリーン名に変更してみましょう。
やり方は、Twitterで認証後に実行されるユーザー登録処理の中で、ユーザー名を既定の画面で入力させるメールアドレスではなく、Twitterから渡された識別情報に含まれる「スクリーン名」に変更します（リスト4）。
～（略）～
private void CreateAndLoginUser()
{
if (!IsValid)
{
return;
}
var manager = Context.GetOwinContext().GetUserManager<ApplicationUserManager>();
var signInManager = Context.GetOwinContext().GetUserManager<ApplicationSignInManager>();
// Twitterのscreen_nameを取得する
var identity = Context.GetOwinContext().Authentication.GetExternalIdentity(DefaultAuthenticationTypes.ExternalCookie);
var screenNameClaim = identity.Claims.FirstOrDefault(claim => claim.Type == "urn:twitter:screenname");
var screenName = screenNameClaim.Value;
var user = new ApplicationUser() { UserName = screenName, Email = email.Text };
IdentityResult result = manager.Create(user);
～（略）～
}
まず、OwinContextのAuthenticationプロパティのGetExternalIdentityメソッドを使い、外部ログインで設定された識別情報を取得します。次に、その識別情報に「クレーム」として各種の情報が設定されているので、対象クレームのキーを指定してスクリーン名を取り出します。最後に、ApplicationUserクラスのインスタンスを作成する際、ユーザー名に取得したスクリーン名を指定します。
「クレーム（claim）」とは「要求」とも呼ばれ、認証等に必要な各種の情報を、キーと値の組み合わせのコレクションで表したものです。ASP.NET Identityは「クレームベース」の認証で、認証で使われる各種の情報は、この「クレーム」として内部で読み書きされています。
今回取得したTwitterのスクリーン名では、キーが"urn:twitter:screenname"であり、これは「URN（Uniform Resorce Name）」形式で指定された、「Twitterのスクリーン名」を表しています。
以上で、Twitterを使った認証を行う準備が整いました。
動作確認
それでは実際に動作を確認してみましょう。Visual Studioにてデバッグ実行後に「ログイン」画面を表示し、「別のサービスを使用してログインします。」欄の「Twitter」ボタンをクリックします（図8）。
すると、Twitterの認証画面に移動するので、Twitterのユーザー名、パスワードを入力後、「連携アプリを認証」ボタンをクリックします（図9）。
Twitter側で認証が行われた後、Twitterの認証情報が元のWebアプリケーションに渡されて、メールアドレスを入力する画面が表示されます。Twitterでの認証はあくまで「認証」だけ行い、ユーザーの管理自体はWebアプリケーションで行う仕組みになっていますので、使用するメールアドレスを入力して「ログイン」ボタンをクリックします（図10）。
その後ログインが行われ、ユーザー名にTwitterのスクリーン名が表示されます（図11）。
まとめ
今回は外部のソーシャルアカウントを使ったログイン方法について学びました。内容をまとめると次のようになります。
- 「外部ログイン」はTwitterやFacebookなどの外部サービスに認証を委譲する
-
外部ログインを有効にするにはStartup.Auth.csにてapp.Use(外部サービス名)Authenticationメソッドを呼び出す
- メソッドに渡すkey、secretは外部サービス側でアプリケーションを登録して発行する
- 外部ログインサイトの表示は、OpenAuthProvider.ascsユーザーコントロールの内部で実行される
-
外部サービスの識別情報は「クレーム」として設定されている
- 取り出してユーザー名に使用する、といったこともできる
今回までで、一通り既定で用意された認証方法については紹介が終わりました。次回は登録されたユーザーを管理する方法について紹介しようと思います。お楽しみに。
