LoginSignup
2
2

More than 3 years have passed since last update.

Auth0Advent Calendar 2020Day 9
@kai_kou(甲斐 甲)inアイレット株式会社

Auth0で開発者キーを使用してテストできるソーシャルログインを洗い出してみた

Posted at

Auth0を利用すると認証・認可機能がとても簡単に実装できます。

GoogleやGitHubを利用したソーシャルログインについても数多くのソーシャルIDプロバイダー提供されていますが、その中でもAuth0開発者キーというものを利用すると各ソーシャルIDプロバイダーで設定をせずともテストができます。

ただし、全部が全部テストができるものではないことがわかったので、テスト可能なソーシャルIDプロバイダーを洗い出してみました。

Auth0について

下記に概要をまとめていますので、ご参考ください。

Auth0の機能を調べてみた - Qiita
https://qiita.com/kai_kou/items/b3dd64e4f8f53325020e

Auth0(オースゼロ)とはAuth0, Inc.が提供するiDaaS(アイダース)で、Identity as a Serviceの略となりクラウドでID管理・認証機能などを提供してくれるサービスです。
iDaaSが提供する機能としては認証・シングルサインオン、ID管理・連携、認可、ログなどによる監査などがあり、Auth0もそれらを提供しています。

Auth0開発者キーとは

本来ソーシャルログインを実現するには、ソーシャルIDプロバイダーでクライアントIDやクライアントシークレットの取得、コールバックURLなどの設定をする必要がありますが、それをAuth0が肩代わりして提供してくれるものがAuth0開発者キーと呼ばれるものです。

ただし、あくまでも開発・テスト用で、本番環境での利用は推奨されていませんので注意が必要です。

Test Social Connections with Auth0 Developer Keys
https://auth0.com/docs/connections/social/devkeys

(Google翻訳) 利用可能なソーシャルIDプロバイダーのいずれかを使用する場合、クライアントIDとクライアントシークレットを取得するには、関連するIDプロバイダーにアプリケーションを登録する必要があります。

Auth0を使用すると、Auth0開発者キーを使用して、独自のクライアントIDとクライアントシークレットを指定せずにソーシャルIDプロバイダーをテストできます。これにより、特定のソーシャルIDプロバイダーをすばやく有効にしてテストできますが、本番環境では使用しないでください。

Auth0開発者キーが利用できるソーシャルIDプロバイダー

Auth0で実際にソーシャルIDプロバイダーを追加して検証したところ、以下のパターンが確認できました。(2020月12月時点)

  • クライアントIDとクライアントシークレットが空だとAuth0開発者キーが設定される
    • Auth0開発者キーが利用できる(OK)
    • Auth0開発者キー＋何かしらの情報が必要で設定エラーとなる
    • Auth0開発者キーでプロバイダーへ遷移するがエラーになる
  • Auth0開発者キーが設定されない(クライアントIDとクライアントシークレットが必須)

そして、Auth0開発者キーが利用できるソーシャルIDプロバイダーは以下となりました。

  • Google / Gmail
  • Microsoft Account
  • LinkedIn: ビジネス特化型SNS
  • GitHub
  • Twitter
  • Amazon
  • Basecamp: プロジェクト管理サービス
  • ВКонтакте (vKontakte): ロシアを中心とするSNS
  • WordPress
  • Yammer: Microsoft 365 に含まれる企業向けのSNS
  • Яндекс (Yandex): ロシアの検索エンジン

ソーシャルIDプロバイダーの追加方法

ソーシャルIDプロバイダーの追加方法は簡単で、Auth0のダッシュボードの左メニューから「Connections」→「Socal」でSocal Connections画面を開き、「CREATE CONNECTION」ボタンで「New Social Connection」画面へ移動します。
image.png

「New Social Connection」画面で追加したいソーシャルIDプロバイダーを選択します。(ここではGitHub)
image.png

「New GitHub Social Connection」画面が開くので権限へのアクセス許可を確認し、設定はそのままで「CREATE」ボタンをクリックします。
image.png
image.png

作成できると利用するApplicationが選択できますので、Applicationで接続を有効化して、「TRY CONNECTION」ボタンでテストできます。
image.png
image.png

