diff --git a/public/images/linkedin-button/Sign-In-Large---Active.png b/public/images/linkedin-button/Sign-In-Large---Active.png new file mode 100644 index 00000000..fbfceacc Binary files /dev/null and b/public/images/linkedin-button/Sign-In-Large---Active.png differ diff --git a/public/images/linkedin-button/Sign-In-Large---Default.png b/public/images/linkedin-button/Sign-In-Large---Default.png new file mode 100644 index 00000000..44a71c54 Binary files /dev/null and b/public/images/linkedin-button/Sign-In-Large---Default.png differ diff --git a/public/images/linkedin-button/Sign-In-Large---Hover.png b/public/images/linkedin-button/Sign-In-Large---Hover.png new file mode 100644 index 00000000..dc64fce5 Binary files /dev/null and b/public/images/linkedin-button/Sign-In-Large---Hover.png differ diff --git a/public/images/linkedin-button/Sign-In-Small---Active.png b/public/images/linkedin-button/Sign-In-Small---Active.png new file mode 100644 index 00000000..9e3613e0 Binary files /dev/null and b/public/images/linkedin-button/Sign-In-Small---Active.png differ diff --git a/public/images/linkedin-button/Sign-In-Small---Default.png b/public/images/linkedin-button/Sign-In-Small---Default.png new file mode 100644 index 00000000..323f392c Binary files /dev/null and b/public/images/linkedin-button/Sign-In-Small---Default.png differ diff --git a/public/images/linkedin-button/Sign-In-Small---Hover.png b/public/images/linkedin-button/Sign-In-Small---Hover.png new file mode 100644 index 00000000..51fae5c3 Binary files /dev/null and b/public/images/linkedin-button/Sign-In-Small---Hover.png differ diff --git a/src/pages/api/linkedin.ts b/src/pages/api/linkedin.ts new file mode 100644 index 00000000..aa5b1929 --- /dev/null +++ b/src/pages/api/linkedin.ts @@ -0,0 +1,76 @@ +import { NextApiRequest, NextApiResponse } from 'next'; + +export interface LinkedInAuthData { + code: string; + state: string; +} + +async function getProfile(access_token: string) { + try { + const LI_PROFILE_API_ENDPOINT = 'https://api.linkedin.com/v2/me'; + const response = await fetch(LI_PROFILE_API_ENDPOINT, { + headers: { + 'Authorization': `Bearer ${access_token}` + } + }); + + if (!response.ok) { + throw new Error('Failed to fetch LinkedIn profile'); + } + + return await response.json(); + } catch (error) { + throw new Error(`Error fetching LinkedIn profile: ${error.message}`); + } +} + +export default async function handler(req: NextApiRequest, res: NextApiResponse) { + if (req.method === 'POST') { + try { + // Parse incoming data as JSON + const data: LinkedInAuthData = req.body; + + // Exchange authorization code for access token + const accessTokenResponse = await fetch('https://www.linkedin.com/oauth/v2/accessToken', { + method: 'POST', + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + }, + body: new URLSearchParams({ + grant_type: 'authorization_code', + code: data.code, + redirect_uri: process.env.NEXT_PUBLIC_LINKEDIN_REDIRECT_URI || '', // Assuming this is your redirect URI + client_id: process.env.NEXT_PUBLIC_LINKEDIN_CLIENT_ID || '', // Your LinkedIn client ID + client_secret: process.env.NEXT_PRIVATE_LINKEDIN_SECRET || '', // Your LinkedIn client secret + }), + }); + + // Check if access token exchange was successful + if (!accessTokenResponse.ok) { + throw new Error('Failed to exchange authorization code for access token'); + } + + // Parse access token response as JSON + const accessTokenData = await accessTokenResponse.json(); + + // Log access token data + console.log('Access Token Data:', accessTokenData); + + // Get LinkedIn profile using access token + const profile = await getProfile(accessTokenData.access_token); + + // Log profile data + console.log('LinkedIn Profile:', profile); + + // Respond with success message + res.status(200).json({ message: 'LinkedIn profile received successfully', profile }); + } catch (error) { + // Handle errors + console.error('Error:', error); + res.status(500).json({ error: 'Internal Server Error' }); + } + } else { + // Respond with method not allowed for non-POST requests + res.status(405).json({ error: 'Method Not Allowed' }); + } +} diff --git a/src/pages/landing/testing-linkedin.tsx b/src/pages/landing/testing-linkedin.tsx new file mode 100644 index 00000000..11bd1980 --- /dev/null +++ b/src/pages/landing/testing-linkedin.tsx @@ -0,0 +1,81 @@ +import Image from 'next/image'; +import { useEffect, useState } from 'react'; +import { IntroducationSecion } from '../../components/introduction-section'; +import Link from 'next/link'; +import { useRouter } from 'next/router'; + +function TestingLinkedin() { + const router = useRouter(); + + useEffect(() => { + const getParams = () => { + const params = new URLSearchParams(window.location.search); + const code = params.get('code'); + const state = params.get('state'); + if (code && state) { + fetch('/api/linkedin', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + code, + state, + }), + }) + .then(response => { + if (response.ok) { + // Handle successful response + console.log('Authorization successful'); + } else { + // Handle error response + console.error('Authorization failed'); + } + }) + .catch(error => { + // Handle network error + console.error('Error:', error); + }); + } + }; + + // Call the function to parse parameters + getParams(); + }, []); // Ensure useEffect runs only once + + const generateAuthorizationUrl = () => { + const LI_AUTH_URL = 'https://www.linkedin.com/oauth/v2/authorization'; + const url = new URL(LI_AUTH_URL); + url.searchParams.append('response_type', 'code'); + url.searchParams.append('client_id', process.env.NEXT_PUBLIC_LINKEDIN_CLIENT_ID || ''); + url.searchParams.append('redirect_uri', process.env.NEXT_PUBLIC_LINKEDIN_REDIRECT_URI || ''); + url.searchParams.append('state', Math.random().toString(36).substring(7).toUpperCase()); + url.searchParams.append('scope', 'profile openid'); + return url.toString(); + }; + + return ( +
+
+
+
+
+ +
+
+
+
+
+ ); +} + +export default TestingLinkedin;