Twitter連携 - チュートリアル的なもの

RealPath:

WebPath:

2018/08/12 10:29 (JST) 更新

チュートリアル的なもの >>

ASP.NET MVC プロジェクトにおける Twitter 連携の実装の仕方を紹介します。（かなり楽です）

Twitter アプリの各種キーについて

先に Twitter アプリの Consumer Key (API Key) と Consumer Secret (API Secret) を取得しておく必要があります。

参考: Twitter連携準備

ソースコードの編集

App_Start/StartupAuth.cs の app.UseTwitterAuthentication がコメントアウトされている箇所を以下のように書き換えます。

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

↓

app.UseTwitterAuthentication(new TwitterAuthenticationOptions
{
    ConsumerKey = "取得済みのConsumerKey",
    ConsumerSecret = "取得済みのConsumerSecret",
    BackchannelCertificateValidator = new CertificateSubjectKeyIdentifierValidator(new[]
    {
        "A5EF0B11CEC04103A34A659048B21CE0572D7D47", // VeriSign Class 3 Secure Server CA - G2
        "0D445C165344C1827E1D20AB25F40163D8BE79A5", // VeriSign Class 3 Secure Server CA - G3
        "7FD365A7C2DDECBBF03009F34339FA02AF333133", // VeriSign Class 3 Public Primary Certification Authority - G5
        "39A55D933676616E73A761DFA16A7E59CDE66FAD", // Symantec Class 3 Secure Server CA - G4
        "add53f6680fe66e383cbac3e60922e3b4c412bed", // Symantec Class 3 EV SSL CA - G3
        "4eb6d578499b1ccf5f581ead56be3d9b6744a5e5", // VeriSign Class 3 Primary CA - G5
        "5168FF90AF0207753CCCD9656462A212B859723B", // DigiCert SHA2 High Assurance Server CA
        "B13EC36903F8BF4701D498261A0802EF63642BC3" // DigiCert High Assurance EV Root CA
    })
});

作業は以上で完了です。

動作確認

上記手順により app.UseTwitterAuthentication を有効にすると、ログイン画面に Twitter ボタンが出現します。これを押すと Twitter 認証画面に飛びます。
img--700--size

　
Twitter アプリ情報が表示され、認証を求められます。
img--700--size

　
Twitter 認証が済むと、元のサイトにリダイレクトされ、メールアドレスの入力のみ求められます。（ここはユーザが手動で入力する）
img--700--size

　
登録が済みました。画面右上の表示が「Hello <ユーザ名>」に変わっています。
img--700--size

データを見てみる

Server Explorer によりDBテーブルを覗いてみます。
データ構造に深くは踏み込みませんが、AspNetUserLogins というテーブルに Twitter 連携情報が保存されていることが分かります。
img--600--size