外部ログインサイトの表示
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)。
![図8 ログイン画面](http://cz-cdn.shoeisha.jp/static/images/article/8463/8463_8.gif)
すると、Twitterの認証画面に移動するので、Twitterのユーザー名、パスワードを入力後、「連携アプリを認証」ボタンをクリックします(図9)。
![図9 Twitterの認証画面](http://cz-cdn.shoeisha.jp/static/images/article/8463/8463_9a.gif)
Twitter側で認証が行われた後、Twitterの認証情報が元のWebアプリケーションに渡されて、メールアドレスを入力する画面が表示されます。Twitterでの認証はあくまで「認証」だけ行い、ユーザーの管理自体はWebアプリケーションで行う仕組みになっていますので、使用するメールアドレスを入力して「ログイン」ボタンをクリックします(図10)。
その後ログインが行われ、ユーザー名にTwitterのスクリーン名が表示されます(図11)。
![図11 ユーザー名の表示](http://cz-cdn.shoeisha.jp/static/images/article/8463/8463_11.gif)
まとめ
今回は外部のソーシャルアカウントを使ったログイン方法について学びました。内容をまとめると次のようになります。
- 「外部ログイン」はTwitterやFacebookなどの外部サービスに認証を委譲する
-
外部ログインを有効にするにはStartup.Auth.csにてapp.Use(外部サービス名)Authenticationメソッドを呼び出す
- メソッドに渡すkey、secretは外部サービス側でアプリケーションを登録して発行する
- 外部ログインサイトの表示は、OpenAuthProvider.ascsユーザーコントロールの内部で実行される
-
外部サービスの識別情報は「クレーム」として設定されている
- 取り出してユーザー名に使用する、といったこともできる
今回までで、一通り既定で用意された認証方法については紹介が終わりました。次回は登録されたユーザーを管理する方法について紹介しようと思います。お楽しみに。