ASP.NET Identity入門

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

ASP.NET Identity入門第9回

2015/03/04 14:00

ポスト

外部ログインサイトの表示

　Startup.Auth.csファイルに変更を加えると、ログイン画面に外部ログイン用の「Twitter」ボタンが表示されるようになります。この「Twitter」ボタンの実体はAccout/OpenAuthProviders.acsx（.cs）ファイルによって定義されたユーザーコントロールで、このコントロールをクリックすることで、Page_Loadイベントハンドラーに記載された外部ログイン処理が行われます（リスト3）。

リスト3　外部ログイン実行（Account/OpenAuthProviders.ascs.cs）

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）。

リスト4　Twitterのスクリーン名をユーザー名にする（Account/RegisterExternalLogin.aspx.csより）

～（略）～
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　ログイン画面

　すると、Twitterの認証画面に移動するので、Twitterのユーザー名、パスワードを入力後、「連携アプリを認証」ボタンをクリックします（図9）。

図9　Twitterの認証画面

　Twitter側で認証が行われた後、Twitterの認証情報が元のWebアプリケーションに渡されて、メールアドレスを入力する画面が表示されます。Twitterでの認証はあくまで「認証」だけ行い、ユーザーの管理自体はWebアプリケーションで行う仕組みになっていますので、使用するメールアドレスを入力して「ログイン」ボタンをクリックします（図10）。

図10　メールアドレスの入力

　その後ログインが行われ、ユーザー名にTwitterのスクリーン名が表示されます（図11）。

図11　ユーザー名の表示

まとめ

　今回は外部のソーシャルアカウントを使ったログイン方法について学びました。内容をまとめると次のようになります。

「外部ログイン」はTwitterやFacebookなどの外部サービスに認証を委譲する
外部ログインを有効にするにはStartup.Auth.csにてapp.Use(外部サービス名)Authenticationメソッドを呼び出す
- メソッドに渡すkey、secretは外部サービス側でアプリケーションを登録して発行する
外部ログインサイトの表示は、OpenAuthProvider.ascsユーザーコントロールの内部で実行される
外部サービスの識別情報は「クレーム」として設定されている
- 取り出してユーザー名に使用する、といったこともできる

　今回までで、一通り既定で用意された認証方法については紹介が終わりました。次回は登録されたユーザーを管理する方法について紹介しようと思います。お楽しみに。

参考資料

この記事は参考になりましたか？

連載通知を行うには会員登録(無料)が必要です。
既に会員の方はを行ってください。

印刷用を表示

ポスト

ASP.NET Identity入門連載記事一覧: ASP.NET 5に向けて知っておきたい、最新のASP.NET Identityのポイント

ASP.NET Identityで任意のデータストアを使う

ASP.NET Identityで独自の認証処理を行う

もっと読む

この記事の著者: 山田祥寛（ヤマダヨシヒロ）

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ（Java・C#・Python・PHP・Ruby・JSP＆サーブレットなど）」「速習シリーズ（ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど）」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編」他、著書多数。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事; WINGSプロジェクト　高野将（タカノショウ）

＜個人紹介＞新潟県長岡市在住の在宅リモートワークプログラマー。家事や育児、仕事の合間に長岡IT開発者勉強会(NDS)、Niigata.NET、TDDBCなどのコミュニティに関わったり、Web記事や書籍などの執筆を行ったりしている。著書に『アプリを作ろう！ Visual C#入門 Visual C# 2017対応』（日経BP社、2017）など。＜ WINGSプロジェクトについて＞有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ（代表山田祥寛）。主にWeb開発分野の書籍／記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書、記事多数。 RSS X: @WingsPro_info （公式）、 @WingsPro_info/wings （メンバーリスト） Facebook

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この著者の最近の執筆記事