Auth0のアクセストークンに情報を追加してみる

技術課の水垣です。こんにちは。

皆さん、Auth0はご利用されていますでしょうか。
Auth0は、自身のWebサービスやアプリに手軽に認証認可を導入することができる認証系サービスです。
サービスの概要については公式サイトをご覧いただくのが、内容もまとまっていて一番理解が早いかと思いますので、まずは以下をご確認ください。

auth0.com

またAuth0のサイトは、アプリケーションの形式に沿った組み込み方も言語別にチュートリアルがあって、とても開発に入りやすいです。
開発者のかたは、ぜひチュートリアルを試して実感してみてください。

auth0.com

今日はこのAuth0で、ログイン後に取得できるトークンにユーザー情報を追加する方法 について記載したいと思います。

なぜこの設定が必要になったのか
トークン
設定手順
結果
あとがき

なぜこの設定が必要になったのか

今回この設定が必要になったのは、開発中にAPI制限に引っかかってしまったためです。
サービス内の処理でユーザーのメールアドレスが必要になり、毎回Auth0のAPIを叩いて情報を取得していましたが、なぜか数回処理を実施するとエラーが発生します。
「大丈夫なときもあるけど、なんだろ？なんか嫌な予感がするなー」と思ったら、API制限でした。
最初はどうしようかと思いましたが、Auth0に便利な機能があって助かりました。みなさんも開発する際には、API制限にご注意ください。

f:id:swx-mizugaki:20200831163033p:plain

auth0.com

トークン

Auth0ではログイン後に、JSON Web Token（以降JWT）形式のトークンを取得できます。
このトークンですが、主に header と payload の2つのJSONオブジェクトで構成されています。このうち payload にはユーザー属性情報などが格納されています。

ただ、すべての属性情報が格納されているわけではなく、自身のサービスによっては情報が足りない場合もあります。そしてこのpayload部分には、Auth0の Rules 機能を利用して情報（カスタムクレーム）を追加できます。
今回は「メールアドレス」を追加してみようと思います。

設定手順

Auth0にログインします
左側から「Rules」をクリックし、右上の「+ CREATE RULES」をクリックします
Access Controlの中から、「Add email to access token」をクリックします
Script欄にて、Keyにあたる https://example.com/ の部分を変更します。
ここで注意点は、Keyは URL形式 のみ有効となる点です。
作成したRulesを有効にします

結果

上で設定したRulesが有効になっていることを確認して、ログインします。
取得できたトークンをデコードしpayload部分を確認すると、さきほどRulesで設定したメールアドレスが追加されているかと思います。
このように、Auth0ではRules機能を使うことで、設定画面から手軽にカスタムクレームを設定することができます。

{
  "https://example.com.email": "xxxxx@example.com", // ←この部分
  "iss": "https://xxxxx.auth0.com/",
  "sub": "auth0|xxxxx@example.com",
  "aud": [
    "https://xxxxx.auth0.com/api/v2/",
    "https://xxxxx.auth0.com/userinfo"
  ],
  "iat": 1234567890,
  "exp": 1234567890,
  "azp": "xxxxxxxxxxxxxxxxxxxx",
  "scope": "openid profile email"
}