Auth0を使ってTwitterのソーシャルログイン機能を試す #Auth0JP #Auth0アドカレ

認証認可サービス「Auth0」を使って、Twitterのソーシャルログイン機能を作ってみました。
2019.12.01

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

Auth0でTwitterログイン!

認証認可サービス「Auth0」は様々な接続方式に対応した、とても簡単に使えることが特長のサービスです。

Auth0アドベントカレンダーでは、その手軽さをお伝えすべく、Auth0が持つ様々な機能をご紹介できればと思います。

本記事ではAuth0のTwitter連携を使って Twitterのソーシャルログイン機能 を試してみました!

私は数年前にTwitterアプリを作ったことがありましたが、当時よりTwitterアプリの登録手順が複雑になっていました。より厳密になったといった感じでしょうか。

Twitter Developersへの登録

まずはじめに、Twitterのソーシャルログインを試すにはTwitter Developersへの登録が必要です。

Twitter DevelopersにはTwitterアカウントがあれば誰でも作ることができます。

Twitter Developersを使う目的などを説明する必要がありますので、あらかじめ用意しておきましょう。

Twitterアプリの登録

Twitter Developersへの登録が完了したら、次にTwitterアプリを作りましょう。「Create an app」をクリックします。

登録フォームです。

必須項目がいくつかあります。以下を埋めるようにしましょう。

項目 説明
App name アプリ名
Application description アプリの説明
Website URL アプリを紹介するWebページなどのURL
Enable Sign in with Twitter Sign in with Twitterを使うかどうか。チェックしてください。
Callback URLs サインイン時のコールバックURL。入力値は後述。
Tell us how this app will be used アプリの使い方の説明

特に Callback URLs について、こちらはAuth0の作成済みのテナントのドメインのコールバックURLを設定します。以下の形式です。

https://【テナント名】.auth0.com/login/callback

Developer Termsをよく読んで「Create」をクリックします。

Twitterアプリが作成できました。

「Keys and tokens」タブを開き「Consumer API keys」の「API key」と「API secret key」をメモしておきます。

Auth0への設定

次にAuth0の設定です。なお、Auth0テナントは作成済みの前提で進めます。

「Connections」メニューを開き、一覧の中からTwitterのロゴのフリップをクリックします。

Twitterの各種設定フォームが表示されますので、先ほどメモした「API key」と「API secret key」を入力します。

「Application」タブを開き、有効にしたいアプリケーション(クライアント)のフリップをオンにします。

試す

それでは試してみましょう!今回はお試しなので、コネクション一覧に表示されている「TRY」を使います。

サインインできました!Twitterアプリを作ったTwitterアカウントであれば認可画面は表示されませんが(認可済みとしてスキップされる)、一般のTwitterアカウントからは認可画面を挟んだ後にサインインできます。

まとめ

Twitterアプリの登録方法が変わっているので、以前よりも手順が多くなっています。私と同じように **久しぶりにTwitterアプリを作るよ! ** という方はご注意ください。