「Twitterでログイン」の認証機能をMicrosoft AzureのApp Serviceにある「認証/承認」で簡単に作れることを知ったのでメモします。

公式ドキュメントは以下です。
https://docs.microsoft.com/ja-jp/azure/app-service/app-service-mobile-how-to-configure-twitter-authentication

試したのはSpring Boot + Thymeleafのアプリです。

Twitter側の準備

まずはTwitterでアプリを登録します。
https://apps.twitter.com/

以下、少し長いですが、既に登録したことがある方は読み飛ばしてください。

「Apply for a developer account」をクリック

Twitterで電話番号を登録していない場合はここで登録が必要です。

Country/regionでJapanを選択して番号を入力

登録した電話番号にVerify codeが来るので入力

進みます(既に電話番号登録されていた方はここから）

誰が使うのか聞かれます。個人利用なのでpersonal useを選択しました。Account nameはTwitterアカウントの@移行を入力。（何でも構いません）

利用するプロジェクトに関する情報を入力します。今回は単なる検証なのでStudent project/Learning to codeとOtherを選択しました。利用用途の説明が最低300文字必要なのが辛いですね…。

利用規約を読んで一番下までスクロールするとチェックボックスが有効となるのでチェックして次に進みます。

設定は以上で、Twitterアカウントの登録メールアドレスへVerifyメールが来るのでメールにあるボタンをクリックしてVerifyします。

ここからCreate an Appを押してアプリの登録へ進みます。

アプリ情報を入力します。Website URLとCallback URLはAzureにデプロイした後にわかるので、この時点では適当なものを入れて登録しておきます。

以上で準備完了です。

App Serviceの設定

Twitterの準備ができたらApp Serviceの設定を行います。

今回サンプルに使ったコードは次に置いてます。
https://github.com/kikutaro/AzureAuthSpringBoot

前に書いた「Spring Boot on Microsoft Azure」のWebアプリをベースにしています。Thymeleafの依存性を入れてindex.htmlに以下の定義を加えた程度です。

<p><a th:href="@{'/.auth/login/twitter'}">Twitter Login</a></p>
<p><a th:href="@{'/.auth/logout'}">Twitter Logoff</a></p>

cloneしたアプリをビルドしてデプロイします。

az login

.\mvnw.cmd clean package

.\mvnw.cmd azure-webapp:deploy

デプロイが終わったらApp Serviceの設定にある「認証/承認」をクリックして、「オフ」を「オン」に切り替えます。

「オン」にすると認証プロバイダが表示されるので、Twitterを選択します。

するとAPIキーとAPIシークレットを求められるので再びTwitterの設定に戻ります。

登録したアプリからAPIキーとAPIシークレットをコピーして先ほどのAzureの設定画面にペーストして保存します。

続けて、先ほど適当なURLを入力していた部分にデプロイされたアプリのURLを設定します。Azureで発行されたURLをコピーします。

TwitterのsettingでWebsiteにURLを入れ、Callback URLsに「発行されたURL/.auth/login/twitter/callback」と設定します。

以上で設定完了です。

動作確認

動作確認をします。デプロイで発行されたURLにアクセスすると次のようなページが表示されるので、まずは、1つ目の「Check Body & Header」をクリックします。

すると以下のような表示となります。

Javaのコードでは次のようにリクエストボディとリクエストヘッダを出力するように記述しているので、上記のようにヘッダの内容が出力されました。

@GetMapping("/check")
public String check(@RequestBody(required = false) String body, @RequestHeader(required = false) HttpHeaders headers, Model model) {
    model.addAttribute("return", "This is from server side.");
    if(body != null) {
        model.addAttribute("body", body);
    }
    if(headers != null) {
        model.addAttribute("headers", headers);
    }
    return "check";
}

ここで戻って、今度は「Twitter Login」のリンクをクリックします。すると以下の認証画面が表示されるので、「連携アプリを認証」してください。

しばらくすると次のページが表示されます。Twitterでログインができたようです。RETURN TO THE WEBSITEで戻れるので戻ってみます。

戻ったら再度「Check Body & Header」を押します。

するとTwitterで認証された後の今度はリクエストヘッダが色々増えていることがわかります。ここでTwitterのアカウントなどの情報から、Twitterのaccess token、access token secretがヘッダから渡ってきます。

以上でTwitterログインが実現できました。認証後のページがAzureのデフォルトになっているので次はそこを変える方法を調べてみたいと思います。