読者です 読者をやめる 読者になる 読者になる

なか日記

一度きりの人生、楽しく生きよう。

ASP.NET Identity:Twitter認証でログインする方法

ASP.NET

ASP.NET Identity によりWebサイトへのログインをTwitterFacebook,Google+等の認証で行う事が簡単にできるようになってます。

f:id:nakaji999:20140911012329p:plain

実は、今まで使ったことなかったのですが、ちょっと真面目に使ってみようと思います。

諸事情により、今回はTwitterでの認証を行ってみたいと思います。

プロジェクトの作成

ASP.NETプロジェクトを作成します。

f:id:nakaji999:20140911015813p:plain

「認証の変更」で「個人ユーザー アカウント」を選択しておきます。

f:id:nakaji999:20140911015820p:plain

プロジェクトの作成が終わったら、一度デバッグ実行してポートを確認しておくといいと思います。

Twitterアプリの準備

まずはTwitterAPIが使えるようにアプリケーションを登録しておく必要があります。下記サイトにアクセスします。

アプリケーションの登録

トップページから「Create New App」ボタンを押してアプリケーションを作成します。

f:id:nakaji999:20140911020654p:plain

まずはデバッグ実行で確認するので以下のようにしておきます。アドレス部分を localhost にすると登録時にエラーになりますので、127.0.0.1 にしておく必要があるので注意して下さい。

Website : http://127.0.0.1:64003/
Callback URL : http://127.0.0.1:64003/Account/ExternalLoginCallback

Callback URLについては、AccountControllerに用意されているメソッドが呼び出されてるようにしておきます。

Twitterでの認証を許可する

登録ができたら「Settings」タブの「Allow this application to be used to Sign in with Twitter」にチェックを入れておきます。

f:id:nakaji999:20140911021628p:plain

APIキー等を確認

次に「API Keys」タブを開いて API key と API secret の値を控えておく必要はないですが、後で参照するので気に留めておく程度でいいです。

Twitterでの認証を有効にする

App_Start\Startup.Auth.cs を開きます。

そして、以下のようにコメントアウトされているTwitterに関する部分を有効にして、consumerKey と consumerSecret に先ほど確認した API key と API secret の値をセットします。

// 次の行のコメントを解除して、サード パーティのログイン プロバイダーを使用したログインを有効にします
//app.UseMicrosoftAccountAuthentication(
//    clientId: "",
//    clientSecret: "");

//app.UseTwitterAuthentication(
//   consumerKey: "",
//   consumerSecret: "");

//app.UseFacebookAuthentication(
//   appId: "",
//   appSecret: "");

//app.UseGoogleAuthentication(new GoogleOAuth2AuthenticationOptions()
//{
//    ClientId = "",
//    ClientSecret = ""
//});

こんな感じですね。

app.UseTwitterAuthentication(
   consumerKey: "{API key の値}",
   consumerSecret: "{API secret }");

動作確認

以上でやらないといけないことは終わりです。さっそく実行してみましょう。

画面右上の「ログイン」をクリックするとエントリの最初に貼り付けていた画面に遷移しますので、「Twitter」と書かれているボタンを押すと見覚えのある画面が表示されます。

f:id:nakaji999:20140911023532p:plain

「ログイン」ボタンを押すと呼び出し元のアプリケーションにリダイレクトされて以下の画面が表示されます。

f:id:nakaji999:20140911023724p:plain

Twitterで認証はしたけど、あくまでユーザ管理の基本はユーザID(メールアドレス)が必要ですよ。ということですね。

いわれるがままにメールアドレスを登録するとサイトへのログインが完了します。

f:id:nakaji999:20140911024326p:plain

ねっ、簡単でしょう?

次回*1はこの認証情報を使ってツイートしてみたいと思います。

*1:そのうち書くと思う