update callback.tsx

Author: 1989ONCE

src/routes/callback.tsx

@@ -13,55 +13,50 @@ function Callback() {
     async function handleOAuthCallback() {
       const urlParams = new URLSearchParams(window.location.search);
       const code = urlParams.get('code');  // 取得 OAuth 授權碼
-      console.log('code:', code);
 
       if (!code) {
         console.error('授權碼缺失');
-        window.location.href = '/' // 如果沒有授權碼，導回登入頁面
+        window.location.href = '/'; // 如果沒有授權碼，導回登入頁面
         return;
       }
 
       try {
         // 交換 access_token
-        const headers: Headers = new Headers();
-        const client_id = import.meta.env.VITE_NCU_PORTAL_CLIENT_ID;
-        const client_secret = import.meta.env.VITE_NCU_PORTAL_CLIENT_SECRET;
-        const authHeader = btoa(`${client_id}:${client_secret}`);
-        headers.append('Accept', 'application/json');
-        headers.append('Content-Type', 'application/x-www-form-urlencoded');
-        headers.append('Authorization', `Basic ${authHeader}`);
-
-        const body = new URLSearchParams({
-          code: code,
-          redirect_uri: 'http://ncuappteam.github.io/callback',
-          grant_type: 'authorization_code',
-        });
-        const request: RequestInfo = new Request('https://ncuapp.davidday.tw/oauth2/token', {
-          // We need to set the `method` to `POST` and assign the headers
+        const tokenResponse = await fetch('https://ncuapp.davidday.tw/oauth2/token', {
           method: 'POST',
-          headers: headers,
-          // Convert the user object to JSON and pass it as the body
-          body: body.toString(),
-        })
+          headers: {
+            'Accept': 'application/json',
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            code,
+            client_id: import.meta.env.VITE_NCU_PORTAL_CLIENT_ID,
+            client_secret: import.meta.env.VITE_NCU_PORTAL_CLIENT_SECRET,
+            redirect_uri: 'https://ncuappteam.github.io/callback',
+            grant_type: 'authorization_code'
+          })
+        });
 
-        // const tokenResponse = await fetch('', {
-        //   method: 'POST',
-        //   headers: headers,
-        //   body: body.toString(),
-        // });
-        const responseData = await fetch(request);
-        console.log('responseData:', responseData);
-        const responseJson = await responseData.json()
-        if (responseJson) {
-          // localStorage.setItem('accessToken', accessToken);
-          console.log('accessToken:', responseJson);
-        }
-        else {
-          console.error('取得 access_token 失敗');
+        const tokenData = await tokenResponse.json();
+        if (!tokenData.access_token) {
+          console.error('取得 access_token 失敗', tokenData);
+          return;
         }
 
-        // 跳轉到首頁或其他頁面
-        navigate({ to: '/' });
+        // 取得使用者資訊
+        const userResponse = await fetch('https://ncuapp.davidday.tw/oauth2/userinfo', {
+          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: '/' });
@@ -84,4 +79,4 @@ function Callback() {
   );
 }
 
-export default Callback;
+export default Callback;