LoginSignup
0
0

auth0認証後、IDトークンはどうやって取得する?

Posted at

@auth0/auth0-vue auth0認証後、IDトークンはいったいどこにあるのか?

どうやら下のようにやると取得できるみたい
auth0.idTokenClaims.value.__raw

Sample.vue
<template>
   <div class="grid">
       <div class="col-12 md:col-6">
           <div class="card p-fluid">
               <div class="field">
                   <h1>Vue 3 Axios Example with</h1>
                   <button @click="fetchData">Fetch Data</button>
                   <pre>{{ configrationDocument }}</pre>
               </div>
           </div>
       </div>
   </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';
import { useAuth0 } from '@auth0/auth0-vue';

// 非同期の関数を定義
const auth0 = useAuth0();
const data = ref(null);
const fetchData = async () => {
 try {
   // axiosを使ってデータを取得する例
   const params = new URLSearchParams();
   params.append('id_token', auth0.idTokenClaims.value.__raw);
   axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
   axios.defaults.headers.post['Access-Control-Allow-Origin'] = 'https://localhost:3000';
   const response = await axios.post('https://localhost:44363/sample', params);

   // レスポンスからデータを取り出す
   data.value = response.data;
 } catch (error) {
   console.error('データの取得に失敗しました:', error);
 }
};
</script>

auth0のIDトークンの仕組み的な保存場所はこちら

何もしなかったらインメモリに保存されるみたい
https://mizumotok.hatenablog.jp/entry/2021/08/04/114431

まとめ

どうやったらIDトークン取得できるのか右往左往してた

0
0
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
0
0