블로그 모아보기 - 인프런

[Vue js] 아임포트 결제모듈 연동(KG 이니시스)

https://www.iamport.kr/ 온라인 비즈니스의 모든 결제를 한곳에서, 아임포트결제의 시작부터 비즈니스의 성장까지 아임포트와 함께하세요www.iamport.kr - 로그인후 우측 상단의 관리자 콘솔 접근 1. 아임포트 설정 - 내 정보 탭에서 가맹점 식별코드 복사 - PG 설정에서 기본 PG 사 KG 이니시스 설정 후 저장 2. FrontEnd- public/index.html head에 추가<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js" ></script> <script type="text/javascript" src="https://cdn.iamport.kr/js/iamport.payment-1.2.0.js"></script> - Component<template> <section class="test"> <input type="number" placeholder="금액 입력" v-model="price" > <div @click="PaymentBtn">결제</div> </section> </template> <script> const { IMP } = window; export default { name: "test", data(){ return{ price: 0 } }, created(){ document.cookie = "safeCookie1=foo; SameSite=Lax"; document.cookie = "safeCookie2=foo"; document.cookie = "crossCookie=bar; SameSite=None; Secure"; }, methods: { PaymentBtn:function(){ IMP.init("관리자 콘솔 - 내 정보 - 가맹점 식별코드"); IMP.request_pay({ // param pg: "html5_inicis", pay_method: "card", merchant_uid: "ORD20180131-0000011", name: "YOYOSTUDY", amount: this.price, buyer_email: "funidea_woo@naver.com", buyer_name: "테스터", buyer_tel: "010-8832-4280", buyer_addr: "서울특별시 영등포구 당산동", buyer_postcode: "07222" }, rsp => { // callback console.log(rsp); if (rsp.success) { console.log("결제 성공"); } else { console.log("결제 실패"); } }); } } } </script> <style scoped> input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input{ width:300px; border:0; border-bottom:1px #a8a8a8 solid; margin:0 10px 0; padding:0; height:40px; line-height:40px; outline: none; } .test{ display:flex; justify-content: center; align-items: center; height:100vh; } div{ width: 200px; height:40px; background-color:#ffffff; border:1px #a8a8a8 solid; color:black; display:flex; align-items: center; justify-content: center; cursor:pointer; } </style> 2. TEST - 결제 금액 입력 후 결제 버튼 클릭 - 결제 진행 - 결제 성공 확인(console.log) - 아임포트 관리자 콘솔에서 결제 내역 확인 가능

미스터디벨로･아임포트･결제모듈

2

1

[이카운트] ECOUNT API 연동(2)

API 제공 기능 테스트 ( PHP CURL )ZONE - 문서※ HEADER : 호출방식, Content-Type, Test URL ( 테스트 URL이 따로 있네요 )※ BODY : 'COM_CODE' = '회사코드'※ Example Parameter로 데이터 보낼 구조 확인 - PHP CODE/* ZONE 조회(테스트) */ $url = 'https://sboapi.ecount.com/OAPI/V2/Zone'; // 테스트 URL $arr_post["COM_CODE"] = '아까 기록한 본인 회사코드 6자리'; $post_data = json_encode($arr_post); $ch=curl_init(); // user credencial curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); curl_setopt($ch, CURLOPT_HTTPHEADER, array('Accept: application/json', 'Content-Type: application/json')); curl_setopt($ch, CURLOPT_VERBOSE, true); //POST방식 curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST"); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data); $response = curl_exec($ch); curl_close($ch); return json_decode($response, true);※ HEADER 에 Content-Type, Accept 다 안넣으면 에러뜸ㅠ - 반환값※ ZONE 다른 기능에 사용해야해서 따로 기록

웹 개발･미스터디벨로･이카운트･ECOUNT

1

[AWS] EC2 EBS 볼륨 추가 + 마운트 + 부팅시 자동 마운트 하기

