LoginSignup
12
9

More than 1 year has passed since last update.

Auth0 + Webサイトで設定しておいたほうがいいこと

Last updated at Posted at 2020-09-18

Auth0
https://auth0.com/jp/

WordPressとの連携はプラグインがある。
https://ja.wordpress.org/plugins/auth0/

Auth0は無料プランから開始できるけど、ここは覚えておいたほうがいいよというポイントのメモ。

最初にざっくりまとめるとAuth0では

  • カスタムドメイン設定しておいた方が面倒は少ない:Auth0 の有料プラン必要
  • カスタムメールプロバイダ:配信されるメールを日本語にしたり文面をカスタマイズにしたければメールサーバーの設定が必須

です

ユニバーサルログイン

ログイン(認証)ページをAuth0のユニバーサルログインページにリダイレクトさせる場合は問題ありません。
ただし、ログイン(認証)のフォームをアプリケーション(Webサイト側に)埋め込みたい時はテナントでカスタムドメインの設定が必要(Auth0でのカスタムドメインの利用は有償です)。
「Cross-Origin Authentication」の設定もありますが、ここに手間や時間をかけるくらいならカスタムドメインの設定をした方が良いです。

SNSアカウントでのログイン

SNS側でアプリの作成が必要

Google Auth

This connection is using Auth0 development keys. Auth0 development keys are intended for testing and are not recommended for Production environments. This connection should be configured with your own keys to enable SSO, federated logout, and other features. More information about Social Connection developer keys.

すぐに使えるけど開発用のキーだから本番環境では自分で諸々取得してね。と言う説明。
https://auth0.com/docs/connections/social/devkeys

スクリーンショット 2020-09-15 20.28.52.png

ちょっと罠っぽいのがGoogle Authの赤い枠の部分。FacebooやTwitterの場合はアプリケーション名になるのに、Googleは認証情報で設定したリダイレクト先のURLのドメインになる。利用者に対してドメイン違うことで惑わせたくない場合はAuth0でのカスタムドメイン設定しておきましょうと言う話。

Facebook アプリ

  • メールアドレス・名前の取得になるので、アプリにプライバシーポリシーやWebサイトのURLを設定する必要あり。
  • アプリをライブモードにしておかないとAuth0からエラーが返されます

Twitter アプリ

  1. TwitterアカウントでTwitterのデベロッパーの申請
  2. 1のアカウントのメールアドレスに申請の確認のメールが配信されるので認証(申請の完了)
  3. Twitterがアプリを承認するのを待つ
  4. 3の承認がされたらアプリとAuth0との連携

Twitter アプリの作り方は以下を参照
https://dev.classmethod.jp/articles/auth0-twitter/

Twitterからメールアドレスを取得したい場合

Auth0のドキュメント
https://auth0.com/rules/get-twitter-email

  • Twitterアプリで Privacy Policy URL と Terms of Service URL を埋めてからPermissionsでメールアドレス取得にチェックを入れる
  • Auth0のRulesで「Get email address from Twitter」を作成し、メールアドレスを取得するルールを追加。
    • この時TwitterのコンシューマーキーとコンシューマーシークレットをRulesに変数で設定しておく
    • ところがプリセットされているGet email address from Twitterのルールではメールアドレスが取得できないという罠がある。
    • なので、を少し書き換えてapp_metadataというフィールドを追加して格納するよう変更する必要あり。具体的なコードはうちのチームのエンジニアが書いてくれるはず。。。
      • もしかしたらAuth0側でこのRulesのプリセットのコードが改修されている可能性があるので、最新ドキュメントは必ず読んでテストしてください。

メールのカスタマイズ

Warning! You are using the Auth0 Email Provider which is only intended for development/trial use. Any customizations made to this email template will NOT take effect until a Custom Email Provider is configured. All emails sent will use the default Auth0 templates, even if customized. Please enable a Custom Email Provider for production use of custom templates.

デフォルトでもメールは配信されるけど、本番環境ではCustom Email Providerの設定をしてね。と言う説明。またメールのサブジェクトや文面をカスタマイズしたい場合もCustom Email Providerの事前設定が必要。
https://auth0.com/docs/auth0-email-services/configure-external-smtp-email-providers

[番外] Webサイト側でCloudFrontなどCDNを通す場合

WebサイトとAuth0間の認証はCookieでやりとりします。
CDNや強固なキャッシュ対策を行っている場合はWebサイト側で

  • コールバックURLはキャッシュしないようにしておく 例:/auth0-callback* をキャッシュしない
  • キーが auth0_*のCookieをホワイトリストを追加

としておく必要があります。


無料からスタートできるのはあくまで開発までなので、本運用にあたってはちゃんと課金しましょうってことで現場からは以上です。

12
9
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
12
9