--- title: 자바스크립트 프로젝트용 트위터 로그인 설정 가이드 slug: docs-kr/javascript/login-twitter description: 자바스크립트에 트위터 로그인 통합, Parse Server 3.1 사용법 안내. image: https://www.back4app.com/images/logo-social.png createdAt: 2024-03-06T14:38:32.598Z --- # 트위터 로그인 ## 소개 이 섹션에서는 트위터 로그인을 자바스크립트 프로젝트에 통합하는 방법을 설명합니다. 이 단계별 가이드를 완료한 후, 클라우드 코드에 코드를 업로드할 준비가 됩니다. :::hint{type="danger"} 이 프로젝트는 새로 출시된 3.1 버전의 Parse Server를 사용할 것입니다. 프로젝트 대시보드에서 서버 설정 > Parse Server 관리(설정)로 이동하여 3.1.1을 선택하세요. Parse Server 3.1.x로 마이그레이션하는 방법에 대한 자세한 내용은 [이 가이드](https://www.back4app.com/docs/advanced-guides/parse-server-3)를 참조하세요. 이 프로젝트의 클라우드 코드 구문을 이해하지 못하는 경우 이 가이드를 참조하세요. ::: ## 전제 조건 :::hint{type="info"} **이 튜토리얼을 시작하려면 다음이 필요합니다:** - Back4App에서 생성된 앱. - Back4App에서 앱을 생성하는 방법을 배우려면 [새 앱 만들기 튜토리얼](https://www.back4app.com/docs/get-started/new-parse-app)을 참조하세요. - Back4App 앱을 위한 서브 도메인 설정 - Back4App에서 서브 도메인을 생성하는 방법을 배우려면 [웹 호스팅 및 실시간 쿼리 활성화](https://www.back4app.com/docs/platform/activating-web-hosting)를 참조하세요. - 트위터 [계정](https://twitter.com/)이 필요하며, [개발자 접근 권한](https://twitter.com/i/flow/login?input_flow_data=%7B%22requested_variant%22%3A%22eyJyZWRpcmVjdF9hZnRlcl9sb2dpbiI6Imh0dHBzOi8vZGV2ZWxvcGVyLnR3aXR0ZXIuY29tL2VuL3BvcnRhbC9wZXRpdGlvbi9lc3NlbnRpYWwvYmFzaWMtaW5mbyJ9%22%7D)을 신청해야 합니다. ::: ## 1 - 새로운 Back4App 앱 만들기 우선, Back4App에 기존 앱이 생성되어 있는지 확인해야 합니다. 그러나 새로운 사용자라면 [이 튜토리얼](https://www.back4app.com/docs/get-started/new-parse-app)을 확인하여 앱을 만드는 방법을 배울 수 있습니다. ## 2 - 액세스 토큰 생성 프로젝트에서 Twitter 로그인을 작동시키기 위해서는 소비자 키와 소비자 비밀이 필요합니다. 액세스 토큰 키를 생성하려면 Twitter 앱이 있어야 합니다. 기본적으로 두 가지 옵션이 있습니다: - 기존의 Twitter 앱이 있고 이를 수정하고 싶다면, [Twitter 앱 대시보드](https://twitter.com/i/flow/login?input_flow_data=%7B%22requested_variant%22%3A%22eyJyZWRpcmVjdF9hZnRlcl9sb2dpbiI6Imh0dHBzOi8vZGV2ZWxvcGVyLnR3aXR0ZXIuY29tL2VuL2FwcHMifQ%3D%3D%22%7D)에 접속해 주십시오. - 새로운 앱을 만들고 싶다면, 같은 대시보드에 접속할 수 있지만, 승인된 개발자 계정이 있어야 합니다. :::hint{type="warning"} **힌트: **개발자 계정에 대한 접근을 요청하는 동안 몇 가지 질문에 답해야 할 것입니다. 그러나 계약 조건에 동의하는 것을 잊지 마십시오. ::: ### 2.1 - 앱 세부정보 구성 이 주제에서는 Twitter 앱 자격 증명을 구성할 것입니다. 이 애플리케이션에 대해 **WebHosting**을 활성화하는 것이 필요하며, WebHosting에 대해 더 읽으려면 [Back4App WebHosting 튜토리얼](https://www.back4app.com/docs/platform/parse-web-hosting)을 참조하십시오. 그 후 [Twitter 대시보드](https://developer.twitter.com/en/apps)로 가서 `앱 만들기` 또는 기존 앱을 수정하려면 `세부정보` > `수정` > `세부정보 수정`을 선택하십시오. 다음을 작성하십시오: - *앱 이름* - *애플리케이션 설명* - *이 앱이 어떻게 사용될 것인지 알려주세요* **웹사이트 URL**은 귀하의 [Back4App 하위 도메인](https://www.back4app.com/docs/platform/parse-web-hosting)으로 남겨두실 수 있으며, **콜백 URL**는 [하위 도메인](https://www.back4app.com/docs/platform/parse-web-hosting) + `/twitter-callback`. 다음과 같은 형식이 됩니다: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/xULOFfw_M7P5-mgdnbnLO_image.png" size="60" width="516" height="358" position="center" showCaption="false"} ## 3 - 트위터 설정 JavaScript용 Twitter 로그인을 사용하려면 다음 단계를 따라야 합니다: 1. Back4app을 Twitter 앱과 연결하고 Back4App 계정에 로그인하려면; 2. 앱의 `서버 설정`을 클릭하세요: 3. 그런 다음 `설정`을 클릭하세요. **Twitter 로그인** 블록의. 다음과 같이 보여야 합니다: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/cKRrWzxdF3MDIKFsJGXMf_image.png" size="40" width="260" height="322" position="center" showCaption="false"} ## 4 - 템플릿 가져오기 GitHub 저장소에서 템플릿을 다운로드하세요. 다음 명령어를 사용하여 다운로드할 수 있습니다: :::BlockQuote curl -LOk https\://github.com/templates-back4app/twitter-login-js/archive/master.zip && unzip master.zip ::: ## 5 - 키 교체하기 위의 프로젝트를 다운로드한 후, `./cloud/app.js` 파일을 열고 다음 변수를 2단계에서 생성된 키로 교체하세요: :::BlockQuote **const** back4appWebhostDomain **=** 'YOUR\_BACK4APP\_WEBHOST\_DOMAIN'; **const** consumer\_key **=** 'YOUR\_CONSUMER\_KEY'; **const** consumer\_secret **=** 'YOUR\_CONSUMER\_SECRET'; ::: ## 6 - 코드를 Back4App 서버에 업로드하기 Back4App으로 앱을 배포하려면 코드를 클라우드 코드에 업로드해야 합니다. 그렇게 하려면 아래 단계를 따르세요: 1. 앱으로 가서 [Back4App 웹사이트 ](https://www.back4app.com/)를 클릭하세요 `서버 설정`. 2. “클라우드 코드” 블록을 찾아서 `설정`. ''클라우드 코드'' 블록은 다음과 같습니다: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/eSoaWd-txhLEZ-MXoo941_image.png" size="70" width="810" height="578" position="center" showCaption="false"} 3\. `파일 선택`을 클릭하고 `index.html`로 가져온 모든 파일을 선택하세요. 그들을 `public`,로 이동한 후 `저장`,을 클릭하세요, 여기와 같이: ![](https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/n4p1MR8rvvC-w07KAloLp_image.png) 4\. 당신의 파일은 다음과 같이 보일 것입니다: ::Image[]{src="https://api.archbee.com/api/optimize/yD3zCY-NNBBIfd0uqcfR5/_NIs0EluV1tao7gJH6mT__image.png" size="70" width="533" height="538" position="center" showCaption="false"} ## 7 - 완료되었습니다 위에서 설명한 가이드를 따른 후, 생성한 웹 호스팅 주소로 브라우저를 열기만 하면 됩니다. 도움이 필요하시거나 기능/링크가 작동하지 않는 경우, 채팅을 통해 저희 팀에 문의해 주세요!