GitHubでログインとアクセス許可を行うとAuth0へ戻り、設定できたことが確認できます。
image.png

追加できるソーシャルIDプロバイダーの数

無料トライアル期間中(22日)はEnterpriseライセンスと同じ機能が使用できるとのことでソーシャルIDプロバイダーは9つまで追加できました。無料トライアルが終了するとFreeプランへ移行するので、その場合おそらくソーシャルIDプロバイダーの利用は2つなるみたいです。

(参考)クラウド認証サービス Auth0 の無料トライアルを試してみよう - Qiita
https://qiita.com/furuth/items/8826b66a3ec2b2b14222

(無料トライアル期間は22日間(無料トライアル期間中、作成されたテナントはEnterpriseライセンスと同じ機能が使用できます。無料トライアル期間が満了すると、テナントは一部機能が制限されたFreeライセンスに移行しますが、そのまま使用し続けることは可能です)
image.png

9つまで追加するとダッシュボードに以下のメッセージが表示されます。

This tenant reached the limit of 10 available connections per the Auth0 Entity Limit policy. You can increase the number of connections by upgrading your Auth0 subscription to a paid plan. Please contact us with any questions.

(Google翻訳) このテナントは、Auth0 Entity Limitポリシーで利用可能な接続数の上限に達しました。Auth0のサブスクリプションを有料プランにアップグレードすることで、接続数を増やすことができます。ご不明な点がございましたら、お問い合わせください。

料金ページやダッシュボードからアクセスできるサブスクリプション設定をみると有料プランだとソーシャルIDプロバイダーは無制限に利用できるような書き方ですが追加できる数には上限があるのかもしれません。(2020年12月時点)

Pricing - Auth0
https://auth0.com/pricing/
image.png

image.png

ただ、実際のログイン画面をみてみるとやりすぎ感がただよい、数が多いからといってユーザー体験が向上するわけではなさそうなので、9つあれば十分ではないかなと感じました。
Applicationが複数ありApplicationごとに利用するプロバイダーを変更する場合には足りなくなるかもです。
image.png

ログイン画面を表示して検証するにはAuth0のApplication設定にある「Quick Start」のチュートリアルで環境構築するとできますし、下記記事もご参考ください(宣伝)。
image.png

Auth0のJavaScriptチュートリアルをシンプルな構成で試してみた - Qiita
https://qiita.com/kai_kou/items/51ce27a8f98a14263e26

エラーとなるケース

Auth0開発者キーが利用できなかったり、設定ミスがあるとエラーとなったのでそのご紹介です。

Auth0開発者キーだけだとエラーになる

クライアントIDとクライアントシークレット以外にもオプションパラメータが必要というメッセージがAuth0で表示されます。
image.png

Dropboxなどで発生しましたが、設定項目としてはクライアントIDとクライアントシークレットだけなので、謎です。実際にクライアントIDとクライアントシークレットを設定すれば動作するものと思われます。
image.png

有効なApplicationがなくてエラーになる

ソーシャルIDプロバイダーの追加方法の手順で紹介した、Applicationで接続を有効化 を忘れると以下のエラーメッセージが表示されます。
image.png

ソーシャルIDプロバイダーでエラーとなる

Auth0ではエラーとならず、ソーシャルIDプロバイダーでエラーとなるケースもありました。
LineやPaypal、Facebookで発生しました。
image.png
image.png
image.png

まとめ

Auth0を本格導入する前にどういった機能がありどういう挙動をするのかを確認するには、Auth0開発者キーによる接続のテストができるのは非常にありがたいと感じました。

参考

Auth0の機能を調べてみた - Qiita
https://qiita.com/kai_kou/items/b3dd64e4f8f53325020e

Test Social Connections with Auth0 Developer Keys
https://auth0.com/docs/connections/social/devkeys

Auth0のJavaScriptチュートリアルをシンプルな構成で試してみた - Qiita
https://qiita.com/kai_kou/items/51ce27a8f98a14263e26

Pricing - Auth0
https://auth0.com/pricing/

クラウド認証サービス Auth0 の無料トライアルを試してみよう - Qiita
https://qiita.com/furuth/items/8826b66a3ec2b2b14222

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
2