Auth0入門

2021-04-112021-04-29

TwitterによるSNS認証を簡単におこなう方法についての調査メモです。

1. Auth0とは

Auth0は認証・認可プラットフォームで、これを使えば、使いやすいログイン画面を簡単に作れるとのことなので、サインアップしてみました。無料プランでもある程度使えるみたいです。

まずは手始めに、Auth0 が生成する雛形ReactアプリでTwitter認証ができることを確認してみます。

Node.JS LTSがインストールされている。
Twitter Devloper account を持っている。
- 過去記事「Twitter APIにアクセスするためのアカウント取得できました」(2019-06-27)

[+ CREATE APPLICATION]ボタンをクリックする。
[Create application]ダイアログボックス
1. Nameには適当なアプリケーション名（例：「React using Twitter」）を入力する。後から変更可能です。
2. アプリケーションタイプ4種のうち、[Single Page Web Applications]を選択する。
3. [CREATE]ボタンをクリックする。
“What technology are you using for our web app?”
- どの技術を用いるかの4択から[React]をクリックする。
次の画面からは[DOWNLOAD SAMPLE]ボタンをクリックする。
次の画面で[DOWNLOAD]ボタンをクリックする。
- これで zip ファイルがダウンロードされ、伸長すると sample-01 というフォルダができる。

Application Settingsで以下の三箇所のフィールドに”http://localhost:3000″を設定し、[SAVE CHANGES]ボタンをクリックする。
- Allowed Callback URLs
- Allowed Web Origins
- Allowed Logout URLs
サンプルフォルダ(sample-01)をVisual Studio Codeで開く。
src\auth_config.json には Application Settings のDomain 及び Clinent ID が設定されているが、audience の行は不要なので削除する。

{
  "domain": "dev-********.jp.auth0.com",
  "clientId": "cirv****************************" // 末尾にカンマ(,)があるとエラーになる。
}

5. ターミナルで以下のコマンドを実行する。

$ npm run start

6. 以下の Social Connections から[+ CREATE CONNECTION]ボタンをクリックする。

7. New Social Connection から Twitter をクリックする。

8. [CONTINUE]ボタンをクリックする。

9. Twitter Developer portal で新しいプロジェクトを作成し、新しいアプリを追加する。

Dashboard にて[＋Create Project]ボタンをクリックする。
適当なプロジェクト名を入力し、[Next]ボタンをクリックする。例：”Over 40 Web Club”
“Which best describes you?”の質問の選択肢を適当に選び、[Next]ボタンをクリックする。例：Exploring the API
“Describe your new Project”には適当に入力し、[Next]ボタンをクリックする。例：”Testing Auth0 with Twitter”
“Last ste, name, your App”には適当に入力し、[Complete]ボタンをクリックする。例：”Auth0 Sample using Twitter”
API Key, API Secret Key, 及び Bearer Token が表示されるので、安全な場所にメモしておく。