Github OAUTH

Jay·2022년 7월 7일
0

flextube 클론

목록 보기
14/15

scope는 유저에게서 얼마나 많이 정보를 읽어내고 어떤 정보를 가져올 것에 대한것
여러 정보들은 우리가 선택해서 볼 수 있게 할 수 있다.

URL의 코드는 짧고 간결하게 함수로 지정해서 관리해주기

const baseUrl = "https://github.com/login/oauth/authorize";
const config = {
client_id: "###########",
allow_signup: false,
scope: "read:user user:email",
};
const params = new URLSearchParams(config).toString();
const finalUrl = `${baseUrl}?${params}`;
return res.redirect(finalUrl);

-이제 Authorize하면 전송되는 callback URL에 대해서 작성할 예정-

Users are redirected back to your site by GitHub

사용자가 요청을 수락하면 GitHub는 코드 매개변수의 임시 code와 상태 매개변수의 이전 단계에서 제공한 state를 사용하여 사이트로 다시 리디렉션합니다.

POST Request를 할 때, 반드시 필요한 파라미터들
client_id, client_secret, code

POST https://github.com/login/oauth/access_token
  const baseUrl = "https://github.com/login/oauth/access_token";
  const config = {
    client_id: process.env.CLIENT_ID,
    client_secret: process.env.CLIENT_SECRET,
    code: req.query.code,
  };
  const params = new URLSearchParams(config).toString();
  const finalUrl = `${baseUrl}?${params}`;
  const data = await fetch(finalUrl, {
    method: "POST",
    headers: { Accept: "application/json" },
  });
  const json = data.json();

필요한 파라미터를 fetch를 이용하여 access_token URL에 post해준다.
https://docs.github.com/en/developers/apps/building-oauth-apps/authorizing-oauth-apps#2-users-are-redirected-back-to-your-site-by-github

profile
위대한 첫 걸음!

0개의 댓글