はじめに
フロント： Vue.js(Nuxt.js)
バックエンド：Laravel
認証：Auth0
という構成でSPAを開発しているときに、
認証はAuth0でいいけど、欲しい情報がフロントに来ないんだけど！？って悩みが発生しました。
具体的には、アイコンのパスです。
フロントにはpictureというキーで帰ってくるけど、ここにSlackのアイコン画像が入っていませんでした。
もちろんSlackにはアイコンをちゃんと設定しています。
なのに・・・どうして？
というところで結構詰まったので覚書です。あんまり調べても出てこなかったので。
SlackAPIの方で、user:readなどのパーミッションを追加しておく必要がある。
ここはちょっと自分のアカウントじゃないので、まとめれないけど、ユーザー情報を取得するのに必要なパーミッションを追加しておくことで、Auth0の方にログインしたときにSlackのユーザープロフィールが渡されるようになります。
だた、これでもフロントに返却されるpictureにはSlackのアイコン画像のパスは設定されません。
Slack → Auth0のユーザー情報は増えて、imageなどが追加されるが、
Auth0 → フロントへのユーザー情報は増えません。変わりません。
※多分、ほかのGoogleとかはGoogleの側でもpictureというキーでアイコン画像のパスが管理されている（？）が、Slackの場合はアイコン画像のパスのキーはimage-1024のようにimage-<サイズ>というキーで管理しているの違いで、Slackアカウントでログインすると画像がpictureに設定されないように思われます。
単純にAuth0の方にある状態になるだけなので、これをまとめてフロントに返却したいけど、その方法は模索中です。
Auth0のAPIでユーザー情報を取得するとアイコン画像パスも取得できる
ログインだけだと、ユーザー情報はかなり限定的ですが、Auth0のAPIを利用してユーザー情報を取得すれば、
Slack → Auth0に渡されている生のJsonと同じ情報が取得できるようです。
それをフロントからAPIを叩くのか、Auth0側のActionに追加すればよいのかその手法は模索中です。
現段階ではフロントに実装するのはフロントの役割が重い気がしますので、Auth0の方で処理したい！！
Auth0のAPIでユーザー情報を取得する
３日ほどかかってしまったのでメモしておきます。
必要な情報
- Auth0で管理しているユーザーのuser_id
- アクセストークン
とりあえず上記の2つがあれば行けそう。
Auth0のアクセストークンはどこで確認すればいいのか
※設定画面にはないっぽい！
Auth0のダッシュボードの左のメニューから、Applications>APIsを選択。
３点マークから設定画面に遷移。
Testタブを選択。
APIのサンプルコードの中に組み込んでくれるみたい。
自分のプロジェクト用のコードになっているみたいで、そのままコマンドラインに貼り付けて実行したらトークンが取得できるようです。
ちなみに、jwt.ioというところをクリックすると、トークンをデコードしてJson形式で確認できるます。
アクセストークンをここから取得しました。
そしてこのアクセストークンをどっかにコピーしておいて、次はAuth0のユーザー情報を取得するAPIのテスト画面移動します。
では、こちらへどうぞ！
https://auth0.com/docs/api/management/v2
APIを利用するためにトークンを設定する
https://auth0.com/docs/api/management/v2
この画面に移動すると、左のメニューの上のあたりにSET API TOKENというボタンがあります。クリックしちゃいましょう。
次の画面がポップします。心臓が弱い方は要注意です。養命酒を左手掴んでおいてください。
すると画面が戻って左にDOMAINとAPI TOKENというフィールドが増えます。
そして下の方に、かなり下の方にUsersというメニュー項目があるので優しくクリックしてあげる。
荒々しくクリックするとうまくレスポンスが帰ってこない場合があります。
優しくクリックすることで、小項目が開きますので、Get a Userをクリックしましょう。ここでは少しくらい強くクリックしても大丈夫です。
そしてuser_idを入力してTRYボタンをクリック。ここではマウスが壊れるくらい強めにクリックしてください。なんならトンカチで(ry
これでやっと200ステータスで帰ってきてくれました。。。おかえりなさい。
そして次は。。。
APIのお試しは以上のようにできたけど、フロントからAPI叩くのか、Auth0のActionに追加するのか、これから調査します。
いろいろカスタマイズできるみたいですが、私のようなずぶの素人にはわかりにくい記事が多かったので、とりあえずまとめておきました。
画像多めですが、わかりやすいかな？わかりにくいかな？どっちかな？
ということで、間違いや「こんなやり方があるよ！」ってのがありましたらコメントいただけると嬉しいです。喜び組ですm(__)m