Update callback.tsx

Author: 1989ONCE

src/routes/callback.tsx

@@ -1,13 +1,13 @@
 import { createFileRoute, useNavigate } from '@tanstack/react-router';
-import { useEffect } from 'react';
-
+import { useEffect, useState } from 'react';
 
 export const Route = createFileRoute('/callback')({
   component: Callback,
 })
 
 function Callback() {
-  const navigate = useNavigate()
+  const navigate = useNavigate();
+  const [userInfo, setUserInfo] = useState(null);
 
   useEffect(() => {
     async function handleOAuthCallback() {
@@ -16,13 +16,13 @@ function Callback() {
 
       if (!code) {
         console.error('授權碼缺失');
-        window.location.href = '/' // 如果沒有授權碼，導回登入頁面
+        window.location.href = '/'; // 如果沒有授權碼，導回登入頁面
         return;
       }
 
       try {
         // 交換 access_token
-        const response = await fetch('https://ncuapp.davidday.tw/oauth2/token', {
+        const tokenResponse = await fetch('https://ncuapp.davidday.tw/oauth2/token', {
           method: 'POST',
           headers: {
             'Accept': 'application/json',
@@ -31,20 +31,34 @@ function Callback() {
           body: JSON.stringify({
             code,
             client_id: import.meta.env.VITE_NCU_PORTAL_CLIENT_ID,
-            client_secret: import.meta.env.NCU_PORTAL_CLIENT_SECRET,
+            client_secret: import.meta.env.VITE_NCU_PORTAL_CLIENT_SECRET,
             redirect_uri: 'https://ncuappteam.github.io/callback',
             grant_type: 'authorization_code'
           })
         });
 
-        const responseJson = await response.json();
-        if (responseJson.access_token) {
-          console.log('Access Token:', responseJson.access_token);
-        } else {
-          console.error('取得 access_token 失敗', responseJson);
+        const tokenData = await tokenResponse.json();
+        if (!tokenData.access_token) {
+          console.error('取得 access_token 失敗', tokenData);
+          return;
         }
 
-        navigate({ to: '/' });
+        console.log('Access Token:', tokenData.access_token);
+
+        // 取得使用者資訊
+        const userResponse = await fetch('https://portal.ncu.edu.tw/apis/oauth/v1/info', {
+          method: 'GET',
+          headers: {
+            'Authorization': `Bearer ${tokenData.access_token}`,
+            'Accept': 'application/json'
+          }
+        });
+
+        const userData = await userResponse.json();
+        console.log('使用者資訊:', userData);
+        setUserInfo(userData);
+
+        navigate({ to: '/' }); // 取得資料後導航到首頁
       } catch (error) {
         console.error('OAuth 登入失敗:', error);
         navigate({ to: '/' });
@@ -54,7 +68,17 @@ function Callback() {
     handleOAuthCallback();
   }, [navigate]);
 
-  return <div>正在處理登入...</div>;
+  return (
+    <div>
+      <h2>正在處理登入...</h2>
+      {userInfo && (
+        <div>
+          <h3>使用者資訊：</h3>
+          <pre>{JSON.stringify(userInfo, null, 2)}</pre>
+        </div>
+      )}
+    </div>
+  );
 }
 
 export default Callback;