@ex-platform/vue-social-login

vue social login

Usage no npm install needed!

<script type="module">
  import exPlatformVueSocialLogin from 'https://cdn.skypack.dev/@ex-platform/vue-social-login';
</script>

README

@ex-platform/vue-social-login

  • 네이버
  • 카카오
  • 구글
  • 페이스북

Preparation

소셜 로그인 제공사의 개발자 페이지에서 키발급이 필요 합니다. 해당 키는 sdk 연결에 사용 됩니다.

Installation

yarn add @ex-platform/vue-social-login

Usage

<script setup>
import {
    NaverLogin,
    KakaoLogin,
    GoogleLogin,
    FacebookLogin,
} from '@ex-platform/vue-social-login';

function setUserInfo(userInfo) {
  console.log('SET USER INFO');
}

function failToLogin(error) {
  console.log('FAIL TO LOGIN');
}

// 네이버 로그인 버튼 클릭을 위한 함수
function onClickNaver() {
  const naverLogin = document.getElementById("naverIdLogin").firstChild;
  return naverLogin.click();
}

<script/>

<template>
    <div>
        <div class="naver" @click="onClickNaver">
            <p>네이버 로그인</p>
            <NaverLogin
                clientId="NAVER_CLIENT_ID"
                callbackUrl="NAVER_CALLBACK_URL"
                :success="successLogin"
                :fail="failLogin"
            />
        </div>
        <div class="kakao">
            <p>카카오 로그인</p>
            <KakaoLogin
                apiKey="KAKAO_API_KEY"
                :sucess="setUserInfo"
                :fail="failToLogin"
            />
        </div>
        <div class="google">
            <p>구글 로그인</p>
            <GoogleLogin
                clientId="GOOGLE_CLIENT_ID"
                :sucess="setUserInfo"
                :fail="failToLogin"
            />
        </div>
        <div class="facebook">
            <p>페이스북 로그인</p>
            <FacebookLogin
                appId="APP_ID인
                :success="successLogin"
                :fail="failLogin"
            />
        </div>
    </div>
</template>

// 로그인 버튼 커스텀 스타일을 적용하여 사용
<style>
.google {
  cursor: pointer;
  width: 300px;
  height: 100px;
  background-color: gray;
}
.kakao {
    // 부모 영역 position: relative 필수
    position: relative;
  cursor: pointer;
  width: 300px;
  height: 100px;
  background-color: yellow;
}
.naver {
  cursor: pointer;
  width: 300px;
  height: 100px;
  background-color: yellowgreen;
}
.facebook {
  cursor: pointer;
  width: 300px;
  height: 100px;
  background-color: blue;
}
</style>