본 문서는 Strapi CMS에 카카오 로그인을 연동하는 방법을 설명합니다.
기본 개념은 Strapi Admin 패키지 위에 카카오 로그인 커스텀 소스를 얹은 코드를 덮어씌우기 하는 과정으로 진행됨.
따라서 필요한 파일들을 불러(복사해)와서 필요한 카카오 로그인 코드 정보를 넣고서 Admin을 새로 빌드하면 됨.
해당 파일(불러오는)의 내용은 버전별로 다를 수 있으니 꼭 자신의 버전에 맞는 소스를 구해서 복사 후 붙여넣기 필요
각 프로젝트의 루트에 extensions 폴더가 있습니다. 그 폴더 아래에 아래 경로들(폴더들)을 만든 후 빈 js 파일들을 생성해줍니다.
extensions/users-permissions/services/Providers.js
extensions/users-permissions/config/functions/bootstrap.js
extensions/users-permissions/config/users-permissions-actions.js
extensions/users-permissions/admin/src/components/PopUpForm/index.js
extensions/users-permissions/admin/src/translations/en.json
이제 만들어진 빈 파일들에 내용을 채워 넣습니다. 우선 기존 소스를 가져와서 붙여넣고 그 다음으로 카카오 로그인을 위한 코드들을 추가하는 단계로 진행될 예정입니다.
기존 소스의 경우 Strapi Github 에서 복사할 수 있습니다. 그 소스는 아래 링크에 있습니다.
https://github.com/strapi/strapi/tree/master/packages/strapi-plugin-users-permissions
이곳에서 각 폴더에 맞는 곳으로 들어가서 코드를 복사해주세요.
예시)
extensions/users-permissions/services/Providers.js
는 리포지토리에서
strapi/packages/strapi-plugin-users-permissions/services/Providers.js
입니다.
예시와 같은 방법으로 상기 4개 파일을 생성/복사해주세요.
switch (provider
안에 아래 case를 추가해주세요.
case "kakao": {
const kakao = purest({
provider: "kakao",
config: {
kakao: {
"https://kapi.kakao.com": {
__domain: {
auth: {
auth: { bearer: "[0]" },
},
},
"[version]/{endpoint}": {
__path: {
alias: "__default",
version: "v2",
},
},
},
"https://kauth.kakao.com": {
"oauth/{endpoint}": {
__path: {
alias: "oauth",
},
},
},
},
},
});
kakao
.query()
.get("user/me")
.auth(access_token)
.request((err, res, body) => {
if (err) {
callback(err);
} else {
callback(null, {
username: body.id,
email: body.kakao_account.has_email
? body.kakao_account.email
: `${body.id}@kakao.com`,
});
}
});
break;
}
여기서 주의할 점은 아래쪽에 callback(프론트로 정보를 넘겨주는 부분)인데 받아오는 항목에 따라서 body의 내용이 달라질 수 있다는 것입니다. 카카오 계정의 경우 이메일이 없을 수도 있어서 has_mail 값으로 체크를 해주고, 없는 경우 id값으로 이메일을 임의로 생성해줬습니다.
grantConfig 오브젝트 안에 해당 내용을 추가해줍니다.
kakao: {
enabled: false, // make this provider disabled by default
icon: "kaggle", // The icon to use on the UI
key: "", // our provider app id (leave it blank, you will fill it with the content manager)
secret: "", // our provider secret key (leave it blank, you will fill it with the content manager)
callback: "/auth/kakao/callback", // the callback endpoint of our provider
scope: [
// the scope that we need from our user to retrieve information
"profile",
"account_email",
],
},
scope의 경우 받아오시려는 항목들에 맞게 수정해서 사용해주세요. 주석에 단 것 처럼 이전 카카오 개발자 페이지에서 받은 키와 시크릿 키는 나중에 어드민 페이지에서 넣을 수 있습니다. (빈칸으로 두셔도 됩니다.)
switch (this.props.dataToEdit)
안에 아래 case 를 추가해주세요.
case "kakao":
return `${strapi.backendURL}/connect/kakao/callback`;
json 오브젝트 안에 아래 내용을 추가해주세요.
'PopUpForm.Providers.kakao.providerConfig.redirectURL': 'The redirect URL to add in your Kakao application configurations',
뒤쪽에 문구는 각자 취향대로 입력하셔도 됩니다. (어드민 페이지에 보여질 문구입니다.)
프로젝트 루트에서 npm run build
를 실행하여 새로운 어드민 페이지를 빌드해주세요. 다시 어드민을 실행해서 들어가보면 카카오가 추가되어 있습니다. 이제 맨 처음에 발급받은 키와 시크릿키를 입력하고 프론트엔드에서 쓸 Redirect URL을 넣고 실행하면 됩니다.
config/server.js
에서
module.exports = ({ env }) => ({
host: env('HOST', '0.0.0.0'),
port: env.int('PORT', 1337),
url: env('', 'http://localhost:1337'),
});
중에 http://localhost:1337 을 수정하시면 됩니다.