블로그

미스터디벨로

[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

미스터디벨로

[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

미스터디벨로

[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에 스크립트 추가<!-- appId=아까 기억하라던 앱아이디 입력 --> <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