--- title: VKontakte로 가입하기 slug: docs-kr/platform/sign-in-with-vk description: VKontakte 로그인 기능을 앱에 구현하는 방법을 배우세요. Back4App 설정 및 VK 앱 생성 포함. image: https://www.back4app.com/_public/img/back4app-og.png createdAt: 2024-02-05T13:24:02.649Z --- # VK (VKontakte)로 로그인하기 튜토리얼 ## 소개 VK (VKontakte)로 로그인하기는 사용자가 VK 계정을 사용하여 앱에 로그인할 수 있도록 합니다. ## 전제 조건 :::hint{type="info"} **이 튜토리얼을 완료하려면 다음이 필요합니다:** - Back4App에서 생성된 앱 - 다음의 [새 앱 만들기 튜토리얼](https://www.back4app.com/docs/get-started/new-parse-app)을 참조하여 Back4App에서 앱을 만드는 방법을 알아보세요. - Back4App 앱을 위한 서브도메인 설정 - 다음의 [웹 호스팅 및 실시간 쿼리 활성화](https://www.back4app.com/docs/platform/activating-web-hosting)을 참조하여 Back4App에서 서브도메인을 만드는 방법을 알아보세요. - [VK 계정](https://vk.com/)이 필요합니다. ::: ## 1 - 새로운 Back4App 앱 만들기 우선, Back4App에서 기존 앱이 생성되어 있는지 확인해야 합니다. 그러나 새로운 사용자라면 [이 튜토리얼](https://www.back4app.com/docs/get-started/new-parse-app)을 확인하여 앱을 만드는 방법을 알아보세요. ## 2 - 새로운 VK 앱 만들기 VK 애플리케이션을 만들려면 [VK 개발자](https://vk.com/apps?act=manage)로 가서 `앱 만들기 버튼을 클릭하세요` ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/Boa01ieeq3GJoROBAoueS_image.png) 제목을 입력하고 플랫폼을 독립형 앱으로 선택한 다음, 앱 연결 버튼을 클릭하세요. ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/oybDJT1inXp77Dcj1LsOh_image.png) 앱의 카테고리를 선택하고, 해당되는 경우 리더보드 유형과 커뮤니티를 선택하세요. 저장을 클릭하세요. ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/P-epaj4HCCM_vQv1IUFpS_image.png) VK 애플리케이션의 설정 탭에서 앱 ID, 보안 키 및 서비스 토큰과 같은 유용한 정보를 찾을 수 있습니다. 웹사이트 주소와 기본 도메인을 입력하세요. 저장하세요. ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/uLP5qA1wjra7VzRHISZkx_image.png) ## 3 - 코드를 가져오기 앱 ID를 복사하여 `YOUR_CLIENT_ID`로 사용하고, 웹사이트 주소를 `YOUR_REDIRECT_URI`, 그리고 사용 가능한 옵션에서 [scope](https://vk.com/dev/permissions)를 선택하세요 `YOUR_SCOPE`로 사용하세요. 그런 다음 위의 매개변수를 변경하여 다음 URL을 방문하세요: :::BlockQuote [https://oauth.vk.com/authorize?client\_id=YOUR\_CLIENT\_ID\&scope=YOUR\_SCOPE\&redirect\_uri=https://localhost\&response\_type=token](https://oauth.vk.com/authorize?client_id=YOUR_CLIENT_ID\&scope=YOUR_SCOPE\&redirect_uri=https://localhost\&response_type=token) ::: VK에 로그인하라는 메시지가 표시됩니다: ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/Ql80wj-_wGwQB1qn6pmRc_image.png) 또는 다음 CURL 명령을 사용하여 토큰을 가져올 수 있습니다: ```curl curl -X POST \ -F \'client_id=YOUR_CLIENT_ID' -F 'scope=YOUR_SCOPE' -F 'redirect_uri=YOUR_REDIRECT_URI' -F 'response_type=token' https://oauth.vk.com/authorize? ``` 실행하면 액세스 토큰을 가져올 수 있습니다: ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/t6SnGMgZ2kuOVQVKUHgQf_image.png) **기억하세요**: 코드는 한 번만 사용할 수 있습니다. 오류가 발생하거나 토큰을 사용하지 않으면 코드를 다시 생성해야 다시 실행할 수 있습니다. ## 4 - Back4app 앱 구성하기 Back4app 앱에서 서버 설정으로 이동하여 VKontakte 로그인 상자를 엽니다. ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/pNdJNQzx_bpWot8RckzW2_image.png" size="40" width="292" height="338" position="center" showCaption="false"} 신청 ID와 VKontakte 애플리케이션 비밀을 입력하세요. 저장하세요. ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/OtzKpW-akzILuxLH5S2bA_image.png" size="70" width="603" height="574" position="center" showCaption="false"} ## 5 - 개발 시작하기 이제 VK로 로그인 설정이 완료되었으므로 개발 프로세스를 시작할 수 있습니다. AUTHDATA의 형식은 다음과 같습니다: ```json { "vkontakte": { "id": "user's vkontakte id (string)", "access_token": "an authorized vkontakte access token for the user" } } ``` 여기 iOS SDK를 위한 방법이 있습니다: ```swift 1 PFUser.logInWithAuthType(inBackground: "vkontakte", authData: ["access_token":tokenString, "id": user]).continueWith { task -> Any? in 2 3 } ``` 그리고 여기 Android SDK를 위한 방법이 있습니다. ```java 1 Map authData = new HashMap(); 2 authData.put("access_token", tokenString); 3 authData.put("id", user); 4 ParseUser.logInWithInBackground("vkontakte", authData){ 5 6 } ```