AWS 설정 1. 볼륨추가할 인스턴스 ID, 가용 영역 확인 2. 볼륨 생성 및 확인- 생성시 1번에서 확인한 인스턴스 가용영역 적용- 생성된 신규 볼륨의 ID를 클릭해서 세부정보 접근 3. 볼륨 연결- 1번에서 확인한 인스턴스 ID SELECT 4. 인스턴스 세부정보에서 볼륨이 추가됐나 확인 콘솔 접근해서 마운트 + 자동 마운트 설정 1. 파일시스템 사용량 확인 2. 연결된 디스크목록 확인 3. 파티션 생성 후 확인 4. 포맷 5. 파티션을 특정 디렉토리에 마운트- 디렉토리에 마운트- 파일시스템 확인 6. 재부팅시에도 유지돼도록 자동 마운트 설정- UUID 확인- fstab에 UUID, 마운트 위치 입력sudo vim /etc/fstab 재부팅 해서 마운트 확인 :)

미스터디벨로･AWS볼륨･서버

1

0

[이카운트] ECOUNT API 연동(3)

API 제공 기능 테스트 ( PHP CURL )로그인 - 문서 - PHP CODE/* 로그인(테스트) */ /* 문서 TEST URL = https://sboapi{ZONE}.ecount.com/OAPI/V2/OAPILogin -> {ZONE}에 ZONE 조회에서 나온 ZONE 을 입력 */ $url = 'https://sboapiCC.ecount.com/OAPI/V2/OAPILogin'; $arr_post['COM_CODE'] = '아까 기록한 본인 회사코드 6자리'; $arr_post['USER_ID'] = '아까 기록한 본인 아이디'; $arr_post['ZONE'] = 'CC'; //ZONE 조회 결과 /* 계정 인증키( Self-Customizing - 정보관리 - API 인증키발급 ) */ $arr_post['API_CERT_KEY'] = '아까 기록한 본인 인증키'; $arr_post['LAN_TYPE'] = 'ko-KR'; $post_data = json_encode($arr_post); $ch=curl_init(); // user credencial curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); curl_setopt($ch, CURLOPT_HTTPHEADER, array('Accept: application/json', 'Content-Type: application/json')); curl_setopt($ch, CURLOPT_VERBOSE, true); //POST방식 curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST"); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data); $response = curl_exec($ch); curl_close($ch); return json_decode($response, true); - 반환값※ SESSION_ID 로 다른 API들을 사용해야 함

웹 개발･미스터디벨로･이카운트･이카운트API

0

[이카운트] ECOUNT API 연동(1)

