Auth0でTwitterを使ってログインする

以前にAuth0を使ったログインの実装を試しましたが、ここにTwitterでのログイン機能を追加してみます。

Twitterでの設定

まずはTwitter側での設定を行います。
Twitter APIの使用前の準備(申請)に関しては以前に記事を投稿していますので、そちらをご確認ください。

Twitter developer portalにアクセスして、Create Projectをクリックします。

プロジェクト名を入力します。

利用事例を選択します。

プロジェクトの説明を入力します。

アプリ名を入力します。

API KeyとAPI Secret Keyを後ほど使用するのでコピーしておきます。
コピー後、App settingsをクリックします。

Settings > Authentication settings のEditをクリックします。

Enable 3-legged OAuthを有効にします。

Enable 3-legged OAuthを有効にするとその下のCallback URLsとWebsite URLが入力できるようになるので、それぞれ入力します。
Auth0でカスタムドメインを使用していない場合、Callback URLsにhttps://【テナント名】.us.auth0.com/login/callback、Website URLにhttps://【テナント名】.us.auth0.com/を設定します。
【テナント名】部分はAuth0の管理画面から確認して変更してください。

変更後、Saveをクリックして設定完了です。

Auth0での設定

次にAuth0での設定を行います。
Auth0のダッシュボードにアクセスして、左メニューのAuthentication > Socialを選択します。

Create Connectionをクリックします。

検索窓でtwitterと検索して、検索結果に表示されるTwitterを選択します。

Continueをクリックします。

Consumer API keyに先ほどコピーしたAPI Key、Consumer API secret keyにAPI Secret Keyを設定して、Createをクリックします。

Applicationsタブを選択して、Twitterでのログインを使用したいアプリで有効にします。

これで設定完了なので、動作テストを行ってみます。
右上のTry Connectionをクリックします。

Twitterの認証画面に遷移するので、連携アプリを認証をクリックします。

It Works!と表示されたらOKです。

Auth0での実際のログイン画面を確認すると、下部にTwitterのボタンが追加されていることが確認できました。