Javascript/Typescript
Vue Guides
Vue를 사용해 Furo 로그인을 연동하는 방법을 안내합니다.
1. Git 저장소 다운로드
Furo Vue Sample 프로젝트를 다운로드 받습니다.
이어서 npm 패키지를 설치합니다
2. 프로젝트 설정
Furo 콘솔의 [Configuration > For Developers] 탭으로 넘어가 다음 두 가지 작업을 진행합니다.
- 콘솔에서 복사한 값을 .env 파일에 옮깁니다. 또는 .env파일을 생성한 후 아래와 같이 환경변수를 설정합니다.
- 콘솔 입력창의 Default Callback URI에 기본값
https://sample.furo.one/{{YOUR_CLIENT_ID}}
를http://localhost:8080/{{YOUR_CLIENT_ID}}
로 변경합니다.
redirectUri 와 callbackUri
redirectUri 와 callbackUri
-
로그인 후 사용자를 애플리케이션 내의 특정 페이지로 이동시킬 때 사용하는 속성입니다.
-
redirectUri는 애플리케이션 내에서 직접, Default Callback URI는 Furo 콘솔에서 각각 지정할 수 있습니다.
-
앱 내에서 지정한 redirectUri는 통신 중에 악의적으로 조작될 위험이 있기 때문에, Furo 콘솔에서 Default Callback URI에 등록된 URI에 한해서만 redirectUri가 정상 동작합니다.
3. 프로젝트 실행
다시 터미널로 돌아와서 아래 명령어를 입력합니다.
http://localhost:8080 에 들어가보면 Furo가 연동된 로그인 기능을 테스트해 볼 수 있습니다.