기존에 사용중인 이카운트를 활용한 재고관리 백엔드 개발을 해야해서 몇개 테스트해봄Spring이나 Node나 다른 백엔드에서도 별로 어렵지않게 연동 가능할듯 - ECOUNT 홈페이지 ( https://www.ecount.com/kr/ ) ERP 모든 기능 월4만원 | 웹기반 이카운트 ERP이카운트는 재고,생산,회계,영업,급여,그룹웨어,웹메일 등 업무관리에 필요한 모든 기능을 월4만원에 제공하는 클라우드 기반의 ERP프로그램입니다.www.ecount.com - ECOUNT OPEN API 개발문서 ( https://sboapi.ecount.com/ECERP/OAPI/OAPIView?lan_type=ko-KR ) https://sboapi.ecount.com/ECERP/OAPI/OAPIView?lan_type=ko-KR이카운트 오픈 API 란? 고객사(개발자)가 이카운트와 타 사이트 및 프로그램과의 연동 기능을 개발할 수 있도록 [이카운트의 데이터 플랫폼을 외부에 공개]하는 서비스 입니다. 개발단계 [이카운sboapi.ecount.com 선작업(셋팅) - 이카운트 ERP 로그인 페이지※ Code, ID 따로 기록해두세요 ( API에 사용 ) - 이카운트 ERP API 인증키 발급(테스트용 KEY)※ 인증키 따로 기록해두세요 ( API에 사용 )※ 내가 테스트한 기능들이 미검증에서 검증으로 바뀐것을 확인할 수 있음 - 이카운트 ERP 창고 등록창고 코드, 창고명 입력후 저장※ 테스트용 창고를 3개 만듬 - 이카운트 ERP 품목 등록품목코드, 품목명, 입고단가, 출고단가 입력후 저장※ 테스트용 품목을 2개 만듬 - 이카운트 ERP 품목별 재고 입력※ 상품1(품목)이 쇼핑몰1 창고, 쇼핑몰2 창고에 각각 900개, 300개씩 있다고 입력함 ※ 상품2(품목)가 쇼핑몰1 창고, 쇼핑몰2 창고, 쇼핑몰3 창고에 각각 300개, 200개, 500개 씩 있다고 입력함 입력한 창고 + 품목 재고 다음글부터 API 연동 테스트 시작

웹 개발･미스터디벨로･이카운트･이카운트API

0

[이카운트] ECOUNT API 연동(6)

API 제공 기능 테스트 ( PHP CURL )구매 입력(품목) - 문서 ( 너무 길어서 생략 ) - PHP CODE/* 구매 입력 */ /* 문서 TEST URL = https://sboapi{ZONE}.ecount.com/OAPI/V2/Purchases/SavePurchases?SESSION_ID={SESSION_ID} -> {ZONE}에 ZONE 조회 반환값 ZONE, {SESSION_ID}에 로그인 반환값 SESSION_ID */ $url = 'https://sboapiCC.ecount.com/OAPI/V2/Purchases/SavePurchases?SESSION_ID=로그인 반환값 SESSION_ID'; $arr_post['SaleList'] = array(); for($i=0;$i<4;$i++){ $data['SESSION_ID'] = '로그인 반환값 SESSION_ID'; $data['WH_CD'] = '100'; //창고 코드 $data['PROD_CD'] = '000200'; //품목 코드 $data['PROD_DES'] = '상품2'; //품목 명 $data['QTY'] = '9'; //수량 $child['BulkDatas'] = $data; $child['Line'] = $i.""; array_push($arr_post['PurchasesList'], $child); } $post_data = json_encode($arr_post); $ch=curl_init(); // user credencial curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); curl_setopt($ch, CURLOPT_HTTPHEADER, array('Accept: application/json', 'Content-Type: application/json')); curl_setopt($ch, CURLOPT_VERBOSE, true); //POST방식 curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST"); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data); $response = curl_exec($ch); curl_close($ch); return json_decode($response, true);※ 쇼핑몰 창고1 ( 창고코드 : 100 ) 에 상품2 ( 품목코드 : 000200 ) 를 9개씩 4번 구매함 - 반환값※ 반환값 정상인지 확인하고 이카운트 ERP에서 구매현황, 재고 현황 다 확인 ㄱ

웹 개발･미스터디벨로･이카운트

0

[이카운트] ECOUNT API 연동(5)

API 제공 기능 테스트 ( PHP CURL )판매 입력(품목) - 문서 ( 너무 길어서 생략 ) - PHP CODE/* 판매 입력 */ /* 문서 TEST URL = https://sboapi{ZONE}.ecount.com/OAPI/V2/Sale/SaveSale?SESSION_ID={SESSION_ID} -> {ZONE}에 ZONE 조회 반환값 ZONE, {SESSION_ID}에 로그인 반환값 SESSION_ID */ $url = 'https://sboapiCC.ecount.com/OAPI/V2/Sale/SaveSale?SESSION_ID=로그인 반환값 SESSION_ID'; $arr_post['SaleList'] = array(); for($i=0;$i<5;$i++){ $data['SESSION_ID'] = '로그인 반환값 SESSION_ID'; $data['WH_CD'] = '100'; //창고 코드 $data['PROD_CD'] = '000100'; //품목 코드 $data['PROD_DES'] = '상품1'; //품목 명 $data['QTY'] = '3'; //수량 $child['BulkDatas'] = $data; $child['Line'] = $i.""; array_push($arr_post['SaleList'], $child); } $post_data = json_encode($arr_post); $ch=curl_init(); // user credencial curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); curl_setopt($ch, CURLOPT_HTTPHEADER, array('Accept: application/json', 'Content-Type: application/json')); curl_setopt($ch, CURLOPT_VERBOSE, true); //POST방식 curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST"); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data); $response = curl_exec($ch); curl_close($ch); return json_decode($response, true);※ 쇼핑몰 창고1 ( 창고코드 : 100 ) 에 상품1 ( 품목코드 : 000100 ) 을 3개씩 5번 팔았음 - 반환값※ 반환값 정상인지 확인하고 이카운트 ERP에서 판매현황, 재고 현황 다 확인 ㄱ

웹 개발･미스터디벨로･웹개발･이카운트

0

[이카운트] ECOUNT API 연동(4)

API 제공 기능 테스트 ( PHP CURL )창고 + 품목별 재고 조회하기 - 문서 - PHP CODE/* 창고 + 품목별 재고 조회하기 */ /* 문서 TEST URL = https://sboapi{ZONE}.ecount.com/OAPI/V2/InventoryBalance/GetListInventoryBalanceStatusByLocation?SESSION_ID={SESSION_ID} -> {ZONE}에 ZONE 조회 반환값 ZONE, {SESSION_ID}에 로그인 반환값 SESSION_ID */ $url = 'https://sboapiCC.ecount.com/OAPI/V2/InventoryBalance/GetListInventoryBalanceStatusByLocation?SESSION_ID=로그인 반환값 SESSION_ID'; $arr_post['SESSION_ID'] = '로그인 반환값 SESSION_ID'; $arr_post['BASE_DATE'] = '현재 날짜 ex) 20211210'; $arr_post['COM_CODE'] = '아까 기록한 본인 회사코드 6자리'; $arr_post['USER_ID'] = '아까 기록한 본인 아이디'; $arr_post['ZONE'] = 'CC'; //ZONE 조회 결과 /* 계정 인증키( Self-Customizing - 정보관리 - API 인증키발급 ) */ $arr_post['API_CERT_KEY'] = '아까 기록한 본인 인증키'; $arr_post['LAN_TYPE'] = 'ko-KR'; $post_data = json_encode($arr_post); $ch=curl_init(); // user credencial curl_setopt($ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true); curl_setopt($ch, CURLOPT_HTTPHEADER, array('Accept: application/json', 'Content-Type: application/json')); curl_setopt($ch, CURLOPT_VERBOSE, true); //POST방식 curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST"); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data); $response = curl_exec($ch); curl_close($ch); return json_decode($response, true); - 반환값※ 초기 셋팅에서 입력한 창고 + 품목별 재고 현황이 반환됨 ㅅㅅ

웹 개발･미스터디벨로･이카운트･이카운트API

0

[Vue js] 카카오 로그인 연동

1. Kakao Developers 셋팅 - https://developers.kakao.com Kakao Developers카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다.developers.kakao.com로그인 -> 내 애플리케이션 -> 애플리케이션 추가하기로 앱 추가 요약 정보 -> JavaScript 키 기록 플랫폼 -> 사이트 도메인 등록(http://localhost 가능) 카카오 로그인 -> ON -> Rdeirect URL 등록 동의항목 -> 카카오 계정(이메일) 동의 2. FrontEnd - public/index.html에 스크립트 추가<script src="//developers.kakao.com/sdk/js/kakao.js"></script> - component<template> <section class="test"> <div v-on:click="kakaoLoginBtn">카카오 연동</div> </section> </template> <script> export default { name: "test", methods: { kakaoLoginBtn:function(){ window.Kakao.init('xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx') // Kakao Developers에서 요약 정보 -> JavaScript 키 if (window.Kakao.Auth.getAccessToken()) { window.Kakao.API.request({ url: '/v1/user/unlink', success: function (response) { console.log(response) }, fail: function (error) { console.log(error) }, }) window.Kakao.Auth.setAccessToken(undefined) } window.Kakao.Auth.login({ success: function () { window.Kakao.API.request({ url: '/v2/user/me', data: { property_keys: ["kakao_account.email"] }, success: async function (response) { console.log(response); }, fail: function (error) { console.log(error) }, }) }, fail: function (error) { console.log(error) }, }) } } } </script> <style scoped> .test{ display:flex; justify-content: center; align-items: center; height:100vh; } div{ width: 200px; height:40px; background-color:#fdd101; color:white; display:flex; align-items: center; justify-content: center; cursor:pointer; } </style> 3. 테스트

미스터디벨로･vuejs･카카오로그인･oauth

0

[Vue js] 구글 로그인 (OAuth) 연동

https://console.cloud.google.com/ Google Cloud Platform하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요.accounts.google.com 사진 순서대로 하면 걍됨 1. Oauth 동의화면 - Ouath 동의화면 검색해서 찾아들어가기 - 좌측 상단 프로젝트 선택 - 새 프로젝트 - 프로젝트 이름 입력하고 만들기 - 외부 선택 후 만들기 - 앱 정보 입력중 선택한 부분만 입력후 "저장 후 계속" - 범위 추가(이메일 등)한 뒤 "저장 후 계속" - 그냥 쭉쭉 "저장 후 계속" - 좌측 OAuth 동의 화면 클릭 -> 앱 게시 2. 사용자 인증 정보 - 사용자 인증 정보(OAuth 클라이언트 ID) 만들기 - 선택부분 입력후 만들기 * 승인된 리디렉션 URI는 frontend 주소입력 - OAuth 클라이언트가 만들어졌고 이중 클라이언트 ID 복사 3. FrontEnd public/index.html head에 meta 추가<script src="https://apis.google.com/js/platform.js" async defer></script> /* 아까 복사한 클라이언트 ID를 아래 content 부분에 넣어주세요 */ <meta name="google-signin-client_id" content="173003970129-edlpenahqprvv9amg1udu63h80u4g95e.apps.googleusercontent.com" /> component 작성(test.vue)<template> <section class="test"> <div v-on:click="GoogleLoginBtn">구글 OAuth2 연동</div> <div id="my-signin2" style="display: none"></div> </section> </template> <script> export default { name: "test", methods: { GoogleLoginBtn:function(){ var self = this; window.gapi.signin2.render('my-signin2', { scope: 'profile email', width: 240, height: 50, longtitle: true, theme: 'dark', onsuccess: this.GoogleLoginSuccess, onfailure: this.GoogleLoginFailure, }); setTimeout(function () { if (!self.googleLoginCheck) { const auth = window.gapi.auth2.getAuthInstance(); auth.isSignedIn.get(); document.querySelector('.abcRioButton').click(); } }, 1500) }, async GoogleLoginSuccess(googleUser) { const googleEmail = googleUser.getBasicProfile().getEmail(); if (googleEmail !== 'undefined') { console.log(googleEmail); } }, //구글 로그인 콜백함수 (실패) GoogleLoginFailure(error) { console.log(error); }, } } </script> <style scoped> .test{ display:flex; justify-content: center; align-items: center; height:100vh; } div{ width: 200px; height:40px; background-color:#ffffff; border:1px #a8a8a8 solid; color:black; display:flex; align-items: center; justify-content: center; cursor:pointer; } </style> 4. 테스트

미스터디벨로･vuejs･구글로그인･oauth

0

[Vue js] 카카오 맵 api 로 현재위치 마커찍는 코드

https://developers.kakao.com1. Kakao Developers에서 선행작업내 애플리케이션 생성플랫폼 - Web - 사이트 도메인등록(http://localhost 가능)요약 정보 - Java Script 키 복사 2. FrontEnd Component<template> <section class="test"> <div id="map"></div> </section> </template> <script> export default { name: "test", data() { return { map: null, markers: [], latitude: 0, longitude: 0 } }, created() { if (!("geolocation" in navigator)) { return; } // get position navigator.geolocation.getCurrentPosition(pos => { this.latitude = pos.coords.latitude; this.longitude = pos.coords.longitude; if (window.kakao && window.kakao.maps) { this.initMap(); } else { const script = document.createElement("script"); /* global kakao */ script.onload = () => kakao.maps.load(this.initMap); script.src = "//dapi.kakao.com/v2/maps/sdk.js?autoload=false&appkey=복사한 Java Script 키 입력"; document.head.appendChild(script); } }, err => { alert(err.message); }) }, methods: { initMap() { const container = document.getElementById("map"); const options = { center: new kakao.maps.LatLng(33.450701, 126.570667), level: 5, }; this.map = new kakao.maps.Map(container, options); this.displayMarker([[this.latitude, this.longitude]]); }, displayMarker(markerPositions) { if (this.markers.length > 0) { this.markers.forEach((marker) => marker.setMap(null)); } const positions = markerPositions.map( (position) => new kakao.maps.LatLng(...position) ); if (positions.length > 0) { this.markers = positions.map( (position) => new kakao.maps.Marker({ map: this.map, position, }) ); const bounds = positions.reduce( (bounds, latlng) => bounds.extend(latlng), new kakao.maps.LatLngBounds() ); this.map.setBounds(bounds); } } } } </script> <style scoped> .test { display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; } #map { width: 400px; height: 500px; border: 1px #a8a8a8 solid; } </style> 3. TEST

미스터디벨로･vuejs･카카오지도

0

[JS] 웹 FaceBook Login 연동 ( http / https )

https://developers.facebook.com Facebook for Developers11월 9일~11월 22일에 개최 예정인 XR 해커톤 등록 글로벌 혁신가들과 함께 Spark AR 및 Presence 플랫폼으로 빌드하고 상금을 차지할 기회를 노리세요. Messenger를 사용한 로그인 연결 정식 출시 이제 타developers.facebook.com1. FaceBook Developer 앱 생성 - 앱 만들기 - 소비자 선택 후 다음 - 앱 이름 , 이메일 입력후 앱 만들기 - 비밀번호 입력후 제출 2. FaceBook Developer 테스트 앱 생성( http에서 테스트용으로 사용하기 위함, https 를 제공한다면 건너 뛰어도 무방 ) - 좌측 상단 앱 클릭 후 테스트 앱 만들기 - 테스트 앱 이름 입력후 테스트 앱 만들기 - 비밀번호 입력 후 제출 3. FaceBook Developer 로그인 API 설정 - 상단의 앱 ID는 추후에 사용하니까 기억 - 중앙 Facebook 로그인의 설정 버튼 클릭 - 웹 선택 - 사이트 URL 입력 후 Save 4. FrontEnd - head에 스크립트 추가 <script async defer crossorigin="anonymous" src="https://connect.facebook.net/ko_KR/sdk.js#xfbml=1&version=v10.0&appId=887116815503093" nonce="SiOBIhLG"></script> - Vue Component로 작성했음, Vue 미사용시 JS쪽만 보면 됨<template> <section class="test"> <div v-on:click="FBLoginBtn">페이스북 로그인 연동</div> </section> </template> <script> export default { name: "test", created(){ window.fbAsyncInit = function() { window.FB.init({ appId : '887116815503093', // 아까 기억하라던 내 앱 ID cookie : true, xfbml : true, version : 'v11.0' }); window.FB.AppEvents.logPageView(); }; }, methods: { FBLoginBtn:function(){ window.FB.login(function(response) { if (response.status === 'connected') { window.FB.api('/me', 'get', {fields: 'name,email'}, function(r) { const facebook_email = r.email; const facebook_name = r.name; console.log(facebook_email); console.log(facebook_name); }) } else if (response.status === 'not_authorized') { // 사람은 Facebook에 로그인했지만 앱에는 로그인하지 않았습니다. alert('앱에 로그인해야 이용가능한 기능입니다.'); } else { // 그 사람은 Facebook에 로그인하지 않았으므로이 앱에 로그인했는지 여부는 확실하지 않습니다. alert('페이스북에 로그인해야 이용가능한 기능입니다.'); } }, {scope: 'public_profile,email'}); } } } </script> <style scoped> .test{ display:flex; justify-content: center; align-items: center; height:100vh; } div{ width: 200px; height:40px; background-color:#ffffff; border:1px #a8a8a8 solid; color:black; display:flex; align-items: center; justify-content: center; cursor:pointer; } </style> 5. TEST - 이메일, 이름 잘 받아옴 ( 사진은 프라이버시때매 숨김 )

웹 개발･미스터디벨로･js･facebooklogin･페이스북로그인･oauth

0