tekitoumemo’s diary

思ったことを書くだけ。長文版Twitter

トップ > ASP.NET Core > ASP.NET CoreのTwitter認証と会員機能を作った理由

ASP.NET CoreのTwitter認証と会員機能を作った理由

ASP.NET Core

f:id:tekitoumemo:20190104232825p:plain
みんなの洋楽ランキングにSNS認証（Twitter、Facebook、Google）を追加しました。今回は外部ログインのセットアップとTwitter認証を説明をします。今回は2019年1月現在のやり方なので今後変わるかもしれません。

まずは審査から

最近は審査が厳しいので、以前書いた記事を参考にしてください。英語が全く出来ない僕でも審査が通ったので手順を踏めば誰でも取れるはずです。
tekitoumemo.hatenablog.com

.NET Coreの外部ログインのセットアップ

Twitter Developerを設定する

ほとんど以下に載っています。
docs.microsoft.com
2018/08からcallbackに設定しなければいけないので以下のように設定します。
f:id:tekitoumemo:20190104235030p:plain
デフォルトのcallback urlは「signin-twitter」です。これ間違えると403になります。またこのセットアップ方法を使う場合はhttpでリダイレクトするのでhttpにしないとエラーになります。僕は対策済みなのでhttpsですが、こちらは次回のFacebookログインで説明します。

Startupに登録

ConfigureServicesに以下を追加

services.AddAuthentication(options =>
{
    options.DefaultChallengeScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.DefaultSignInScheme = CookieAuthenticationDefaults.AuthenticationScheme;
    options.DefaultAuthenticateScheme = CookieAuthenticationDefaults.AuthenticationScheme;
})
.AddTwitter(twitterOptions =>{
    twitterOptions.ConsumerKey = "your_apikey";
    twitterOptions.ConsumerSecret = "your_sercret_key";
});

AddAuthenticationはcookie 認証スキームにしています。ここら辺はすきな方法で良いかと思います。認証キーはhttps://developer.twitter.comから取得してください。

Configureに以下を追加

app.UseAuthentication();

認証用のControllerを作成

ログイン

IAuthenticationSchemeProviderをインジェクションします。

public class AuthController : Controller
{
        private IAuthServices _authServices;

        public AuthController (IAuthenticationSchemeProvider authenticationSchemeProvider) {
            _authenticationSchemeProvider = authenticationSchemeProvider;
        }
    public IActionResult Login()
    {
    }
}

Viewも作ります。

// これか
<a asp-action="SignIn" asp-route-provider ="Twitter">Twitter</a>
// これでもおけ
<a href="/auth/signin?provider=Twitter">Twitter</a>

サインイン

public IActionResult SignIn (string provider) {
    return Challenge (new AuthenticationProperties { RedirectUri = "/" }, provider);
}

providerは「Twitter」などSNSの名称が割り当てられます。RedirectUriはサインイン後のリダイレクト先でcallbackurlとは違うのでご注意を。

サインアウト

public async Task<IActionResult> SignOut () {
    await HttpContext.SignOutAsync (CookieAuthenticationDefaults.AuthenticationScheme);
    return RedirectToAction ("Index", "Home");
}

returnは適当に設定して下さい。

認証後の確認

以下で認証しているか確認できます。

Request.HttpContext.User.Identity.IsAuthenticated

さらに認証で取得した情報は以下で確認できます。

Request.HttpContext.User.Claims

TwitterだとEmailは取得できません。が、取得できる方法がありそうなので興味ある人は調べてみてはいかがでしょう。

認証後のそのほか

AuthorizeAttributeなどRoleベースの説明をすると長くなるのでこちらはまた別の機会で説明します。僕の場合は会員に権限（Role）をつけて、管理者のみ管理画面を使えるようにしています。

最後に会員認証を追加したきっかけを話します（自己満）

追加したきっかけ

自分たちで記事を書くのに限界を感じたので、ユーザーさんに記事を書いてもらいたいなぁと思いアンケートをとりました。アンケートの結果、記事を書いても良いと言う意見が100%（もちろん対価を得たいという意見が多いですが）だったので、ユーザーさんが記事をかける環境が必要でした。
f:id:tekitoumemo:20190104234001p:plain
Wikiみたく誰でもかける環境にしてもよかったのですが、自分の名前を出さない事により記事の質が下がる懸念と会員からユーザーのコミュニティに広げられそうな可能性を感じ認証を作りました。SNS認証のみ作成した理由は、メアド会員自体、時代に反している気がして僕自身SNS認証がないサイトは使いたくなかったです。ただ、やってるうちに必要か不必要か判断できるようになるので必要になったら追加しようと思います。

次回はFacebookログインを書きます
tekitoumemo.hatenablog.com