이번에 졸업 작품을 준비하면서 Chrome extension 기능이 필요하여 코드를 작성해가며 공부했다. 여러 가지 기능을 구현 해보던 중 가장 헤맸던 소셜 로그인에 대해서 이야기해보고자 한다.
❗해당 프로젝트는 Vite로 만든 Chrome extension입니다. 관련 설정이 궁금하신 분들은 마지막 섹션을 봐주세요.
기본 설정
manifest.json
{
"manifest_version": 3,
"permissions": [
"sidePanel",
"tabs",
"identity",
],
"action": {
"default_title": "Login with Google"
},
"background": {
"service_worker": "service-worker.js"
},
"key": "Chrome Web Store에 올린 항목의 공개 키",
"oauth2": {
"client_id": "Google OAuth 2.0 클라이언트 ID",
"scopes": [
"https://www.googleapis.com/auth/userinfo.profile",
"https://www.googleapis.com/auth/userinfo.email"
]
}
}sidePanel을 사용하기 때문에 permissions에 sidePanel을 넣어주었고, tabs와 identity는 로그인 과정을 위해 추가해두었다.
service-worker.js
chrome.runtime.onInstalled.addListener(() => {
chrome.action.onClicked.addListener(function () {
chrome.tabs.create({ url: "index.html" });
});
});위처럼 소셜 로그인을 위한 준비를 마쳤다.
구글 로그인
구글 로그인의 경우 문서가 작성되어 있어 이를 보면서 작업을 했다.
카카오 로그인
카카오 로그인은 구글 로그인과 다르게 launchWebAuthFlow라는 API를 이용하여 구현해야 한다.
const Home = () => {
const apiKey = import.meta.env.VITE_KAKAO_REST_API_KEY;
const redirectUrl = encodeURIComponent(chrome.identity.getRedirectURL());
const kakaoLoginPage = `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${apiKey}&redirect_uri=${redirectUrl}&response_type=code`;
const onClickKakaoAuth = () => {
chrome.identity.launchWebAuthFlow(
{
interactive: true,
url: kakaoLoginPage,
},
async (responseUrl) => {
const code = responseUrl?.split("code=")[1];
...
}
);
};
return (
<div>
...
<button onClick={onClickKakaoAuth}>Kakao Auth</button>
</div>
);
};
export default Home;기존 웹 프로젝트에서 카카오 로그인을 할 때 redirect url은 http://localhost:5173/redirect와 같이 프론트 주소의 redirect url을 지정해 주었다.
하지만 내가 만든 프로젝트에서는 해쉬 기반 라우팅을 사용했기 때문에 http://localhost:5173/#/redirect와 같이 redirect url을 표시해야 했다.
이때 카카오 로그인 버튼을 누르게 되면 redirect url은 #이 빠진 http://localhost:5173/으로 나오게 되어 KOE006 에러가 나오게 된다. 이는 url에 #이 허용되지 않기 때문이다.
따라서 이를 해결하기 위해 구글링을 하다가 [chrome-extension-samples](https://github.com/GoogleChrome/chrome-extensions-
samples/tree/b939ca2db93ea6b0d800fe784f3aca35ddf1e52a/_archive/apps/samples)를 발견했다. 여기에서 github-auth와 instagram-auth를 발견하여 보았더니 다른 점이 보였다.
바로 chrome.identity.getRedirectURL()을 사용하여 redirect url을 가져오는 것이었다. 이를 통해 가져오는 값을 확인해 보니 https://{크롬익스텐션ID}/?code=~~의 형식을 갖고 있었다. 여기에서 code를 추출하여 서버와 통신을 하니 성공적으로 로그인 정보를 가져올 수 있었다.
Vite 프로젝트 설정
HashRouter
Chrome extension의 경우 브라우저, 즉 클라이언트 측에서 실행되어 서버가 필요 없다. 그리고 BrowserRouter를 사용할 경우 경로를 이해할 서버가 없어 에러가 발생할 수 있다.
그렇기 때문에 해시를 통한 경로 관리를 하는 HashRouter를 사용한다.
chrome-types
chrome에 대한 타입이 없기 때문에 자동 완성이 되지 않아 개발하는 데 어려움을 겪었다. 찾아보니 chrome-types라는 라이브러리를 설치하면 자동 완성이 지원되는 것을 확인하여 설치해 주었다.
pnpm add -D chrome-types🚨 트러블 슈팅
OAuth2 request failed
공식 문서에는 manifest.json의 scopes가 배열에 빈 문자열([””])로 되어있지만 이렇게 할 경우 구글 로그인을 할 때 bad request가 발생한다.
이는 다른 내용들을 추가하여 해결할 수 있었다.
"scopes": [
"https://www.googleapis.com/auth/userinfo.profile",
"https://www.googleapis.com/auth/userinfo.email"
]Failed to load resource
pnpm build를 이용하여 나온 결과물을 Chrome extension에 로드하게 되면 js 파일과 css 파일을 찾을 수 없는 에러가 나온다.
이는 vite.config.ts에 base 속성을 추가하여 해결할 수 있었다.
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
base: "./",
});환경 변수 찾지 못하는 에러
빌드 한 결과물에서 환경 변수의 값을 인식하지 못하는 에러가 있었다. 이는 .env 파일만 생성하고 .env.production 파일은 생성하지 않아서 그랬었다. 자세한 내용은 공식 문서를 참고하기를 바란다.
violates the following Content Security Policy directive: "script-src 'self'”
Kakao SDK 적용을 위해 index.html에 script 태그를 넣고 빌드를 한 뒤 익스텐션을 실행시켜보면 아래와 같은 에러가 나온다.
이는 보안 정책 때문에 가져오지 못하는 것이다. manifest.json에 content_security_policy 속성을 추가하여 해결할 수 있지만 보안 이슈로 권장되는 해결 방안은 아니다.
Kakao SDK 사이트에서 js 파일을 가져와서 public 폴더에 넣어주고 index.html에 불러와주었다.
<script src="kakao.min.js" type="text/javascript"></script>마무리하며
익스텐션의 다른 기능들은 생각보다 금방금방 했던 것 같은데 소셜 로그인은 특히 힘들었던 것 같다. 카카오 로그인의 경우 레퍼런스가 아예 없어서 진짜 많은 시간을 버려야 했다. 이번 기회를 통해 samples 혹은 examples의 소중함을 다시 한번 깨닫게 되었다.
지금까지 조사한 기능들을 졸업작품에 잘 녹여봐야겠다.
