반응형

카카오 로그인 3

[JavaScript, Node.js] 유튜브 클론 정리 7장 (10) - Github Login3

머리글 깃허브 로그인을 계속 진행해 보자. Github Login 지난 시간 액세스 토큰을 통해 gtihub api url에 fetch를 진행했다. 하지만 user의 정보가 private 상태라면 정보를 얻을 수 없는 문제가 있었는데 이를 해결해 보자. const apiUrl = "https://api.github.com"; const userData = await ( await fetch(`${apiUrl}/user`, { headers: { Authorization: `token ${access_token}`, }, }) ).json(); const emailData = await ( await fetch(`${apiUrl}/user/emails`, { headers: { Authorization: ..

[JavaScript, Node.js] 유튜브 클론 정리 7장 (9) - Github Login2

머리글 깃허브 로그인 파트를 계속 진행해 보자. Github Login 저번 시간에 유저가 다시 리다이렉트 할 수 있게끔 만들었다. 그 이후에 진행을 알아보자. 우리는 유저의 리다이렉트와 함께 깃허브를 통해 토큰을 받았다. 이 토큰을 Access 토큰으로 변경해 주는 작업이 필요하다. 컨트롤러를 수정해서 작업을 해보자. export const finishGithubLogin = async (req, res) => { const baseUrl = "https://github.com/login/oauth/access_token"; const config = { client_id: process.env.GH_CLIENT, client_secret: process.env.GH_SECRET, code: req.q..

[JavaScript, Node.js] 유튜브 클론 정리 7장 (8) - Github Login1

머리글 이번 시간에는 깃허브 로그인을 구현해 보자. Github Login 우선 흐름을 간단히 살펴보자. 우선 사용자를 깃허브(로그인하려 하는 사이트)로 보낸다. 그러면 사용자는 해당 사이트에 로그인을 한다. 우리의 사이트에 대한 정보 접근 권한을 승인하고 깃허브는 우리에게 사용자를 돌려보낸다. 이 단계에서 token을 같이 redirect 해준다. 이 token을 통해 사용자의 정보를 받아올 수 있다. 우선 기본적으로 설정을 진행해 보자. 깃허브의 세팅으로 들어가 준다. 그리고 목록의 Developer settings에 들어가 준다. 그리고 OAuth Apps를 클릭하자. 그리고 New OAuth App을 클릭하면 다음과 같이 뜬다. 이름은 아무거나 넣어주고, URL은 'http://localhost:..

반응형